Canvas高級路徑操做之拖拽對象

前言

爲了追蹤所畫內容，諸如畫圖應用程序、計算機輔助設計系統（computer-aided design system 簡稱CAD系統）以及遊戲等許多應用程序，都會維護一份包含當前顯示對象的列表。一般來講，這些應用程序都容許用戶對當前顯示在屏幕上的物體進行操做。比方說，在CAD應用程序中，咱們能夠對設計中的元素進行選擇、移動、縮放等操做
——《HTML5 Canvas核心技術》

在Canvas中實現拖拽也一樣如此，Canvas提供了一個名爲isPointInPath(x, y)的API，判斷點(x, y)是否在路徑之中。若是在路徑之中，則返回true。因而咱們能夠有以下思路：

維護一個能夠描述各個路徑的數組，經過ispointInPath(x, y)判斷點擊位置是否在某一個路徑之中，若是在此路徑之中，選中此路徑，進行操做(移動、縮放等)，再繪製圖形

此文我以多邊形拖拽爲例進行說明，Demo以下（後面的印子是錄屏軟件的緣由👹）：

CodePen打開

Demo中的多邊形如何繪製以前作過總結，再也不贅述👻：Canvas多邊形繪製

如下爲本文目錄

• 思路說明
• 代碼結構說明
• 關鍵部分說明
  • 如何維護拖拽對象數組
  • 如何選取要拖拽的對象
  • 拖拽時的計算
  • 拖拽後的處理
• 結語
• 參考資料

思路說明

下圖給了大體的說明及僞代碼👇，思路並不難，但有部分細節須要處理

代碼結構說明

此處列舉代碼結構及標註其思路，更詳細的代碼註釋已在CodePen之中
由於本文重點在拖拽(drag)，因此對繪圖部分描述會較少

//繪製多邊形路徑函數
function drawPolygonPath

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

//根據點擊事件返回在canvas中的位置
function positoinInCanvas

//獲取兩點間直線距離
function getDistance

//開始階段，記錄拖拽對象
canvas.onmousedown

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

//結束階段，更新拖拽對象位置
canvas.onmouseup
複製代碼

關鍵部分說明

接下來開始代碼中的關鍵部分及細節處理

如何維護拖拽對象數組

在程序初始化時，咱們定義一個polygonArray數組

polygonArray = []
複製代碼

在每次畫一個新的多邊形以後，都會new一個多邊形對象推入數組中進行維護

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

在後續點擊操做時，須要根據對應信息肯定點擊位置是否在路徑之中

點擊時，如何選取要拖拽的對象

首先獲取點擊時在canvas中的對應位置，個人代碼用mouseStart記錄x及y
接着遍歷polygonArray中的polygon，遍歷中調用polygon.createPath()，經過isPointInPath()判斷點擊位置是否有路徑，有的話draggingPolygon = polygon結束函數

const pos = positionInCanvas(e, canvasLeft, canvasTop);//獲取在canvas中的像素位置
//記錄鼠標起始點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;
                }
            }
複製代碼

拖拽時的計算

這部分要徹底理解推薦你們根據Demo中兩個console.log(draggingPolygon)及代碼進行調試，由於咱們是在mousemove階段，這個階段觸發函數很是頻繁
我儘可能用語言表達清楚🤖

首先計算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')]
    ]);
複製代碼

接着記錄當前拖拽對象的centerX及centerY，記爲temp

let
    tempCenterX = draggingPolygon.centerX,
    tempCenterY = draggingPolygon.centerY;
複製代碼

這裏就是難理解的點，爲何要記錄？繼續往下看，後面會使用到。
根據diff中的offset，設置draggingPolygon新的中心位置

draggingPolygon.centerX += diff.get('offsetX');
draggingPolygon.centerY += diff.get('offsetY');
複製代碼

接着清空畫布進行繪製新的路徑和描邊

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階段並不能肯定函數的最終位置，若是這時沒有復原的話，會出現"漂移"，我把這兩行代碼註釋掉，效果以下：

若是我沒說清楚，牆裂推薦你們對代碼進行修改和調試

拖拽後的處理

拖拽完成後是處於mouseup階段，此時咱們已經肯定dragginPolygon的最終位置，進行更新便可，最後置爲null，排除在沒有拖拽多邊形狀況下，鼠標在畫布上移動觸發對應代碼

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;
複製代碼

結語

其實這個功能實現並不難，關鍵是瞭解一個概念：經過維護當前顯示對象的列表及isPointInPath進行判斷來實現追蹤
最後歡迎你們交流學習🥳

參考資料

《HTML5 Canvas核心技術》