微信小程序微信小程序canvas拖拽、截图组件功能拖拽、截图组件功能
先看下微信小程序先看下微信小程序canvas拖拽功能拖拽功能
组件地址组件地址
github.com/jasondu/wx-… readme近期补上
实现效果实现效果
如何实现如何实现
使用canvas
使用movable-view标签
由于movable-view无法实现旋转,所以选择使用canvas
需要解决的问题需要解决的问题
如何将多个元素渲染到canvas上
如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层
如何实现拖拽元素
如何缩放、旋转、删除元素
看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了;接下来我们一一解决。
如何将多个元素渲染到如何将多个元素渲染到canvas上上
定义一个DragGraph类,传入元素的各种属性(坐标、尺寸…)实例化后推入一个 渲染数组 里,然后再循环这个数组调用实
例中的渲染方法,这样就可以把多个元素渲染到canvas上了。
如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层