实现小程序canvas拖拽功效这篇文章，，，，下面小编从怎样实现，，，，到需解决的问题，，，，以及怎样缩放拖拽来逐一解答。
。。。。。

怎样实现

1. 使用canvas
2. 使用movable-view标签

由于movable-view无法实现旋转，，，，以是选择使用canvas

需要解决的问题

• 怎样将多个元素渲染到canvas上
• 怎样知道手指在元素上、若是多个元素重叠怎样知道哪个元素在最上层
• 怎样实现拖拽元素
• 怎样缩放、旋转、删除元素

看起来挺简朴的嘛，，，，就把上面这几个问题解决了，，，，就可以实现功效了；；；；；接下来我们逐一解决。
。。。。。

怎样将多个元素渲染到canvas上

界说一个DragGraph类，，，，传入元素的种种属性（坐标、尺寸…）实例化后推入一个渲染数组里，，，，然后再循环这个数组挪用实例中的渲染要领，，，，这样就可以把多个元素渲染到canvas上了。
。。。。。

怎样知道手指在元素上、若是多个元素重叠怎样知道哪个元素在最上层

在DragGraph类中界说了判断点击位置的要领，，，，我们在canvas上绑定touchstart事务，，，，将手指的坐标传入上面的要领，，，，我们就可以知道手指是点击到元素自己，，，，照旧删除图标或者变换巨细的图标上了，，，，这个要领详细怎么判断后面会解说。
。。。。。

通过循环渲染数组判断是非点击到哪个元素到，，，，若是点击中了多个元素，，，，也就是多个元素重叠，，，，那第一个元素就是最上层的元素啦。
。。。。。

###怎样实现拖拽元素

通过上面我们可以判断手指是否在元素上，，，，当touchstart事务触发时我们纪录目今的手指坐标，，，，当touchmove事务触发时，，，，我们也知道这时的坐标，，，，两个坐标取差值，，，，就可以得出元素位移的距离啦，，，，修改这个元素实例的x和y，，，，再重新循环渲染渲染数组就可以实现拖拽的功效。
。。。。。

怎样缩放、旋转、删除元素

这一步相对较量难一点，，，，我会通过示意图跟各人解说。
。。。。。

我们先讲缩放和旋转

通过touchstart和touchmove我们可以获得旋转前的旋转后的坐标，，，，图中的线A为元素的中点和旋转前点的连线；；；；；线B为元素中点和旋转后点的连线；；；；；我们只需要求A和B两条线的夹角就可以知道元素旋转的角度。
。。。。。缩放尺寸为A和B两条线长度之差。
。。。。。

盘算旋转角度的代码如下：

const centerX = (this.x + this.w) / 2;  // 中点坐标
const centerY = (this.y + this.h) / 2;  // 中点坐标

const diffXBefore = px - centerX;   // 旋转前坐标
const diffYBefore = py - centerY;   // 旋转前坐标
const diffXAfter = x - centerX;     // 旋转后坐标
const diffYAfter = y - centerY;     // 旋转后坐标

const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180;
const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180;

// 旋转的角度
this.rotate = currentGraph.rotate + angleAfter - angleBefore;
复制代码

盘算缩放尺寸的代码如下：

// 放大 或 缩小
this.x = currentGraph.x - (x - px);
this.y = currentGraph.y - (x - px);

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，若有知识产权人并不肯意我们使用，，，，若是有侵权请连忙联系。
。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，仅系客观性形貌，，，，如您需要相识该类商品/服务详细的资讯，，，，请您直接与该类商品/服务的提供者联系。
。。。。。