Fabric.js: Per-pixel collision detection

[raichu]

I know, fabric.js doesn't work _well_ per wiki :)
But does it work _at all_? Is there a way (no matter how slow or inelegant) of doing per-pixel collision detection between two objects?
toDataURL is asynchronous at the moment, so the answer is maybe no?

[raichu]

For reference: https://github.com/kangax/fabric.js/wiki/When-to-use-Fabric

Things Fabric is not so good at:

• Non-trivial collision detection (e.g. per-pixel or per-curve)

[raichu]

_isTargetTransparent seems to be helpful but is marked as private; could it be made public?

[kangax]

Sure, no harm in that.

[raichu]

I'm sorry if I'm being verbose here, is it correct that isTargetTransparent can be used to detect per-pixel collision detection reliably?

It relies on contextCache, and by looking at the name, it sounds like it may or may not contain all the objects on the canvas. But it's used for per-pixel drag & drop without problems so it's okay maybe?

[kangax]

contextCache is used as a placeholder to draw target onto, for checking purposes

[gertjanspriensma]

Raichu, I'm really curious if you made this work! I just started working on a similar problem with Fabric.js and would love to see your solution if you build it.

[raichu]

I solved this brute-force: whenever an object moves, I check if the bounding rect is colliding with with another object, and if yes, I get the intersection and use canvas.isTargetTransparent on both objects and scan the intersection area.
It works fairly smooth on an i7 desktop, but it may lag on low-end devices such as tablets. If this becomes an issue, asm.js might help maybe? (probably will take forever to get any decent asm.js support in safari or android browser though, and even if it's added, majority still use legacy versions)

[kangax]

That's cool. Perhaps we can even create a demo of this functionality. Or
integrate into http://fabricjs.com/intersection/

On Tue, Jun 4, 2013 at 6:30 AM, raichu [email protected] wrote:

I solved this brute-force: whenever an object moves, I check if the
bounding rect is colliding with with another object, and if yes, I get the
intersection and use canvas.isTargetTransparent on both objects and scan
the intersection area.
It works fairly smooth on an i7 desktop, but it may lag on low-end devices
such as tablets. If this becomes an issue, asm.js might help maybe?

—
Reply to this email directly or view it on GitHubhttps://github.com/kangax/fabric.js/issues/595#issuecomment-18888607
.

[raichu]

Well, actually, my code is broken because, as I mentioned in #601, fabric doesn't have a consistent way of finding the intersecting polygon of two objects.
The stated reason was, if an object isn't contained within another, then they're not considered to be intersecting (which is mathematically wrong BTW, the word "intersection" has a fabric-specific meaning), thus you get no intersection polygon but instead an intersection line in these cases. I don't know if it's going to get fixed at all.

[kangax]

There's isContainedWithinObject, which we use like this (for example) —
https://github.com/kangax/fabric.js/blob/5792521c7a993935c1e00dcd43744f31b2e9094e/src/static_canvas.class.js#L870-L872

On Wed, Jun 12, 2013 at 6:41 AM, raichu [email protected] wrote:

Well, actually, my code is broken because, as I mentioned in #601https://github.com/kangax/fabric.js/issues/601,
fabric doesn't have a reliable way of finding the intersecting polygon of
two objects.
The stated reason was, if an object isn't contained within another, then
they're not considered to be intersecting (which is mathematically wrong
BTW, the word "intersection" has a fabric-specific meaning), thus you get
no intersection polygon but instead an intersection line in these cases. I
don't know if it's going to get fixed at all.

—
Reply to this email directly or view it on GitHubhttps://github.com/kangax/fabric.js/issues/595#issuecomment-19306570
.

[raichu]

Thanks, I've actually been using it in that form. But it doesn't help finding the intersecting polygon.

My understanding is, object intersection in fabric actually means object _boundary_ intersection (thus when one object is contained within another, there is no intersection), and the result of intersectPolygonPolygon is the edges fully contained within the other objects, which doesn't necessarily form a polygon (in fact, it's just a line in most cases). And if I'm not missing anything, there are no functions that will truly give the intersecting polygon for two objects in fabric. Do these sound to be correct?

[beleneglorion]

Hi
@raichu have you find a solution to achieve working per-pixel colision ? i have a projet and we are stuck to the same place.

[praveenkashyapv3p]

hi, with the help of paths i'm creating a dynamic polygon. is there a method where i can automatically rectangle inside created polygon?

[wangxianzhe015]

Hi, thanks for this awesome library.
By the way, do you think those two lines intersect each other?
I see your library has bugs yet, May I try to fix this functionality? or Could you fix it for me?
Thanks in advance.

[asturur]

The line intersect because bounding box intersect. if you draw straight lines, rotate them in the same position, they will not intersect.

[wangxianzhe015]

Thank you for your reply.
But I implemented circle and hexagon, I need them not overlapping.

Could you suggest me a way to do so?

[asturur]

there is no built in fabric.
You can have so many different shapes and different way to calculate
intersection. Maybe one day we will have generic shape intersections. for
now not.
There are libraries that do this kind of calculation somewhere. if you spot
one, please tell us.

2017-02-03 9:18 GMT+01:00 Wang Xianzhe [e-mail]:

Thank you for your reply.
But I implemented circle and hexagon, I need them not overlapping.
[image: image]
https://cloud.githubusercontent.com/assets/13096696/22584244/3d565ccc-e9e9-11e6-8f47-2be9ea8e5d9d.png
Could you suggest me a way to do so?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/595#issuecomment-277189634,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABI4QMFyja3DuNcI0kxeqBxNjn4KiwMLks5rYuLOgaJpZM4Ani05
.

[Hellowor1d]

there is no built in fabric. You can have so many different shapes and different way to calculate intersection. Maybe one day we will have generic shape intersections. for now not. There are libraries that do this kind of calculation somewhere. if you spot one, please tell us. 2017-02-03 9:18 GMT+01:00 Wang Xianzhe [e-mail]:
…
Thank you for your reply. But I implemented circle and hexagon, I need them not overlapping. [image: image] https://cloud.githubusercontent.com/assets/13096696/22584244/3d565ccc-e9e9-11e6-8f47-2be9ea8e5d9d.png Could you suggest me a way to do so? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#595 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/ABI4QMFyja3DuNcI0kxeqBxNjn4KiwMLks5rYuLOgaJpZM4Ani05 .

please have a look for this codepen https://codepen.io/stephanrusu/pen/vmgeNb