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 #crosss

getAllIntersections(pos) Kinetic.Container＃getAllIntersections

getIntersection(pos) Kinetic.Stage #getIntersection

尽管getAllIntersections可能是您需要的函数，但看起来KineticJS的作者强烈建议使用getIntersection IF而不是getAllIntersections 。 这是因为当连续多次调用时， getAllIntersections性能很差，这可能是一个问题。

根据我的经验， getIntersection只检索与该点相交的1个对象，它似乎只返回添加到舞台的最新对象，该对象与该点相交！ 我不确定你会如何在你的情况下使用它。

用户EliteOctagon编写了自己的碰撞检测功能，取得了更好的成功（以及更好的性能！）： HTML5 / kineticJS getIntersection函数实现这可能是您最好的选择。 祝好运！

哦，另外一个关于性能的小提示：如果你试图选择形状而不仅仅是“矩形”，如果你将所有可选形状命名为相同名称，并且在名称上使用.get()函数而不仅仅是.get("Rect") 。

例如：

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

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

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