首頁 >微信小程式 >小程式開發 >小程式中canvas的拖曳功能詳解

小程式中canvas的拖曳功能詳解

不言
不言原創
2018-09-06 09:36:252258瀏覽

這篇文章帶給大家的內容是關於小程式中canvas的拖曳功能詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

元件位址

https://github.com/jasondu/wx...

##如何實作

  1. 使用canvas

  2. 使用movable-view標籤

由於movable-view無法實現旋轉,所以選擇使用canvas

需要解決的問題

  • #如何將多個元素渲染到canvas上

  • 如何知道手指在元素上、如果多個元素重疊如何知道哪個元素在最上層

  • #如何實現拖曳元素

  • #如何縮放、旋轉、刪除元素

看起來挺簡單的嘛,就把上面這幾個問題解決了,就可以實現功能了;接下來我們一一解決。

如何將多個元素渲染到canvas上

定義一個DragGraph類,傳入元素的各種屬性(座標、尺寸…)實例化後推入一個

渲染數組裡,然後再循環這個陣列呼叫實例中的渲染方法,這樣就可以把多個元素渲染到canvas上了。

如何知道手指在元素上、如果多個元素重疊如何知道哪個元素在最上層

在DragGraph類別中定義了判斷點擊位置的方法,我們在canvas上綁定touchstart事件,將手指的座標傳入上面的方法,我們就可以知道手指是點擊到元素本身,還是刪除圖示或變換大小的圖示上了,這個方法具體怎麼判斷後面會講解。

透過循環

渲染陣列判斷是非點擊到哪個元素到,如果點擊中了多個元素,也就是多個元素重疊,那麼第一個元素就是最上層的元素啦。

如何實現拖曳元素

透過上面我們可以判斷手指是否在元素上,當touchstart事件觸發時我們記錄當前的手指座標,當touchmove事件觸發時,我們也知道這時的座標,兩個座標取差值,就可以得出元素位移的距離啦,修改這個元素實例的x和y,再重新循環渲染

渲染數組就可以實現拖曳的功能。

如何縮放、旋轉、刪除元素

這一步相對比較難一點,我會透過示意圖跟大家講解。

我們先講縮放和旋轉

小程式中canvas的拖曳功能詳解

#透過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);
  相關建議:

微信小程式開發圖片拖曳功能的實作

HTML table滑鼠拖曳排序功能 

以上是小程式中canvas的拖曳功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn