多邊形內的KineticJS dragBound

Question

我正在使用KineticJS創建應用程序。 問題是我需要將dragBoundFunc應用於多邊形內的圖像，以便用戶無法將圖像移到外部。 多邊形可以是任何形狀，例如：

演示版

var polygon = new Kinetic.Polygon({
    points: [-5, 0, 75, 0, 70, 10, 70, 60, 60, 90, 61, 92, 64, 96, 66, 100, 67, 105, 67, 110, 67, 113, 66, 117, 64, 120, 63, 122, 61, 124, 58, 127, 55, 129, 53, 130, 50, 130, 20, 130, 17, 130, 15, 129, 12, 127, 9, 124, 7, 122, 6, 120, 4, 117, 3, 113, 3, 110, 3, 105, 4, 100, 6, 96, 9, 92, 10, 90, 0, 60, 0, 10],
    fill: 'none',
    stroke: '#000',
    strokeWidth: 0,
    name: 'polygon',
    draggable: false
});

如果圖像在多邊形內，應使用哪些算法檢查？ 還是解決問題的更好方法是什么？

Answer 1

您的復雜路徑存在問題

問題在於，復雜的路徑（如您的示例）需要進行大量計算才能確定內部對象是否已逸出路徑之外。

請記住，這些計算必須在每個mousemove事件中完成。 Mousemove事件每秒可能觸發數十次。

我對KineticJS有一定的經驗，我相信將復雜路徑內的對象定界會失敗，因為在將對象拖到路徑外之前無法完成計算。

替代

作為一種選擇（如果您設計允許），可以在復雜路徑周圍創建一個邊界矩形，並使用該邊界矩形包含內部對象。

同樣，您可以在復雜路徑周圍創建一個邊界圓，並使用該邊界圓包含內部對象。

可以快速檢查矩形和圓形邊界區域，以在逸出之前將其包含在內。

我還有另一種選擇。

由於內部對象是矩形，因此可以檢查矩形的所有4個角是否在復雜路徑內。 如果所有4個角均在路徑內，則矩形可能但不一定在復雜路徑內。

您可以使用本機畫布的context.isPointInPath（corner1X，corner1Y）檢查4個角。

此解決方案將要求您：

• 維護一個單獨的屏幕外html畫布。
• 在該屏幕外畫布上繪制復雜的路徑。
• 使用context.isPointInPath測試矩形的4個角。