这篇文章将为大家详细讲解有关微信小程序中怎么实现拖动图片实现移动、放大、旋转，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
我们提供的服务有：成都网站建设、做网站、微信公众号开发、网站优化、网站认证、新河ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的新河网站制作公司
微信小程序这里提供了两个API
wx.createContext() 创建并返回绘图上下文context对象
getActions 获取当前context上存储的绘图动作，对应wx.drawCanvas(object)中的actions
clearActions 清空当前的存储绘图动作
wx.drawCanvas(object) 绘制
canvasId 画布标识，传入的cavas-id，这里的标识可以为Number，也可以是String
actions 绘图动作数组，由wx.createContext创建的context，调用getActions方法导出绘图动作数组。
最近接到一个任务，在微信小程序内拖动图片组件实现移动、放大、旋转，并记录这些图片的移动位置，放大比例，旋转角度，在一个画布上生成一张图片，最后保存到手机相册。
我的具体实现思路是这样的：
一共三个功能，可以先把功能分为图片 拖动 和图片 旋转缩放 ， 把图片的缩放和旋转做在了一起。
1.图片移动：可移动的图片肯定是要动态生成的，所以不能写死，应该是个数组，具备很多的属性。
例如：（并不是我项目的真实数据）
重庆分公司
重庆分公司
itemList: [{
id: 1,
image: '1.png',//图片地址
top: 100,//初始图片的位置
left: 100,
x: 155, //初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: 155,
scale: 1,//缩放比例 1为不缩放
angle: 0,//旋转角度
active: false //判定点击状态
}, {
id: 2,
image: '2.png',
top: 50,
left: 50,
x: 155,
y: 155,
scale: 1,
angle: 0,
active: false事件绑定图片上或者图片的父级，绑定bindtouchstart bindtouchmove事件。再bindtouchstart事件里，获取手指点击的某一个图片的点击坐标，并记录在这个图片对象的属性里面，在bindtouchmove事件里，移动的时候记录移动后的坐标，并算出俩次滑动的距离差值，追加给图片对象的left、top、x、y上，最后把本次滑动的坐标赋值给bindtouchmove事件里拿到的坐标，作为老坐标。这样就可以实现图片的滑动。
注：代码里的 items 只是我定义的一个全局变量，是一个空数组，在onLoad函数里 items = this.data.itemLits；
这样就不会频繁的去setData，我只需要处理items，处理完之后，再this.setData（｛itemLits:items ｝）
WraptouchStart: function (e) {
for (let i = 0; i < items.length; i++) { //旋转数据找到点击的
items[i].active = false;
if (e.currentTarget.dataset.id == items[i].id) {
index = i; //记录下标
items[index].active = true; //开启点击属性
}
}
items[index].lx = e.touches[0].clientX; // 记录点击时的坐标值
items[index].ly = e.touches[0].clientY;
this.setData({ //赋值
itemList: items
})
}
, WraptouchMove: function (e) {
//移动时的坐标值也写图片的属性里
items[index]._lx = e.touches[0].clientX;
items[index]._ly = e.touches[0].clientY;
//追加改动值
items[index].left += items[index]._lx - items[index].lx; // x方向
items[index].top += items[index]._ly - items[index].ly; // y方向
items[index].x += items[index]._lx - items[index].lx;
items[index].y += items[index]._ly - items[index].ly;
//把新的值赋给老的值
items[index].lx = e.touches[0].clientX;
items[index].ly = e.touches[0].clientY;
this.setData({//赋值就移动了
itemList: items
})
}2.图片的旋转和缩放，因为图片上已经有了touch事件，所以解决办法采用常规的在图片的一角添加一个控件解决这个问题，控件大致如图：
左边控件是删除按钮，右边控件则是手指按着旋转切缩放图片的控件，绑定bindtouchstart bindtouchmove事件。
index也是设置的全局变量。
// 触摸开始事件 items是this.data.itemList的全局变量，便于赋值 所有的值都应给到对应的对象里
touchStart: function (e) {
//找到点击的那个图片对象，并记录
for (let i = 0; i < items.length; i++) {
items[i].active = false;
if (e.currentTarget.dataset.id == items[i].id) {
console.log('e.currentTarget.dataset.id', e.currentTarget.dataset.id)
index = i;
console.log(items[index])
items[index].active = true;
}
}
//获取作为移动前角度的坐标
items[index].tx = e.touches[0].clientX;
items[index].ty = e.touches[0].clientY;
//移动前的角度
items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
//获取图片半径
items[index].r = this.getDistancs(items[index].x, items[index].y, items[index].left, items[index].top)
},
// 触摸移动事件
touchMove: function (e) {
//记录移动后的位置
items[index]._tx = e.touches[0].clientX;
items[index]._ty = e.touches[0].clientY;
//移动的点到圆心的距离 * 因为圆心的坐标是相对与父元素定位的 ，所有要减去父元素的OffsetLeft和OffsetTop来计算移动的点到圆心的距离
items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx - this.sysData.windowWidth * 0.125, items[index]._ty - 10)
items[index].scale = items[index].disPtoO / items[index].r; //手指滑动的点到圆心的距离与半径的比值作为图片的放大比例
items[index].oScale = 1 / items[index].scale;//图片放大响应的右下角按钮同比缩小
//移动后位置的角度
items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
//角度差
items[index].new_rotate = items[index].angleNext - items[index].anglePre;
//叠加的角度差
items[index].rotate += items[index].new_rotate;
items[index].angle = items[index].rotate; //赋值
//用过移动后的坐标赋值为移动前坐标
items[index].tx = e.touches[0].clientX;
items[index].ty = e.touches[0].clientY;
items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
//赋值setData渲染
this.setData({
itemList: items
})
}页面上是这样写的：
