Add support for advanced `Touch` properties

jakubfiala / atrament

A small JS library for beautiful drawing and handwriting on the HTML Canvas.

http://fiala.space/atrament/demo

MIT License

1.56k stars 115 forks source link

Add support for advanced `Touch` properties #92

Closed jakubfiala closed 8 months ago

jakubfiala commented 10 months ago

These include:

force - should slightly affect stroke weight
radiusX|Y and rotationAngle - should set stroke weight. I need to find a way to calculate the weight based on the ellipse shape and rotation, possibly adjusting it using the apparent stroke direction (vector based on previous stroke points)

MAYBE:

WebKit's own force events https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html

jakubfiala commented 8 months ago

I've decided to only use the standard PointerEvent's pressure property for now. It's not completely clear to me that using the radius/rotation angle properties would lead to a particularly intuitive drawing experience. Software such as Procreate don't automatically map these properties to anything, althought they do allow such a mapping. It would be possible for developers using Atrament to create their own mappings by simply adding their own listeners to pointermove and adjusting Atrament's settings dynamically.