KineticJS and shapes inside area

Question

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
});

Answer 1

Well, KineticJS has a few intersection functions:

intersects(point) Kinetic.Shape#intersects

getAllIntersections(pos) Kinetic.Container#getAllIntersections

getIntersection(pos) Kinetic.Stage#getIntersection

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.

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.

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!

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") .

For example:

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

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

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