search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
902 stars 315 forks source link

Drawing dots on mobile (touch) #73

Open joekur opened 4 years ago

joekur commented 4 years ago

Related to https://github.com/embiem/react-canvas-draw/issues/42 - I built the latest develop branch and verified that the fix in https://github.com/embiem/react-canvas-draw/commit/4a8c22783087d62bd09253e556b0decc71d1e1ac does fix the issue, but only on my laptop with a mouse. On an iphone both chrome and safari won't allow me to do a quick touch to draw a dot.

I did a bit of digging and noticed that while on the desktop browser, the touch start events would get initial x/y coordinates with long decimals (eg 279.33203125), while on mobile it would always be a whole number (ego 280).

My best guess of why I'm seeing different behavior has something to do with lineTo(x,y) requiring some delta in x/y coordinate for stroke() to have any effect, and maybe something to do with floating point equality 🤷‍♂️ .

I found a hack to get it working for me: https://github.com/embiem/react-canvas-draw/commit/44037969b77fc8c179de436f44c9c21922c72f0d

Maybe there's a better way to do this, let me know what you think :)

embiem commented 4 years ago

Hmm interesting. I'll have to do some testing, especially in regards to using a lazyRadius > 0. In this case you'd not want to draw a dot with just a tap, but rather start drawing once you "pull" the brush a bit outside of the lazyRadius. Right?

Taking that into account, maybe we'll need to add something like a forceTap prop, which would then use your workaround to always draw a dot. What do you think?

joekur commented 4 years ago

I hadn't thought about the lazyRadius - I believe I've been using a small non-zero value in my testing. What's peculiar is that I can draw dots on desktop but not mobile, so this workaround was just to bring them to parity.

forceTap sounds reasonable, but in my experience with eg drawing apps for ipad, I've always expected to be able to draw a dot, even when using one of the pens that has a similar smoothing effect.

embiem commented 4 years ago

Thanks for your thoughts.

I think the forceTap is necessary to introduce this without any breaking changes, as existing usage is maybe relying on not drawing dots on tap.

For a v2, I'd definitely like to re-think this behaviour and maybe default to always draw a dot.