tbolis / react-sketch

Sketch Tool for React-based applications, backed up by FabricJS
http://tbolis.github.io/showcase/react-sketch/
MIT License
683 stars 230 forks source link

Pressure sensitivity #136

Open blurymind opened 3 years ago

blurymind commented 3 years ago

Web api's allow to get pressure sensitivity data from the PointerEvent (event.pressure). That can be used to drive line thickness, which makes a huge difference when you use a samsung galaxy note device for example. My findings were that one must enable pointer events first

See Fabricjs got this a while back in 3.0.0 Canvas.enablePointerEvents

someone also wrote a brush that uses it,since the ordinary one doesnt have varied thickness it seems https://github.com/fabricjs/fabric.js/issues/4885 https://research.archinc.jp/fabricjs-psbrush/

fabric also has a pencilbrush, although not sure if it has point thickness/opacity which pressure can use http://fabricjs.com/docs/fabric.PencilBrush.html

outside of fabricjs there are a few examples of this such as https://github.com/amoshydra/draw