怎么让图片从左往右移动php,微信小程序内拖动图片实现移动、放大、旋转的方法...

屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法

微信小程序这里提供了两个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