先把代码放上来
js逻辑代码
////图标移动开始事件
start(e) {
//记录移动触摸起点位置
this.setData({
x: e.touches[0].clientX,
y: e.touches[0].clientY,
iconIndex: e.currentTarget.dataset.index
})
},
//图标移动中事件
move(e) {
if (flag) {
flag = false;
setTimeout(() => {
flag = true;
}, 100)
let arr = Object.assign({}, this.data.images, {})
//计算移动的距离
arr[e.currentTarget.dataset.index].position = {
left: e.touches[0].clientX - this.data.x,
top: e.touches[0].clientY - this.data.y
}
//这里是因为页面图片是遍历 images数组动态生成的,所以要修改images的值页面才会重新渲染,根据自身情况决定
this.setData({
images: arr
})
}
},
//图标移动结束
end(e) {
let arr = Object.assign({}, this.data.images, {})
this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].left = arr[e.currentTarget.dataset.index].left = arr[e.currentTarget.dataset.index].left + arr[e.currentTarget.dataset.index].position.left;
this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].top = arr[e.currentTarget.dataset.index].top = arr[e.currentTarget.dataset.index].top + arr[e.currentTarget.dataset.index].position.top;
arr[e.currentTarget.dataset.index].position = {
left: 0,
top: 0
};
this.setData({
images: arr
})
},
//图标缩放,旋转开始
scaleStart(e) {
let p = 500/this.data.imgUrl[this.data.imgIndex].width;//这是为了计算图片的原始尺寸,可忽略
x1 = ((125 + this.data.imgUrl[this.data.imgIndex].left * p + this.data.imgUrl[this.data.imgIndex].areaWidth / 2 * p) * this.data.p) + this.data.images[e.currentTarget.dataset.index].left;
y1 = ((102 + this.data.imgUrl[this.data.imgIndex].top * p + this.data.imgUrl[this.data.imgIndex].areaHeight / 2 * p) * this.data.p) + this.data.images[e.currentTarget.dataset.index].top;
//x1、y1是旋转或者缩放时图片的中心点坐标
let x = e.touches[0].clientX - x1,
y = e.touches[0].clientY - y1,
s = 0;
let cos = Math.abs(x) / Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5);
var radina = Math.acos(cos);
var angle = Math.floor(180 / (Math.PI / radina));
if (x > 0) {
if (y > 0) {
angle = 360 - angle
}
} else {
if (y > 0) {
angle += 180
} else {
angle = 180 - angle
}
}
//上面的代码是计算旋转或者缩放开始时触摸点和中心坐标与水平X轴的角度
this.setData({
actionIndex: e.currentTarget.dataset.index,
s: Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5),
deg1: angle
})
},
//缩放,旋转
scaleMove(e) {
if (flag) {
flag = false;
setTimeout(() => {
flag = true
}, 100)
//这个定时器是为了解决小程序中setData()使用频率太高导致代码阻塞,页面渲染延迟
let x = e.touches[0].clientX - x1,
y = e.touches[0].clientY - y1,
s = 0;
s = Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5);
let cos = Math.abs(x) / s;
var radina = Math.acos(cos);
var angle = Math.floor(180 / (Math.PI / radina));
if (x > 0) {
if (y > 0) {
angle = 360 - angle
}
} else {
if (y > 0) {
angle += 180
} else {
angle = 180 - angle
}
}
//计算旋转或者缩放进行中触摸点和中心坐标与水平X轴的角度,从而得到图片的旋转角度
if (e.currentTarget.dataset.dragize !== 0) {
obj.scale = s / this.data.s.toFixed(2)
}
obj.rotate = parseInt(this.data.deg1 - angle)
this.setData(obj)
}
},
//图标缩放,旋转结束
scaleEnd(e) {
let arr = Object.assign({}, this.data.images, {});
this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].scale = arr[e.currentTarget.dataset.index].scale = arr[e.currentTarget.dataset.index].scale * this.data.scale;
this.data.imgUrl[this.data.imgIndex].props[e.currentTarget.dataset.index].rotate = arr[e.currentTarget.dataset.index].rotate = arr[e.currentTarget.dataset.index].rotate + this.data.rotate;
this.setData({
images: arr,
actionIndex: -1,
rotate: 0,
scale: 1,
});
},
WXML页面代码
代码很乱。。毕竟是撸了三四天才搞出来的= =;哈哈哈,希望能有点帮助
最后把用到的数据结构分享一下
images: [{
dragize:1,//该图片是否允许缩放
height:960,//图片高度 初始值
id:41,
left:0,//图片的left值 相对于自己定义的初始位置
rotate:0,//旋转角度
scale:1,//缩放倍数
top:0,//图片的top值 相对于自己定义的初始位置
position:{
left:0,// 图片在移动过程中的偏移量
top:0// 图片在移动过程中的偏移量
}
url:"https://octopus-master.oss-cn-shenzhen.aliyuncs.com/sys/0fec4b1864b8341bb84d9216b2cc42df.png",
width:960//图片宽度 初始值
}],
iconIndex: -1, //大图中选中的图标下标
scale: 1, //缩放比例,图片在缩放过程中的倍数 缩放结束时应该用之前的倍数乘以该倍数
rotate: 0,//图片在旋转过程中的旋转角度 旋转结束时应该用之前的角度加上该角度
x: 0,
y: 0,
deg1: 0,
x1和y1我用的全局变量。。。因为只有在开始的时候赋值就可以后面不用改变
首先感谢这么多人的评论;受宠若惊,始料未及= =!;
应大家的的要求 我把这个功能做了一个组件;本来想做成第三方插件;你们可以直接使用的;但是第三方插件提交的时候遇到了点问题;好像个人开发不能提交第三方开发插件申请,所以暂时先把代码放到github上面了,封装后可以根据你们自己的需求进行设计;如有其它必要、合理的需求可以在本文或者github留言,下面附上github地址
小程序移动、缩放、选择组件