search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.14k stars 3.52k forks source link

Gestures do not perform direct manipulation #1207

Open lekevicius opened 10 years ago

lekevicius commented 10 years ago

Currently, gesture support exists, and it allows two-finger scaling and rotation. However, these manipulations are not direct, and they should be. Put simply, direct manipulation means that finger always stays at the same spot on the object (as seen here: http://youtu.be/gWrgcrGFf84?t=22s). If you touch top-left area of a square with the index finger and bottom-right area with the middle finger, they should stay on these areas, and constantly reflect any scaling or rotation performed with fingers.

With the current implementation it's very easy make it so that object moves away from fingers completely, because scaling is performed, by default, from the top left corner, and even rotation for some reason does not reflect finger movement completely.

I might get to implementing some of this myself, but wanted to raise this issue.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

lekevicius commented 10 years ago

Also, adding to the same issue, if there are two objects in the scene and user starts dragging the first one, and then touches the second one with another finger, fabric currently starts tracking this event as two finger gesture on the first object. Correct behaviour would be to interpret that as two single-finger events, on two different objects, and allow dragging them independently.

This seems like a bigger issue, because it might require architectural changes; I don't know enough about how fabric works to say.

kangax commented 10 years ago

This would be a good thing to have, for sure! Any help is welcome.

kangax commented 10 years ago

Btw, we now have a gestures demo — fabricjs.com/touch-events/