CODEWITHSUNDEEP
html5-canvasmouseoverkineticjs
James
James

Reputation: 1277

Kineticjs overlapping shapes mouse over detection

Is there an easy way to do mouse over detection for multiple overlapping shapes in kineticjs (or rapheljs if this is easier in SVG). I.e. if I had two circles that partially overlap, I want to somehow detect the four scenarios:

1) When over no shapes 2) When over circle A 3) When over circle B 4) When over both (the overlap) circle A and B

But I need a generic implementation that could be extended to "n" circles/shapes.

Cheers

Upvotes: 2

Views: 2772

Answers (2)

Eric Rowell
Eric Rowell

Reputation: 5219

yep, just use the getIntersections method:

http://www.kineticjs.com/docs/symbols/Kinetic.Container.php#getIntersections

this will return all of the KineticJS nodes that intersect a given point (for example the mouse position)

Cheers!

Upvotes: 5

Jarrod
Jarrod

Reputation: 9465

To solve this you're obviously dealing with collision detection. Collision detection algorithms vary depending on the shapes you're checking for detection.

So to start, you could use the lineTo, arc, etc methods and use the built in isPointInPath to do the detection, passing in the mouse co-ords. This is the simplest way, especially with odd shaped polygons

    if (ctx.isPointInPath(20,50))
    {
        // code
    }

Upvotes: 2

Related Questions