弄清楚点是否在形状内

Question

我在javascript和html画布上攻击矢量汽车游戏。 关键是你点击蓝色方块然后汽车去那里 - 简单！

外边框和内边框是我在画布上画出的两个xy点阵列

我已经到了需要弄清汽车是否在航线上的地步。

我尝试了很多不同的东西，但却无法让它发挥作用。它的对角线让我头疼。

有人能指出我正确的方向我将如何做到这一点？ 您不需要发布任何代码，只需要了解采用哪种方法以及如何计算的指导原则。

Answer 1

您可以使用CanvasRenderingContext2D#isPointInPath()检查Point是否在轨道上。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath

为此，您可能需要以某种方式重构代码，以便将轨道绘制为单独的路径。此外，必须在绘制路径之后和绘制任何furthor路径之前调用isPointInPath（），因为isPointInPath（）应用于状态堆栈上的当前路径。

Answer 2

您可以将Path2D对象与偶数填充规则和isPointInPath()结合使用。这允许您定义测试路径一次，而不必担心您在主上下文中绘制的内容。如果您的路径更改只是相应地重新定义路径对象。

首先在路径对象（而不是上下文）上定义两个路径。使用moveTo()将它们分隔为第二条路径。如果您计划中风，您可能也想使用closePath()（对于测试，这将是隐含的）。

使用路径和偶数填充规则进行测试：

if (ctx.isPointInPath(path, x, y, "evenodd")) { /* inside */ };

＆＃13;

＆＃13;

var ctx = c.getContext("2d");
var path = new Path2D();
path.arc(75, 75, 74, 0, 6.28);  // replace with the polygons
path.closePath();
path.moveTo(75 + 40, 75);
path.arc(75, 75, 40, 0, 6.28);
path.closePath();

ctx.stroke(path);
ctx.globalCompositeOperation = "copy";

window.onmousemove = function(e) {
  ctx.strokeStyle = ctx.isPointInPath(path, e.clientX, e.clientY, "evenodd") ? "red" : "#000";
  ctx.stroke(path);
};

＆＃13;

html, body {margin:0}

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;