支持图片和文字的移动、旋转、缩放、双指缩放,保存编辑状态并生成预览图
在做一个制作表情包的小程序,什么也不说先上菊花码 [图片] 先看一下第一个版本,low到不行,简单的一些制作功能 [图片] 接下来做有个更加人性化的制作功能,接下来就有了 支持图片和文字的移动、旋转、缩放、双指缩放,保存编辑状态并生成预览图 [图片] 其实参考了 https://github.com/goolhanrry/Weapp-Demo-LemonJournal 这位兄弟的,我在基础上加入双指缩放功能, 就在touch事件中判断是否双指操作就可以了 [代码]if[代码] [代码](e.touches.length == 2) {[代码][代码] [代码][代码]// 隐藏移除按钮[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]hideRemove: [代码][代码]true[代码][代码] [代码][代码]})[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]xMove = e.touches[1].clientX - e.touches[0].clientX;[代码][代码] [代码][代码]var[代码] [代码]yMove = e.touches[1].clientY - e.touches[0].clientY;[代码][代码] [代码][代码]var[代码] [代码]distance = Math.sqrt(xMove * xMove + yMove * yMove);[代码] [代码] [代码][代码]that.data.newdistance = distance; [代码][代码]//第二次就可以计算它们的差值了 [代码][代码] [代码][代码]that.data.diffdistance = that.data.newdistance - that.data.olddistance; [代码][代码]//两次差值[代码][代码] [代码][代码]that.data.olddistance = that.data.newdistance; [代码][代码]//计算之后更新比例 [代码][代码] [代码][代码]var[代码] [代码]res_scale = that.data.scale + 0.005 * that.data.diffdistance;[代码] [代码] [代码][代码]if[代码] [代码](res_scale > 4) { [代码][代码]//放大的最大倍数[代码][代码] [代码][代码]return[代码][代码];[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](res_scale < 1) { [代码][代码]//缩小不能小于当前[代码][代码] [代码][代码]return[代码][代码];[代码][代码] [代码][代码]}[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]scale: res_scale,[代码][代码] [代码][代码]})[代码] [代码]} [代码][代码]else[代码] [代码]{[代码] [代码] [代码][代码]// 拖动组件则所有控件同时移动[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]stickerCenterX: [代码][代码]this[代码][代码].data.stickerCenterX + diff_x,[代码][代码] [代码][代码]stickerCenterY: [代码][代码]this[代码][代码].data.stickerCenterY + diff_y,[代码][代码] [代码][代码]removeCenterX: [代码][代码]this[代码][代码].data.removeCenterX + diff_x,[代码][代码] [代码][代码]removeCenterY: [代码][代码]this[代码][代码].data.removeCenterY + diff_y,[代码][代码] [代码][代码]handleCenterX: [代码][代码]this[代码][代码].data.handleCenterX + diff_x,[代码][代码] [代码][代码]handleCenterY: [代码][代码]this[代码][代码].data.handleCenterY + diff_y[代码][代码] [代码][代码]})[代码][代码]}[代码]