如何考虑多边形的角答案

【问题标题】：How to consider polygon's corners如何考虑多边形的角
【发布时间】：2018-02-23 23:26:02
【问题描述】：

我有一个渲染多边形形状的画布代码。我可以拖动一个图形并将其移动到另一个地方。我有move 事件函数，可以改变最近的多边形和可拖动多边形的颜色。问题是我不知道如何让它们只有在我用可拖动的图形触摸图形的一角时才改变颜色。我做了我所做的，只考虑了一个图形的width 和height，所以当我将一个图形拖到其他图形附近时，它们中的一些甚至在我不触摸它们时都会改变它们的颜色。所以我应该以某种方式考虑他们的角落......这对我来说太复杂了。

代码比较多，所以我做了codepen，在那里你可以看到我在说什么。

PS：只允许使用 javascript 的 API。

【问题讨论】：

我在您的示例中注意到的第一件事是它们都是凸形。我相信这大大简化了您需要使用的算法。如果您还需要处理凹形，那将会改变。
我不需要处理凹形。
谷歌“多边形碰撞/重叠”
^^^ 除非您希望有人为您编写代码，否则这里有很多资源。包括很多可能需要很少调整的代码。在这里试试：stackoverflow.com/questions/753140/…
@M.科瓦尔，我不是那个意思。我只是想为这个“如何考虑多边形的角”问题找到一种算法或解决方案。

标签： javascript canvas html5-canvas

【解决方案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
}

我已经创建了一个小提琴来展示这一点（点击多边形会改变它的颜色）。

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

【讨论】：