您好,登錄后才能下訂單哦!
這篇文章主要介紹Canvas高級路徑操作之如何實現(xiàn)拖拽對象,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
為了追蹤所畫內(nèi)容,諸如畫圖應(yīng)用程序、計算機輔助設(shè)計系統(tǒng)(computer-aided design system 簡稱CAD系統(tǒng))以及游戲等許多應(yīng)用程序,都會維護(hù)一份包含當(dāng)前顯示對象的列表。通常來說,這些應(yīng)用程序都允許用戶對當(dāng)前顯示在屏幕上的物體進(jìn)行操作。比方說,在CAD應(yīng)用程序中,我們可以對設(shè)計中的元素進(jìn)行選擇、移動、縮放等操作
在Canvas中 實現(xiàn)拖拽
也同樣如此,Canvas提供了一個名為 isPointInPath(x, y)
的API,判斷 點(x, y)
是否在路徑之中。如果在路徑之中,則返回true。于是我們可以有如下思路:
維護(hù)一個可以描述各個路徑的 數(shù)組
,通過 ispointInPath(x, y)
判斷點擊位置是否在某一個路徑之中,如果在此路徑之中,選中此路徑,進(jìn)行操作(移動、縮放等),再繪制圖形
此文我以 多邊形拖拽為例進(jìn)行說明
,Demo如下(后面的印子是錄屏軟件的原因:japanese_ogre:):
CodePen打開
Demo中的多邊形如何繪制之前做過總結(jié),不再贅述:ghost::Canvas多邊形繪制
思路說明
下圖給了大致的說明及偽代碼,思路并不難,但有部分細(xì)節(jié)需要處理
代碼結(jié)構(gòu)說明
此處列舉代碼結(jié)構(gòu)及標(biāo)注其思路,更詳細(xì)的代碼注釋已在CodePen之中
因為本文重點在拖拽(drag),所以對繪圖部分描述會較少
//繪制多邊形路徑函數(shù) function drawPolygonPath //多邊形類定義 class Polygon{ ... } //根據(jù)點擊事件返回在canvas中的位置 function positoinInCanvas //獲取兩點間直線距離 function getDistance //開始階段,記錄拖拽對象 canvas.onmousedown //拖拽階段,畫路徑,描邊 canvas.onmousemove //結(jié)束階段,更新拖拽對象位置 canvas.onmouseup
關(guān)鍵部分說明
接下來開始代碼中的關(guān)鍵部分及細(xì)節(jié)處理
如何維護(hù)拖拽對象數(shù)組
在程序初始化時,我們定義一個polygonArray數(shù)組
polygonArray = []
在每次畫一個新的多邊形之后,都會new一個多邊形對象推入數(shù)組中進(jìn)行維護(hù)
const polygon = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radius); polygonArray.push(polygon);//記錄路徑對象
在后續(xù)點擊操作時,需要根據(jù)對應(yīng)信息確定點擊位置是否在路徑之中
點擊時,如何選取要拖拽的對象
首先獲取點擊時在 canvas中
的對應(yīng)位置,我的代碼用 mouseStart
記錄 x
及 y
接著遍歷 polygonArray
中的 polygon
,遍歷中調(diào)用 polygon.createPath()
,通過 isPointInPath()
判斷點擊位置是否有路徑,有的話 draggingPolygon = polygon
結(jié)束函數(shù)
const pos = positionInCanvas(e, canvasLeft, canvasTop);//獲取在canvas中的像素位置 //記錄鼠標(biāo)起始點s mouseStart.set('x', pos.x); mouseStart.set('y', pos.y); ... for (let polygon of polygonArray) { polygon.createPath(); if (ctx.isPointInPath(mouseStart.get('x'), mouseStart.get('y'))) { draggingPolygon = polygon; return; } }
拖拽時的計算
這部分要完全理解推薦大家根據(jù)Demo中兩個 console.log(draggingPolygon)
及代碼進(jìn)行調(diào)試,因為我們是在 mousemove
階段,這個階段觸發(fā)函數(shù)非常頻繁
我盡量用語言表達(dá)清楚
首先計算 move
時與 mouseStart
的距離,記為diff,有x軸上的 offsetX
,也有y軸上的 offsetY
const pos = positionInCanvas(e, canvasLeft, canvasTop), diff = new Map([ ['offsetX', pos.x - mouseStart.get('x')], ['offsetY', pos.y - mouseStart.get('y')] ]);
接著記錄當(dāng)前拖拽對象的 centerX
及 centerY
,記為temp
let tempCenterX = draggingPolygon.centerX, tempCenterY = draggingPolygon.centerY;
這里就是難理解的點,為什么要記錄?繼續(xù)往下看,后面會使用到。
根據(jù) diff
中的offset,設(shè)置draggingPolygon新的中心位置
draggingPolygon.centerX += diff.get('offsetX'); draggingPolygon.centerY += diff.get('offsetY');
接著清空畫布進(jìn)行繪制新的路徑和描邊
ctx.clearRect(0, 0, canvas.width, canvas.height); for (let polygon of polygonArray) { drawPolygonPath(polygon.sideNum, polygon.radius, polygon.centerX, polygon.centerY, ctx); ctx.stroke(); }
最后使用到上文中的 tempCenterX
與 tempCenterY
:
draggingPolygon.centerX = tempCenterX; draggingPolygon.centerY = tempCenterY;
為什么需要這么做呢?
因為我們的拖拽是 基于多邊形的原位置
,而 mousemove
階段并 不能確定函數(shù)的最終位置
,如果這時沒有復(fù)原的話,會出現(xiàn) "漂移"
,我把這兩行代碼注釋掉,效果如下:
如果我沒說清楚,墻裂推薦大家對代碼進(jìn)行修改和調(diào)試
拖拽后的處理
拖拽完成后是處于 mouseup
階段,此時我們已經(jīng)確定dragginPolygon的最終位置,進(jìn)行更新即可,最后置為null,排除 在沒有拖拽多邊形情況下,鼠標(biāo)在畫布上移動觸發(fā)對應(yīng)代碼
const pos = positionInCanvas(e, canvasLeft, canvasTop), offsetMap = new Map([ ['offsetX', pos.x - mouseStart.get('x')], ['offsetY', pos.y - mouseStart.get('y')] ]); draggingPolygon.centerX += offsetMap.get('offsetX'); draggingPolygon.centerY += offsetMap.get('offsetY'); draggingPolygon = null;
以上是“Canvas高級路徑操作之如何實現(xiàn)拖拽對象”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。