這篇文章帶給大家的內容是關於小程式中canvas的拖曳功能詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
元件位址
https://github.com/jasondu/wx...
##如何實作
需要解決的問題
渲染數組裡,然後再循環這個陣列呼叫實例中的渲染方法,這樣就可以把多個元素渲染到canvas上了。
如何知道手指在元素上、如果多個元素重疊如何知道哪個元素在最上層在DragGraph類別中定義了判斷點擊位置的方法,我們在canvas上綁定touchstart事件,將手指的座標傳入上面的方法,我們就可以知道手指是點擊到元素本身,還是刪除圖示或變換大小的圖示上了,這個方法具體怎麼判斷後面會講解。 透過循環渲染陣列判斷是非點擊到哪個元素到,如果點擊中了多個元素,也就是多個元素重疊,那麼第一個元素就是最上層的元素啦。
如何實現拖曳元素透過上面我們可以判斷手指是否在元素上,當touchstart事件觸發時我們記錄當前的手指座標,當touchmove事件觸發時,我們也知道這時的座標,兩個座標取差值,就可以得出元素位移的距離啦,修改這個元素實例的x和y,再重新循環渲染渲染數組就可以實現拖曳的功能。
如何縮放、旋轉、刪除元素這一步相對比較難一點,我會透過示意圖跟大家講解。 我們先講縮放和旋轉#透過touchstart和touchmove我們可以得到旋轉前的旋轉後的座標,圖中的線A為元素的中點和旋轉前點的連線;線B為元素中點和旋轉後點的連線;我們只需要求A和B兩條線的夾角就可以知道元素旋轉的角度。縮放尺寸為A和B兩條線長度之差。 計算旋轉角度的程式碼如下:
const centerX = (this.x + this.w) / 2; // 中点坐标 const centerY = (this.y + this.h) / 2; // 中点坐标 const diffXBefore = px - centerX; // 旋转前坐标 const diffYBefore = py - centerY; // 旋转前坐标 const diffXAfter = x - centerX; // 旋转后坐标 const diffYAfter = y - centerY; // 旋转后坐标 const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180; const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180; // 旋转的角度 this.rotate = currentGraph.rotate + angleAfter - angleBefore;計算縮放尺寸的程式碼如下:
// 放大 或 缩小 this.x = currentGraph.x - (x - px); this.y = currentGraph.y - (x - px);相關建議:
以上是小程式中canvas的拖曳功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!