两个path2D之间的javascript画布交集

Question

我正在寻找一种方法来检查两个 path2D 是否相交但找不到方法...

示例：

// My circle
let circlePath = new Path2D();
circlePath.ellipse(x, y, radiusX, radiusY, 0, 0, Math.PI*2, false);

// My rectangle
let rectPath = new Path2D();
rectPath.rect(x, y, width, height);

// Intersect boolean
let intersect = circlePath.intersect(rectPath); // Does not exists

有这样的功能吗？

我找到了isPointInPath(path2D, x, y)（我用我的路径来检查是否与鼠标相交）但不能在两条路径之间使用它。

或者也许是一种获取 Path2D 中所有点的数组的方法，以便将 isPointInPath 与所有点一起使用？

编辑：

仅供参考，我想要这个用于游戏开发，我希望能够检查我的实体之间的碰撞（实体由一些数据和 Path2D 定义）。我的实体可以是正方形、圆形或更复杂的形状。

Answer 1

API 中目前没有执行此操作的任何内容。

Path2D 接口仍然只是一个不透明的对象，我们甚至无法从中提取路径数据。实际上，我刚刚开始着手制定未来的提案，以公开此路径数据并向 Path2D 对象添加更多方法，例如getPointAtLength()，或导出到 SVG 路径命令，这将有助于做你想做的事，但是在它成为 API 的一部分之前我不会屏住呼吸，我必须承认我什至没有考虑包含这样的路径相交方法......

所以暂时，你可以做的是使用其他人所做的，例如this project可能对最简单的路径有所帮助。您必须自己将 Path2D 绘图调用转换为 SVG 路径命令，但如果您不过多处理省略号和addPath，这可能是一个解决方案。

否则，一个缓慢而残酷的解决方案是绘制这些路径，将 globalCompositeOperation 设置为 source-in 并检查是否有一些不透明的像素。
如果ctx.isPointInPath(path1, x, y) && ctx.isPointInPath(path2, x, y)...

，另一个缓慢而残酷的解决方案是检查每个像素

但最好不要做这些。