Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Free draw #25

Closed
vjeux opened this issue Jan 2, 2020 · 14 comments
Closed

Free draw #25

vjeux opened this issue Jan 2, 2020 · 14 comments
Labels
enhancement New feature or request

Comments

@vjeux
Copy link
Contributor

vjeux commented Jan 2, 2020

Not sure if super useful (I've never been able to draw in a reasonable way using a mouse / touchpad) but may be worth adding

@giovannigiordano giovannigiordano added enhancement New feature or request discussion open for discussion; consensus not reached labels Jan 3, 2020
@GrimTheReaper
Copy link

One thing to note: For those who use drawing tablets, any way to actually read pressure from the browser?

@pshihn
Copy link
Collaborator

pshihn commented Jan 15, 2020

@GrimTheReaper
Copy link

GrimTheReaper commented Jan 15, 2020

Neat.

@j-f1
Copy link
Member

j-f1 commented Mar 12, 2020

See #707 for some implementation ideas.

@Zaynex: https://codepen.io/michaelsboost/pen/cnCAL & https://github.com/szimek/signature_pad

@j-f1:

I think there should be two modes here: create a multiline shape, or do the variable-width cubic-bezier thing the signature pad repo does. They both convey a handwritten style but in different ways.

@billba
Copy link

billba commented Apr 2, 2020

Ignoring artistic talent, free draw gets you closest to the physical whiteboard experience: grab a pen, start to draw. For me (and many members of my team who I'm trying to get to use Excalidraw) this is a key must-have feature.

@lipis lipis changed the title [Maybe] Free draw Free draw Apr 3, 2020
@lipis
Copy link
Member

lipis commented Apr 3, 2020

I've never been able to draw in a reasonable way using a mouse / touchpad

But if you have a pen and an iPad is not that hard anymore :)

@lipis lipis removed the discussion open for discussion; consensus not reached label Apr 3, 2020
@billba
Copy link

billba commented Apr 3, 2020

Yes exactly, lots of folks have iPads and we have a few Surfaces on my team as well.

@daneden
Copy link

daneden commented Apr 30, 2020

Just came here to +1 this feature; I got an iPad to use as my second screen and would love to be able to open a shared Excalidraw with folks and doodle on the screen with a pen tool!

@Miq3l
Copy link

Miq3l commented May 9, 2020

+1 Pen with iPad

@dwelle
Copy link
Member

dwelle commented May 9, 2020

We need to figure out how to implement this. In most vector editors, free hand drawing results in a line composed of bezier curves.

image image image

Obviously, we wouldn't display the bezier handlers, nor the points. The above screens just show how it will be implemented.

The more irregular the line, the more points are needed:

image


Another solution would be to draw pixels on canvas directly. Not sure how we'd convert that to SVG on export, though. And modifying that shape (resize, rotate etc.) might be harder, too.

/cc @pshihn @kbariotis

@pshihn
Copy link
Collaborator

pshihn commented May 9, 2020

There's no reason to use roughjs for this.
Bezier curves is the way to go in my opinion and you can render them easily on canvas and svg. See http://perfectionkills.com/exploring-canvas-drawing-techniques/ This page has other techniques as well but the one titled 'bezier curves' will give you good results with least complexity.

The other thing to keep in mind - you will collect A LOT of points based on just mouse position sampling. You can reduce the points significantly by running through Ramer–Douglas–Peucker_algorithm. I have a javascript implementation here which could be adapted: https://github.com/pshihn/bezier-points/blob/master/src/index.ts#L90

@dwelle
Copy link
Member

dwelle commented May 9, 2020

There's no reason to use roughjs for this.

Other than to pipe it through roughjs renderer as if it was a multi-point line, to get a roughjs look?

Otherwise, I agree. I just wanted your opinion on this one :).

@pshihn
Copy link
Collaborator

pshihn commented May 9, 2020

I suppose you could run the points through roughjs' curves command like we do with the multi point lines. But with so many points, it is actually hand-drawn rather than emulating it. Why add extra complexity. :) No harm experimenting to see what looks better

@kbariotis
Copy link
Contributor

Free draw landed on master. Closing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests