背景：image-cropper組件提供了關于圖片的裁剪等操作。自定義的按鈕功能需要調用image-cropper相關API。我這邊自定義了一個“還原”按鈕，功能很容易實現(xiàn)，但是是否可點擊狀態(tài)不太好直接處理。

方案：間接處理 - 修改組件源碼

1.該組件作為component集成到項目，其源碼很容易修改，且作者注釋很多，很好理解相關方法；

2.我項目涉及到的操作是旋轉、單指拖動、雙指縮放操作。旋轉是自定義按鈕很好處理，主要就是單指、雙指的觸摸操作；

3.閱讀源碼 image-cropper.js 發(fā)現(xiàn)：

_start、_move方法均是同時處理單指、雙指操作，對應必然有end方法，

往下看就看到了_end方法。?

?

4.在_end方法中將這一事件發(fā)送出去

?this.triggerEvent('moveEnd');

?對應接收端（組件引用）處理?<image-cropper 參數(shù)中增加 bindmoveEnd="onMoveEnd"，js文件中代碼

// 單指、雙指操作結束 onMoveEnd() {this.setData({isChange: true}) },// 旋轉 onRotate () {this.setData({isChange: true})this.cropper.setAngle(this.cropper.data.angle -= 90); },

5.通過變量isChange控制“還原”按鈕的狀態(tài)在此不贅述。?

總結

以上是生活随笔為你收集整理的微信小程序 image-cropper 还原按钮控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。