2019为网站网站做代理被判缓刑,保定网站建设电话,wordpress手机验证注册,深圳影视广告公司收费组件地址
https://github.com/jasondu/wx-comp-canvas-drag
实现效果 如何实现
使用canvas使用movable-view标签
由于movable-view无法实现旋转#xff0c;所以选择使用canvas
需要解决的问题
如何将多个元素渲染到canvas上如何知道手指在元素上、如果多个元素重叠如何知…组件地址
https://github.com/jasondu/wx-comp-canvas-drag
实现效果 如何实现
使用canvas使用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);
