如何计算Rectangle与Path2D的交集占比并实现局部区域绘制？

一、判断矩形是否有50%以上处于赛道区域 #

要判断绿色矩形是否有超过一半面积在粉色赛道（Path2D定义的区域）内，核心是计算矩形与赛道的交集面积，再和矩形总面积对比：

1. 快速预判断
   • 先用Path2D.intersects(rect)判断矩形和赛道是否有交集：如果返回false，直接判定不满足；如果Path2D.contains(rect.x, rect.y)且Path2D.contains(rect.x+rect.width, rect.y+rect.height)，说明矩形完全在赛道内，直接满足条件。
2. 精确计算面积占比
   • 网格采样法：把矩形分割成大量细小的正方形网格（比如20x20的小格子），遍历每个网格的中心点，用ctx.isPointInPath(path, x, y)判断该点是否在赛道内，统计符合条件的网格数量，用(符合数量/总网格数)估算面积占比。这种方法实现简单，精度可通过调整网格密度控制。
   • 像素检测法：在离屏Canvas上先绘制赛道填充色，再绘制矩形填充色，然后读取矩形区域内的像素，统计粉色（赛道）像素的占比。适合小矩形，大矩形性能较差。
   • 几何算法：将Path2D转换为多边形顶点集，再和矩形计算交集多边形的面积，精度最高但实现复杂，可借助earcut等多边形处理库简化开发。

示例代码（网格采样法）：

function isRectOverHalfInPath(rect, path, ctx) {
  const rectArea = rect.width * rect.height;
  if (rectArea === 0) return false;

  // 快速判断
  if (!path.intersects(rect)) return false;
  if (path.contains(rect.x, rect.y) && path.contains(rect.x+rect.width, rect.y+rect.height)) {
    return true;
  }

  // 网格采样，可调整密度
  const stepX = rect.width / 20;
  const stepY = rect.height / 20;
  let inCount = 0;
  const totalCount = 20 * 20;

  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      const x = rect.x + stepX * i + stepX/2;
      const y = rect.y + stepY * j + stepY/2;
      if (ctx.isPointInPath(path, x, y)) {
        inCount++;
      }
    }
  }

  return (inCount / totalCount) > 0.5;
}

二、仅绘制矩形位于赛道内的部分 #

利用Canvas的裁剪功能即可实现，步骤如下：

1. 保存当前Canvas上下文状态，避免影响后续绘制；
2. 将裁剪区域设置为赛道的Path2D；
3. 绘制绿色矩形，此时只会显示矩形在赛道内的部分；
4. 恢复上下文状态，清除裁剪区域。

示例代码：

function drawRectInPath(rect, path, ctx) {
  ctx.save(); // 保存当前状态
  ctx.clip(path); // 设置裁剪区域为赛道路径
  // 绘制矩形
  ctx.fillStyle = 'green';
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
  ctx.restore(); // 恢复状态，清除裁剪
}

如果需要直接获取交集路径进行操作，可借助paper.js或fabric.js这类图形库，它们支持路径交集运算，生成新路径后再绘制即可。

内容的提问来源于stack exchange，提问作者Büni