如何考慮多邊形的角

Question

我有一個渲染多邊形形狀的畫布代碼。 我可以拖動一個圖並將其移動到另一個地方。 我有move事件函數，可以更改最近的多邊形和可拖動多邊形的顏色。 問題是，僅當我用可拖動的圖形觸摸圖形的一個角時，我才知道如何使它們更改顏色。 我所做的工作僅考慮圖形的width和height ，因此當我將圖形拖到其他圖形附近時，其中一些甚至在不觸摸它們的情況下也會更改其顏色。 所以我應該以某種方式考慮他們的困境...對我來說太復雜了。

有相對多的代碼，所以我做了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
}

我創建了一個小提琴來顯示實際效果（單擊多邊形將更改其顏色）。

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