github.com/jasondu/wx-…javascript
因爲movable-view沒法實現旋轉,因此選擇使用canvasjava
看起來挺簡單的嘛,就把上面這幾個問題解決了,就能夠實現功能了;接下來咱們一一解決。git
定義一個DragGraph類,傳入元素的各類屬性(座標、尺寸…)實例化後推入一個渲染數組裏,而後再循環這個數組調用實例中的渲染方法,這樣就能夠把多個元素渲染到canvas上了。github
在DragGraph類中定義了判斷點擊位置的方法,咱們在canvas上綁定touchstart事件,將手指的座標傳入上面的方法,咱們就能夠知道手指是點擊到元素自己,仍是刪除圖標或者變換大小的圖標上了,這個方法具體怎麼判斷後面會講解。canvas
經過循環渲染數組判斷是非點擊到哪一個元素到,若是點擊中了多個元素,也就是多個元素重疊,那第一個元素就是最上層的元素啦。數組
###如何實現拖拽元素ui
經過上面咱們能夠判斷手指是否在元素上,當touchstart事件觸發時咱們記錄當前的手指座標,當touchmove事件觸發時,咱們也知道這時的座標,兩個座標取差值,就能夠得出元素位移的距離啦,修改這個元素實例的x和y,再從新循環渲染渲染數組就能夠實現拖拽的功能。this
這一步相對比較難一點,我會經過示意圖跟你們講解。spa
咱們先講縮放和旋轉code
經過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);
複製代碼