Canvas如何判斷點在形狀內及內置API性能詳解
背景
起因是有一個項目,需要在同一個canvas中渲染一批幾何圖形,當鼠標移動到其中某一個圖形中,對這個形狀高亮處理?;緦崿F方式是監(jiān)聽mousemove
事件,回調中傳入當前鼠標的位置,同時遍歷所有圖形,判斷點是否在這個形狀中,找到當前選中的元素并重新渲染canvas。
const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(event) { const x = event.clientX - canvas.offsetLeft; const y = event.clientY - canvas.offsetTop; // Check each polygon to see if the mouse is inside for (let i = 0; i < polygons.length; i++) { const polygon = polygons[i]; // Check if the mouse is inside the polygon if (isPointInside(polygon, x, y)) { console.log('Mouse is inside polygon ' + i); break; } } });
當圖形的量級持續(xù)上升,意味著JS邏輯執(zhí)行時間同步增加,鼠標移動過快必然出現卡頓(低FPS)。
這個問題有很多優(yōu)化的角度:
- 降低鼠標事件執(zhí)行的頻率,即節(jié)流;
- 分區(qū)判斷,減少需要遍歷的多邊形數量;
- 優(yōu)化判斷點是否在形狀中的邏輯
isPointInside()
;
我初步實現的isPointInside()
主要依賴幾何坐標的計算,這里主要針對矩形、圓形、多邊形實現:
/** * 判斷點是否在形狀內 * @param shape * @param point * @param type * @returns */ export const isPointInside = ( shape: IRect | ICircle | IPolygon, point: IPoint, type: EElementType, ): boolean => { if (!shape || !point) return false; switch (type) { case EElementType.Rect: { const rect = shape as IRect; return ( rect.x <= point.x && rect.x + rect.width >= point.x && rect.y <= point.y && rect.y + rect.height >= point.y ); } case EElementType.Circle: { const circle = shape as ICircle; return ( Math.sqrt( Math.pow(point.x - circle.x, 2) + Math.pow(point.y - circle.y, 2), ) <= circle.radius ); } case EElementType.Polygon: { const polygon = shape as IPolygon; // 將多邊形劃分為若干個三角形 for (let i = 1; i < polygon.length - 1; i++) { // 計算三角形的三個頂點和點 P 的叉積 const cross1 = crossProduct(polygon[0], polygon[i], point); const cross2 = crossProduct(polygon[i], polygon[i + 1], point); const cross3 = crossProduct(polygon[i + 1], polygon[0], point); // 如果三個叉積的符號都相同,則說明點在三角形內部 if (cross1 * cross2 > 0 && cross1 * cross3 > 0) { return true; } } return false; } default: return false; } };
但當我把這個問題拋給ChatGpt時發(fā)現了另一種可能性:
const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(event) { const x = event.clientX - canvas.offsetLeft; const y = event.clientY - canvas.offsetTop; // Check each polygon to see if the mouse is inside for (let i = 0; i < polygons.length; i++) { const polygon = polygons[i]; // Set the path and color of the polygon ctx.beginPath(); ctx.moveTo(polygon.path[0].x, polygon.path[0].y); for (let j = 1; j < polygon.path.length; j++) { ctx.lineTo(polygon.path[j].x, polygon.path[j].y); } ctx.closePath(); ctx.fillStyle = polygon.color; // Check if the mouse is inside the polygon if (ctx.isPointInPath(x, y)) { console.log('Mouse is inside polygon ' + i); break; } } });
他推薦了Canvas內置的API Context.isPointInPath(path,x,y)
判斷一個點是否被一個路徑包圍。
MDN這樣介紹:developer.mozilla.org/zh-CN/docs/…
這個API此前我并未留意,當我把自己的方法同時轉達時,ChatGpt這樣評價和對比兩種方法:
The internal APIisPointInPath() is likely to be faster than the custom implementation of isPointInside()that you have provided, as it is a built-in method of the canvas API optimized for detecting whether a point is inside a path.
isPointInPath() is optimized for performance and is likely to be faster than your implementation, which calculates the shape of the annotation and checks if the point is inside. However, the exact performance difference depends on the complexity of the shapes and the number of annotations you have on the canvas.
Therefore, it's recommended to use isPointInPath() for performance reasons, especially if you have a large number of annotations. You can create a path for each annotation, and then check if the mouse pointer is inside any of the paths using isPointInPath()
出于性能考慮內置方法更好?為什么好?好到什么程度?
于是就有個接下來的實驗。
測試案例
const canvas = document.createElement('canvas'); document.body.appendChild(canvas); const count = 1000; const width = 1500; const height = 1500; canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); // Create random shapes const shapes = []; const createPathFromPoints = (points) => { const path = new Path3D(); path.moveTo(points[0].x, points[0].y); for (let i = 1; i < points.length; i++) { path.lineTo(points[i].x, points[i].y); } path.closePath(); return path; }; const createCirclePathByPoint = (center, radius) => { const path = new Path3D(); path.arc(center.x, center.y, radius, 0, 2 * Math.PI); path.closePath(); return path; }; for (let i = 0; i < count; i++) { const type = ['circle', 'rect', 'polygon'][Math.floor(Math.random() * 2)]; let shape; let path; switch (type) { case 'rect': { shape = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, width: Math.random() * 30, height: Math.random() * 30, }; const { x, y, width, height } = shape; path = createPathFromPoints([{x, y}, {x: x + width, y: y}, {x: x + width, y: y + height}, {x, y: y + height}]); break; } case 'circle': shape = { x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 20, }; path = createCirclePathByPoint({ x: shape.x, y: shape.y }, shape.radius); break; case 'polygon': shape = [ { x: Math.random() * canvas.width, y: Math.random() * canvas.height } ]; for(let i = 1; i < Math.floor(Math.random() * 10); i++) { shape.push({ x: shape[i-1].x + Math.random() * 20, y: shape[i-1].y + Math.random() * 20 }); } path = createPathFromPoints(shape); break; } shapes.push({ shape, type, path }); } function renderAllShapes(shapes, selectedIndex) { shapes.forEach(({ shape, type}, index) => { ctx.fillStyle = randomColor(); switch (type) { case 'rect': ctx.fillRect(shape.x, shape.y, shape.width, shape.height); break; case 'circle': ctx.beginPath(); ctx.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI); ctx.fill(); break; case 'polygon': ctx.beginPath(); ctx.moveTo(shape[0].x, shape[0].y); for (let i = 1; i < shape.length; i++) { ctx.lineTo(shape[i].x, shape[i].y); } ctx.closePath(); ctx.fill(); break; } }) } renderAllShapes(shapes); let customWin = 0; let builtinWin = 0; canvas.addEventListener('mousemove', (e) => { const point = { x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop }; // Method 1 const start1 = performance.now(); const result1 = shapes.findIndex(({ shape, type }) => { return isPointInside(shape, point, type); }); const end1 = performance.now(); // Method 2 const start2 = performance.now(); const result2 = shapes.findIndex(({ path }) => { return ctx.isPointInPath(path, point.x, point.y); }) const end2 = performance.now(); if ((end1 - start1) < (end2 - start2)) { customWin++; } else if ((end1 - start1) > (end2 - start2)) { builtinWin++; } renderAllShapes(shapes); console.log(result1, result2); console.log(end1 - start1, end2 - start2); console.log(customWin, builtinWin); });
上述代碼canvas中隨機創(chuàng)建了count個形狀,分別使用兩種方法判斷鼠標hover形狀,采用performance.now()毫秒級的記錄執(zhí)行時間。
同時執(zhí)行兩種方法,當count=1000時,FPS > 55正常使用,但是當count=10000時,FPS < 20,說明批量判斷存在性能瓶頸。
Count | 自定義 | 內置 |
---|---|---|
1000 | 0.030 | 0.150 |
2000 | 0.038 | 0.243 |
3000 | 0.060 | 0.310 |
根據控制臺打印,兩種方法當前hover元素的判斷一致,但執(zhí)行時間上,90%的情況下,自定義實現的isPointInside()
優(yōu)于內置APIisPointInPath()
。
所以,ChatGpt可以不負責任的講結論,內置API也不一定是最優(yōu)解,實踐是唯一標準。
以上就是Canvas如何判斷點在形狀內及內置API性能詳解的詳細內容,更多關于Canvas內置API性能的資料請關注腳本之家其它相關文章!
相關文章
詳解requestAnimationFrame和setInterval該如何選擇
這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-03-03