hitTest() fails for non-rectangular shapes (circles, paths)

[kalaschnik]

Hey GSAP people,

 

My app asks the user to sort things in a stacked circles (or rather rings, as stacked circles are also an issue for the hitTest()). I highlight the corresponding circle whenever hovering the dragged object over it. I noticed, however, that hitTest()  seems to use the bounding box, and thus I could place objects outside the circles or in other rings when coming e.g., from a northwest direction.

 

Is there any way to solve this issue?

 

See the Pen MWXzwGo by Kalaschnik (@Kalaschnik) on CodePen

[kalaschnik]

Update, I added some eventListener for mouseenter and mouseleave, and noticed that those listener don’t use the bounding box rather than the shape itself and the actual mouse entry position (hence the names mouseenter, mouseleave :)). Interesting. Thinking about a way to combine draggable, hitTest and the detection of mouseenter, mouseleave ...?

[Cassie]

Ah ok, so the issue here is that hittest uses bounding boxes - it's correct in that the bounding boxes are overlapping - you can see if we put a border on

See the Pen mdGQvdM?editors=0110 by GreenSock (@GreenSock) on CodePen

 

From the docs -

Quote

IMPORTANT: There is no way to get pixel-perfect hit testing for non-rectangular shapes in the DOM. hitTest() uses the browser's getBoundingClientRect() method to get the rectangular bounding box that surrounds the entire element, thus if you rotate an element or if it's more of a circular shape, the bounding box may extend further than the visual edges. IE8 (and earlier) is not supported because hitTest() requires element.getBoundingClientRect() which is in all modern browsers.

Blake put together a demo for circles here which may be of use to you!

 

See the Pen YXpdYN by osublake (@osublake) on CodePen

 

[kalaschnik]

Interesting approach — two follow-up question:

- Any way to set-up the hit tolerance like for the regular hitTest() (e.g., 50%)?

- How to retrieve the 'circle2' id on onDragEnd if circle1 was indeed dropped onto circle 2?

[kalaschnik]

I got 50% by adjusting it to this:

var d1 = ((r1 + r2) * (r1 + r2) / 2);

[Cassie]

Sure this is custom code so you can do anything you like, you just have to work out the logic.

for example - 

 

// these lines are finding out the radius distance to use in the hit test, this is half of the circle
var r1 = circle1.width() / 2;

// so you can change the radius distance to trigger a different distance into the circle
var r1 = circle1.width() / 4;

 

Without jQuery and with a console log for the dragEnd

See the Pen vYzQMMg?editors=1010 by GreenSock (@GreenSock) on CodePen

[kalaschnik]

Thank you so much Cassie! Clever to search for the prior assigned css class! Neat!

[Cassie]

No worries! Glad we could help. ☺️

[kalaschnik]

Dang, I am confused about the new offsetWidth, how to get back the normal behavior (i.e., hit as soon as pixel hits)?

[Cassie]

Ok, so this right here was the original value
 

var r1 = circle1.offsetWidth / 2; 
var r2 = circle2.offsetWidth / 2;

 

That's grabbing the radius of both the circles, once we have that we can grab the position of their center points and compare the two numbers.

When the distance between their center points is equal to that number (or less than) then they're intersecting.
 

It usually helps me to break apart demos like this and rewrite it myself with notes and clearer variable names if I'm finding it confusing.

[Cassie]

offsetWidth is the same as width, that's just vanilla JS instead of jQuery - I updated the r1 variable for you in that latest demo, sorry if that was confusing, I'd just adjusted it to do 50% like you asked in the previous question!

[kalaschnik]

Unfortunately, the math absolutely breaks when being in SVG world:

I cannot get my head around this:

See the Pen abaQayr?editors=0011 by Kalaschnik (@Kalaschnik) on CodePen

 

tried getBoundingClientRect().width vs getBBox().width, but nothing seems to get the hit area right 😕

 

[Cassie]

Heya!

 

I had to rewrite it a little as my brain struggles to understand other peoples maths, gotta work through it step by step in my own head!

Basically we just need to work out the distance between the centers of the two circles by adding their radii together. Then the next job is to grab the center coordinates of each circle so we know where they're positioned in the SVG.

 

Then when we drag we can calculate the distance between the centers of the two circles using the Pythagorean theorem and check if the distance between the centers of the two circles is less than or equal to the distance between the centers when the circles are intersecting.

✨ Geometry is cool ✨

 

See the Pen dyqwvwY?editors=0111 by GreenSock (@GreenSock) on CodePen