Canvas高階路徑操作之拖曳物件的實現

為了追蹤所畫內容，諸如畫圖應用程式、電腦輔助設計系統（computer-aided design system 簡稱CAD系統）以及遊戲等許多應用程序，都會維護一份包含當前顯示物件的清單。通常來說，這些應用程式都允許使用者對目前顯示在螢幕上的物件進行操作。比方說，在CAD應用程式中，我們可以對設計中的元素進行選擇、移動、縮放等操作

-《HTML5 Canvas核心技術》

在Canvas中实现拖拽也同樣如此，Canvas提供了一個名為isPointInPath(x, y)的API，判斷点(x, y)是否在路徑之中。如果在路徑之中，則傳回true。於是我們可以有以下思路：

維護一個可以描述各個路徑的数组，透過ispointInPath(x, y)判斷點擊位置是否在某一個路徑之中，如果在此路徑之中，選中此路徑，進行操作(移動、縮放等)，再繪製圖形

此文我以多边形拖拽为例进行说明，Demo如下（後面的印子是錄影軟體的原因:japanese_ogre:）：

CodePen打開

Demo中的多邊形如何繪製先前做過總結，不再贅述:ghost:：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中的像素位置//記錄滑鼠起始點smouseStart.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, ctctx); );}

最後使用上文的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核心技術》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。