由于movable-view無法實(shí)現(xiàn)旋轉(zhuǎn),所以選擇使用canvas
看起來挺簡單的嘛,就把上面這幾個問題解決了,就可以實(shí)現(xiàn)功能了;接下來我們一一解決。
定義一個DragGraph類,傳入元素的各種屬性(坐標(biāo)、尺寸…)實(shí)例化后推入一個渲染數(shù)組里,然后再循環(huán)這個數(shù)組調(diào)用實(shí)例中的渲染方法,這樣就可以把多個元素渲染到canvas上了。
在DragGraph類中定義了判斷點(diǎn)擊位置的方法,我們在canvas上綁定touchstart事件,將手指的坐標(biāo)傳入上面的方法,我們就可以知道手指是點(diǎn)擊到元素本身,還是刪除圖標(biāo)或者變換大小的圖標(biāo)上了,這個方法具體怎么判斷后面會講解。
通過循環(huán)渲染數(shù)組判斷是非點(diǎn)擊到哪個元素到,如果點(diǎn)擊中了多個元素,也就是多個元素重疊,那第一個元素就是最上層的元素啦。
###如何實(shí)現(xiàn)拖拽元素
通過上面我們可以判斷手指是否在元素上,當(dāng)touchstart事件觸發(fā)時我們記錄當(dāng)前的手指坐標(biāo),當(dāng)touchmove事件觸發(fā)時,我們也知道這時的坐標(biāo),兩個坐標(biāo)取差值,就可以得出元素位移的距離啦,修改這個元素實(shí)例的x和y,再重新循環(huán)渲染渲染數(shù)組就可以實(shí)現(xiàn)拖拽的功能。
這一步相對比較難一點(diǎn),我會通過示意圖跟大家講解。
我們先講縮放和旋轉(zhuǎn)
通過touchstart和touchmove我們可以獲得旋轉(zhuǎn)前的旋轉(zhuǎn)后的坐標(biāo),圖中的線A為元素的中點(diǎn)和旋轉(zhuǎn)前點(diǎn)的連線;線B為元素中點(diǎn)和旋轉(zhuǎn)后點(diǎn)的連線;我們只需要求A和B兩條線的夾角就可以知道元素旋轉(zhuǎn)的角度。縮放尺寸為A和B兩條線長度之差。
計(jì)算旋轉(zhuǎn)角度的代碼如下:
const centerX = (this.x + this.w) / 2; // 中點(diǎn)坐標(biāo) const centerY = (this.y + this.h) / 2; // 中點(diǎn)坐標(biāo) const diffXBefore = px - centerX; // 旋轉(zhuǎn)前坐標(biāo) const diffYBefore = py - centerY; // 旋轉(zhuǎn)前坐標(biāo) const diffXAfter = x - centerX; // 旋轉(zhuǎn)后坐標(biāo) const diffYAfter = y - centerY; // 旋轉(zhuǎn)后坐標(biāo) const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180; const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180; // 旋轉(zhuǎn)的角度 this.rotate = currentGraph.rotate + angleAfter - angleBefore; 復(fù)制代碼 |
計(jì)算縮放尺寸的代碼如下:
// 放大 或 縮小 this.x = currentGraph.x - (x - px); this.y = currentGraph.y - (x - px);
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)