在Canvas高級(jí)路徑怎么進(jìn)行拖拽對(duì)象？案例分享！

今天小編和大家分享一個(gè)有關(guān)于：“在Canvas高級(jí)路徑怎么進(jìn)行拖拽對(duì)象？”這個(gè)問題的相關(guān)內(nèi)容分享！希望對(duì)大家有所幫助！

為了追蹤所畫內(nèi)容，諸如畫圖應(yīng)用程序、計(jì)算機(jī)輔助設(shè)計(jì)系統(tǒng)（computer-aided design system 簡稱CAD系統(tǒng)）以及游戲等許多應(yīng)用程序，都會(huì)維護(hù)一份包含當(dāng)前顯示對(duì)象的列表。通常來說，這些應(yīng)用程序都允許用戶對(duì)當(dāng)前顯示在屏幕上的物體進(jìn)行操作。比方說，在CAD應(yīng)用程序中，我們可以對(duì)設(shè)計(jì)中的元素進(jìn)行選擇、移動(dòng)、縮放等操作

——《HTML5 Canvas核心技術(shù)》

在Canvas中 實(shí)現(xiàn)拖拽 也同樣如此，Canvas提供了一個(gè)名為 isPointInPath(x, y) 的API，判斷 點(diǎn)(x, y) 是否在路徑之中。如果在路徑之中，則返回true。于是我們可以有如下思路：

維護(hù)一個(gè)可以描述各個(gè)路徑的 數(shù)組 ，通過 ispointInPath(x, y) 判斷點(diǎn)擊位置是否在某一個(gè)路徑之中，如果在此路徑之中，選中此路徑，進(jìn)行操作(移動(dòng)、縮放等)，再繪制圖形

此文我以 多邊形拖拽為例進(jìn)行說明 ，Demo如下（后面的印子是錄屏軟件的原因:japanese_ogre:）：

CodePen打開

Demo中的多邊形如何繪制之前做過總結(jié)，不再贅述:ghost:：Canvas多邊形繪制

思路說明

下圖給了大致的說明及偽代碼，思路并不難，但有部分細(xì)節(jié)需要處理

代碼結(jié)構(gòu)說明

此處列舉代碼結(jié)構(gòu)及標(biāo)注其思路，更詳細(xì)的代碼注釋已在CodePen之中

因?yàn)楸疚闹攸c(diǎn)在拖拽(drag)，所以對(duì)繪圖部分描述會(huì)較少：

//繪制多邊形路徑函數(shù)
function drawPolygonPath

//多邊形類定義
class Polygon{ 
   ...
}

//根據(jù)點(diǎn)擊事件返回在canvas中的位置
function positoinInCanvas

//獲取兩點(diǎn)間直線距離
function getDistance

//開始階段，記錄拖拽對(duì)象
canvas.onmousedown

//拖拽階段，畫路徑，描邊
canvas.onmousemove

//結(jié)束階段，更新拖拽對(duì)象位置
canvas.onmouseup

關(guān)鍵部分說明

接下來開始代碼中的關(guān)鍵部分及細(xì)節(jié)處理

如何維護(hù)拖拽對(duì)象數(shù)組

在程序初始化時(shí)，我們定義一個(gè)polygonArray數(shù)組

polygonArray = []

在每次畫一個(gè)新的多邊形之后，都會(huì)new一個(gè)多邊形對(duì)象推入數(shù)組中進(jìn)行維護(hù)

const polygon = new Polygon(mouseStart.get('x'), mouseStart.get('y'), sideNum, radius);
polygonArray.push(polygon);//記錄路徑對(duì)象

在后續(xù)點(diǎn)擊操作時(shí)，需要根據(jù)對(duì)應(yīng)信息確定點(diǎn)擊位置是否在路徑之中

點(diǎn)擊時(shí)，如何選取要拖拽的對(duì)象

首先獲取點(diǎn)擊時(shí)在 canvas中 的對(duì)應(yīng)位置，我的代碼用 mouseStart 記錄 x 及 y
接著遍歷 polygonArray 中的 polygon ，遍歷中調(diào)用 polygon.createPath() ，通過 isPointInPath() 判斷點(diǎn)擊位置是否有路徑，有的話 draggingPolygon = polygon 結(jié)束函數(shù)：

const pos = positionInCanvas(e, canvasLeft, canvasTop);//獲取在canvas中的像素位置
//記錄鼠標(biāo)起始點(diǎn)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;
                }
            }

拖拽時(shí)的計(jì)算

這部分要完全理解推薦大家根據(jù)Demo中兩個(gè) console.log(draggingPolygon) 及代碼進(jìn)行調(diào)試，因?yàn)槲覀兪窃?mousemove 階段，這個(gè)階段觸發(fā)函數(shù)非常頻繁

我盡量用語言表達(dá)清楚

首先計(jì)算 move 時(shí)與 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)前拖拽對(duì)象的 centerX 及 centerY ，記為temp。

let
    tempCenterX = draggingPolygon.centerX,
    tempCenterY = draggingPolygon.centerY;

這里就是難理解的點(diǎn)，為什么要記錄？繼續(xù)往下看，后面會(huì)使用到。

根據(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;

為什么需要這么做呢？

因?yàn)槲覀兊耐献?基于多邊形的原位置 ,而 mousemove 階段并 不能確定函數(shù)的最終位置 ，如果這時(shí)沒有復(fù)原的話，會(huì)出現(xiàn) "漂移" ，我把這兩行代碼注釋掉，效果如下：

如果我沒說清楚，墻裂推薦大家對(duì)代碼進(jìn)行修改和調(diào)試

拖拽后的處理

拖拽完成后是處于 mouseup 階段，此時(shí)我們已經(jīng)確定dragginPolygon的最終位置，進(jìn)行更新即可，最后置為null，排除 在沒有拖拽多邊形情況下，鼠標(biāo)在畫布上移動(dòng)觸發(fā)對(duì)應(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;

結(jié)語

其實(shí)這個(gè)功能實(shí)現(xiàn)并不難，關(guān)鍵是了解一個(gè)概念：通過維護(hù)當(dāng)前顯示對(duì)象的列表及isPointInPath進(jìn)行判斷來實(shí)現(xiàn)追蹤
最后歡迎大家交流學(xué)學(xué)習(xí)

參考資料

《HTML5 Canvas核心技術(shù)》

好了今天忙活了這么久終于完成了有關(guān)于：“在Canvas高級(jí)路徑怎么進(jìn)行拖拽對(duì)象？”這個(gè)問題的相關(guān)內(nèi)容分享！那么更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在 W3Cschool中進(jìn)行學(xué)習(xí)。