时间戳

首页 > 解决方案 > 两个path2D之间的javascript画布交集

javascript - 两个path2D之间的javascript画布交集

问题描述

我正在寻找一种方法来检查两个 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 定义）。我的实体可以是正方形、圆形或更复杂的形状。

标签： javascriptcanvashtml5-canvas

解决方案

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

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

所以暂时，你可以做的是使用其他人所做的，例如有这个项目可能对最简单的路径有所帮助。您必须自己将您的 ​​Path2D 绘图调用转换为 SVG 路径命令，但如果您没有过多地处理椭圆，addPath它可能是一个解决方案。

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

但最好不要做这些。

推荐阅读