javascript - 如何考虑多边形的 Angular

Question

我有一个渲染多边形形状的 Canvas 代码。我可以拖动图形并将其移动到另一个地方。我有 move 事件函数，它可以更改最近的多边形和可拖动多边形的颜色。问题是，只有当我用可拖动的图形触摸图形的一 Angular 时，我不知道如何使它们改变颜色。我所做的只是考虑了图形的宽度和高度，因此当我将图形拖动到其他图形附近时，其中一些图形即使我不触摸它们也会改变颜色。所以我应该以某种方式考虑他们的 Angular 落......这对我来说太复杂了。

代码比较多，所以我做了codepen您可以在其中看到我在说什么。

PS:仅允许 javascript 的 API。

Answer 1

有许多不同的方法可以进行命中检测，具体取决于您想要检测的内容、您想要检测它的效率等。下面的链接提供了一些很好的解决方案，通过查看点之间的关系来查找任意多边形内的点有问题的点和任何 y 轴截距。

http://alienryderflex.com/polygon/

通过将给定点与 y 截距进行比较，两侧的计数可用于确定是否存在命中。

使用如下函数可以解决此问题，该函数提供多边形顶点的 x 和 y 坐标以及测试点的 x 和 y 坐标数组。

function pointInPolygon(xs, ys, x, y) {

  var j = xs.length - 1
  var oddNodes = false

  for (var i=0; i<xs.length; i++) {
    if ((ys[i] < y && ys[j] >= y ||
         ys[j] < y && ys[i] >= y)
    &&  (xs[i] <= x || xs[j] <= x)) {
      oddNodes ^= (xs[i] + (y - ys[i]) / (ys[j] - ys[i]) * (xs[j] - xs[i]) < x)
    }
    j=i
  }

  return oddNodes
}

我创建了一个 fiddle 来显示此操作(单击多边形将改变其颜色)。

https://jsfiddle.net/95k3t26q/19/