KineticJS和内部形状 [英] KineticJS and shapes inside area

问题描述

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

I am looking for the fastest way to find all shapes inside an area. Please try this example in Chrome or FireFox: http://jsfiddle.net/markusleth/FBjKY/

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

I know how to iterate and compare coordinates, but I am worried about performance. Any suggestions are appreciated.

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

推荐答案

好吧，KineticJS有一些交集函数:

Well, KineticJS has a few intersection functions:

intersects(point) Kinetic.Shape#intersects

getAllIntersections(pos) Kinetic.Container#getAllIntersections

getIntersection(pos) Kinetic.Stage#getIntersection

尽管getAllIntersections可能是您需要的功能，但看起来KineticJS的作者强烈建议在getAllIntersections上尽可能使用getIntersection IF .这是因为getAllIntersections连续调用多次时性能较差，这可能对您来说是个问题.

Although getAllIntersections is probably the function you need, it looks like the author of KineticJS strongly recommends to use getIntersection IF possible over getAllIntersections. This is because getAllIntersections has poor performance when called multiple times consecutively, which is probably a problem for you.

根据我的经验，getIntersection仅检索1个与该点相交的对象，并且似乎仅返回添加到舞台上与该点相交的最新对象！我不确定您会如何使用它.

In my experience, getIntersection only retrieves 1 object that intersects the point and it seems to only return the latest object added to the stage, that intersects the point! I'm not sure how you would use this in your situation.

用户EliteOctagon编写了自己的碰撞检测功能，并获得了更好的成功(和更好的性能！): HTML5 /dynamicJS getIntersection函数实现这可能是您最好的选择.祝你好运！

User EliteOctagon wrote his own collision detection function with better success (and better performance!): HTML5 / kineticJS getIntersection function implementation This might be your best bet. Good luck!

哦，还有另一个关于性能的小窍门:如果您尝试选择形状而不只是矩形"，那么将 all 可选形状命名为相同的名称，并使用.get()的功能，而不只是.get("Rect").

Oh and another small tip on performance: if you are trying to select shapes rather than just "Rectangles", it would work better if you named all selectable shapes the same name, and use the .get() function on the name instead of just .get("Rect").

例如:

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

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

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

这篇关于KineticJS和内部形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！