Canvas如何判斷點在形狀內及內建API效能詳解

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;
    }
  }
});

/**
 * 判斷點是否在形狀內
 * @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;
  }
};

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;
    }
  }
});

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);
});