收藏
评论

支持图片和文字的移动、旋转、缩放、双指缩放,保存编辑状态并生成预览图

在做一个制作表情包的小程序,什么也不说先上菊花码



先看一下第一个版本,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
  })
}



最后一次编辑于  2018-09-21  (未经腾讯允许,不得转载)
复制链接收藏赞 6