欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解

 更新時(shí)間:2023年03月28日 08:57:49   作者:LewisFung  
這篇文章主要為大家介紹了Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

背景

起因是有一個(gè)項(xiàng)目,需要在同一個(gè)canvas中渲染一批幾何圖形,當(dāng)鼠標(biāo)移動(dòng)到其中某一個(gè)圖形中,對(duì)這個(gè)形狀高亮處理?;緦?shí)現(xiàn)方式是監(jiān)聽mousemove事件,回調(diào)中傳入當(dāng)前鼠標(biāo)的位置,同時(shí)遍歷所有圖形,判斷點(diǎn)是否在這個(gè)形狀中,找到當(dāng)前選中的元素并重新渲染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;
    }
  }
});

當(dāng)圖形的量級(jí)持續(xù)上升,意味著JS邏輯執(zhí)行時(shí)間同步增加,鼠標(biāo)移動(dòng)過快必然出現(xiàn)卡頓(低FPS)。

這個(gè)問題有很多優(yōu)化的角度:

  • 降低鼠標(biāo)事件執(zhí)行的頻率,即節(jié)流;
  • 分區(qū)判斷,減少需要遍歷的多邊形數(shù)量;
  • 優(yōu)化判斷點(diǎn)是否在形狀中的邏輯 isPointInside();

我初步實(shí)現(xiàn)的isPointInside()主要依賴幾何坐標(biāo)的計(jì)算,這里主要針對(duì)矩形、圓形、多邊形實(shí)現(xiàn):

/**
 * 判斷點(diǎn)是否在形狀內(nèi)
 * @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;
      // 將多邊形劃分為若干個(gè)三角形
      for (let i = 1; i < polygon.length - 1; i++) {
        // 計(jì)算三角形的三個(gè)頂點(diǎn)和點(diǎn) 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);
        // 如果三個(gè)叉積的符號(hào)都相同,則說明點(diǎn)在三角形內(nèi)部
        if (cross1 * cross2 > 0 && cross1 * cross3 > 0) {
          return true;
        }
      }
      return false;
    }
    default:
      return false;
  }
};

但當(dāng)我把這個(gè)問題拋給ChatGpt時(shí)發(fā)現(xiàn)了另一種可能性:

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內(nèi)置的API Context.isPointInPath(path,x,y)判斷一個(gè)點(diǎn)是否被一個(gè)路徑包圍。

MDN這樣介紹:developer.mozilla.org/zh-CN/docs/…

這個(gè)API此前我并未留意,當(dāng)我把自己的方法同時(shí)轉(zhuǎn)達(dá)時(shí),ChatGpt這樣評(píng)價(jià)和對(duì)比兩種方法:

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()

出于性能考慮內(nèi)置方法更好?為什么好?好到什么程度?

于是就有個(gè)接下來的實(shí)驗(yàn)。

測(cè)試案例

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中隨機(jī)創(chuàng)建了count個(gè)形狀,分別使用兩種方法判斷鼠標(biāo)hover形狀,采用performance.now()毫秒級(jí)的記錄執(zhí)行時(shí)間。

同時(shí)執(zhí)行兩種方法,當(dāng)count=1000時(shí),F(xiàn)PS > 55正常使用,但是當(dāng)count=10000時(shí),F(xiàn)PS < 20,說明批量判斷存在性能瓶頸。

Count自定義內(nèi)置
10000.0300.150
20000.0380.243
30000.0600.310

根據(jù)控制臺(tái)打印,兩種方法當(dāng)前hover元素的判斷一致,但執(zhí)行時(shí)間上,90%的情況下,自定義實(shí)現(xiàn)的isPointInside()優(yōu)于內(nèi)置APIisPointInPath()。

所以,ChatGpt可以不負(fù)責(zé)任的講結(jié)論,內(nèi)置API也不一定是最優(yōu)解,實(shí)踐是唯一標(biāo)準(zhǔn)。

以上就是Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解的詳細(xì)內(nèi)容,更多關(guān)于Canvas內(nèi)置API性能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 微信小程序 圖片加載(本地,網(wǎng)路)實(shí)例詳解

    微信小程序 圖片加載(本地,網(wǎng)路)實(shí)例詳解

    這篇文章主要介紹了微信小程序 圖片加載(本地,網(wǎng)路)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-03-03
  • JS按鈕連擊和接口調(diào)用頻率限制防止客戶爆倉

    JS按鈕連擊和接口調(diào)用頻率限制防止客戶爆倉

    這篇文章主要為大家介紹了JS按鈕連擊和接口調(diào)用頻率限制防止客戶集體爆倉詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • JS前端常見的競(jìng)態(tài)問題解決方法詳解

    JS前端常見的競(jìng)態(tài)問題解決方法詳解

    這篇文章主要為大家介紹了JS前端常見的競(jìng)態(tài)問題解決方法詳解,閱讀完本文,你將會(huì)知道:什么是競(jìng)態(tài)問題;通常出現(xiàn)在哪些場(chǎng)景;解決競(jìng)態(tài)問題有哪些方法,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪的相關(guān)資料
    2022-08-08
  • JavaScript 中的文檔對(duì)象模型 DOM

    JavaScript 中的文檔對(duì)象模型 DOM

    DOM,即文檔對(duì)象模型,前端開發(fā)工程師必學(xué)的基礎(chǔ)知識(shí),在本文將介紹如何在 HTML 文檔中選擇元素、如何創(chuàng)建元素、如何更改內(nèi)聯(lián) CSS 樣式以及如何監(jiān)聽事件,需要的朋友可以參考一下
    2021-10-10
  • 詳解微信小程序 template添加綁定事件

    詳解微信小程序 template添加綁定事件

    這篇文章主要介紹了詳解微信小程序 template添加綁定事件的相關(guān)資料,需要的朋友可以參考下
    2017-06-06
  • 詳解requestAnimationFrame和setInterval該如何選擇

    詳解requestAnimationFrame和setInterval該如何選擇

    這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
    2023-03-03
  • 17個(gè)JavaScript?單行程序

    17個(gè)JavaScript?單行程序

    這篇文章主要介紹了17個(gè)JavaScript?單行程序?,在?JavaScript?代碼的世界里,在保證代碼易讀性的前提下更少等于更好,下面文章將為大家分享17?個(gè)?JavaScript?單行程序代碼,希望能幫助到大家
    2021-12-12
  • 微信小程序 PHP后端form表單提交實(shí)例詳解

    微信小程序 PHP后端form表單提交實(shí)例詳解

    這篇文章主要介紹了微信小程序 PHP后端form表單提交實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-01-01
  • fetch-event-source庫使用源碼學(xué)習(xí)

    fetch-event-source庫使用源碼學(xué)習(xí)

    這篇文章主要為大家介紹了fetch-event-source庫源碼學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • 微信小程序 rpx 尺寸單位詳細(xì)介紹

    微信小程序 rpx 尺寸單位詳細(xì)介紹

    這篇文章主要介紹了微信小程序 rpx尺寸單位以及樣式詳細(xì)介紹的相關(guān)資料,有效的幫助大家開發(fā)微信小程序,避免手機(jī)尺寸問題,需要的朋友可以參考下
    2016-10-10

最新評(píng)論