微信小程序 利用transform:Matrix(a,b,c,d,e,f) 实现图片拖拽

微信小程序的样式属性 transform:Matrix()是一个非常强大的功能，通过这个组建可以实现非常多的图形变化，位移等功能。

下面上位移样例：



如图，我要在红色区域内移动图片，而这个图片是有一个原始样式的，也就是它本身是有一个matrix（x,x,x,x,x,x）属性的，所以我只要在后台不断更改它的属性就可以了。

1）：

需要给这张图片一个滑动触发的方法bindtouchmove=moveImg。在js文件里书写方法
首先moveImg(res)里res会自动封装它触发的位置信息封装在res.touches[0]

里面，我们可以获取到它的pageX和pageY，但是注意的是这里的x和y是绝对位置的值，也就是在整个屏幕左上角为起始点，而matrix

是相对位置，我设置的它的背景图为它的相对点，也就是说（0，0）是红色背景的左上角第一个点，所以要进行计算一下。

2）：
计算相对位置的方法呢，就看你背景怎么设置了，这里呢 我的蓝色背景是占到整个屏幕width的20%，而红色背景是居于白色背景
的中心，所以有红色背景的width就可以很轻松算出绝对位置到相对位置的pageX和pageY，然后setdata一下，将属性保存到js

中。

3）：

就是设置边界了，其实也比较简单，就是在setdata前判断一下，如果
蓝色背景宽度+（白色背景宽度-红色背景宽度）/2<pageX<总的宽度-（白色背景宽度-红色背景宽度）/2
那就可以设置，要不然就不能设置。

4):

最后就很简单啦，将图片的样式中的transform:matrix(x,x,x,x,{{pageX}},{{pageY}})就可以啦

等我做出来放大和缩小再来写。。。