微信小程序 image-cropper 还原按钮控制

背景：image-cropper组件提供了关于图片的裁剪等操作。自定义的按钮功能需要调用image-cropper相关API。我这边自定义了一个“还原”按钮，功能很容易实现，但是是否可点击状态不太好直接处理。

方案：间接处理 - 修改组件源码

1.该组件作为component集成到项目，其源码很容易修改，且作者注释很多，很好理解相关方法；

2.我项目涉及到的操作是旋转、单指拖动、双指缩放操作。旋转是自定义按钮很好处理，主要就是单指、双指的触摸操作；

3.阅读源码 image-cropper.js 发现：

_start、_move方法均是同时处理单指、双指操作，对应必然有end方法，

往下看就看到了_end方法。 

 

4.在_end方法中将这一事件发送出去

 this.triggerEvent('moveEnd');

 对应接收端（组件引用）处理 <image-cropper 参数中增加 bindmoveEnd="onMoveEnd"，js文件中代码

// 单指、双指操作结束
onMoveEnd() {
  this.setData({
    isChange: true
  })
},

// 旋转
onRotate () {
  this.setData({
    isChange: true
  })
  this.cropper.setAngle(this.cropper.data.angle -= 90);
},

5.通过变量isChange控制“还原”按钮的状态在此不赘述。