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

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

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

2.我項(xiàng)目涉及到的操作是旋轉(zhuǎn)、單指拖動(dòng)、雙指縮放操作。旋轉(zhuǎn)是自定義按鈕很好處理，主要就是單指、雙指的觸摸操作；

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

_start、_move方法均是同時(shí)處理單指、雙指操作，對(duì)應(yīng)必然有end方法，

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

?

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

?this.triggerEvent('moveEnd');

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。