KineticJS和區域內的形狀

我正在尋找最快的方式來查找區域內的所有形狀。請在Chrome或FireFox中嘗試以下示例：http://jsfiddle.net/markusleth/FBjKY/KineticJS和區域內的形狀

我知道如何迭代和比較座標，但我擔心性能。任何建議表示讚賞。

var x1, x2, y1, y2; 
var shapes = stage.get("Rect"); 
shapes.each(function (shape) { 
    // calculate if shape is inside x1, x2, y1, y2 
});

來源

2013-07-05 user2553083

好，KineticJS有幾個路口功能：

intersects(point)Kinetic.Shape#intersects

getAllIntersections(pos)Kinetic.Container#getAllIntersections

getIntersection(pos)Kinetic.Stage#getIntersection

雖然getAllIntersections可能是功能你需要，它看起來像KineticJS的作者強烈建議使用getIntersectionIF可能超過getAllIntersections。這是因爲getAllIntersections連續多次調用時性能較差，這可能是您的問題。

根據我的經驗，getIntersection只能檢索1個與點相交的對象，它似乎只返回添加到舞臺上的最新對象，它與點相交！我不確定你會如何在你的情況下使用它。

用戶EliteOctagon編寫了自己的碰撞檢測功能，取得了較好的成績（並且性能更好！）：HTML5/kineticJS getIntersection function implementation這可能是您最好的選擇。祝你好運！

哦，另一個小技巧上的表現：如果你想選擇的形狀，而不是僅僅「矩形」，這是可行的，如果你被點名所有可選擇的形狀相同的名字更好，並使用.get()功能上的名字而不是僅僅.get("Rect")。

例如：

new Kinetic.Rect({ 
    name: "selectableShape" 
}); 

new Kinetic.Ellipse({ 
    name: "selectableShape" 
}); 

var selectableShapes = stage.get(".selectableShape");

來源

2013-07-05 16:42:45 projeqht

謝謝你的答案。我得出同樣的結論： 1.當前版本的Kineticjs API不會很好，未來的版本可能會添加更好的碰撞檢測功能 2.我需要拿出我自己的「算法」我決定計算形狀的中心並檢查它是否在選擇區域內。它會做現在： http://jsfiddle.net/markusleth/FBjKY/ – user2553083

我希望我知道如何添加線剎車。雙空間不起作用... – user2553083

KineticJS和區域內的形狀

回答

相關問題