KineticJS和区域内的形状

Question

我正在寻找最快的方式来查找区域内的所有形状。 请在Chrome或FireFox中尝试以下示例：http://jsfiddle.net/markusleth/FBjKY/

我知道如何迭代和比较坐标，但我担心性能。任何建议表示赞赏。

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

Answer 1

好，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");