Closed robertcorponoi closed 1 year ago
Thanks for your questions. This is a big one to unpack. Hopefully this can get our conversation pointed in the right direction:
Drawing Slow vs Fast
You have the right idea. When you draw slowly, there are more vertices (or Two.Anchor
s) added to the line. The closer together these points are, the less "curvy" or "flow" the line will be. There are a couple of ways to address.
dragX
dragY
. Then only append Two.Anchor
s when the distance crosses a threshold, like 25px.Two.Anchor
s are added.Example 1. snippet would look like this:
const onDrag = (dragX: number, dragY: number) => {
x = dragX;
y = dragY;
if (!line) {
const v1 = new Two.Anchor(mouse.x, mouse.y);
const v2 = new Two.Anchor(x, y);
line = makeCurve([v1, v2]);
line.noFill().stroke = "#333";
line.linewidth = 10;
line.cap = "round";
backgroundGroup.add(line);
line.vertices.forEach((vertex: Vector) =>
vertex.addSelf(line!.translation),
);
line.translation.clear();
} else {
const v1 = new Two.Anchor(x, y);
if (line.vertices[line.vertices.length - 1].distanceBetween(v1) > 25) {
line.vertices.push(v1);
}
}
mouse.set(x, y);
};
Corners
This occurs because, again when drawing slowly vs fast, there are more points close to each other. The closer the points are to each other, the more information the browser has to infer the miter
of the line. More information about how that works in this blog post: https://www.kirupa.com/canvas/modifying_how_corners_look.htm
Changing your code from above should make it more consistent, but also adjusting the line.miter
and line.join
property can give you different effects. Much of the projects I make in Two.js I set line.join = 'round';
which softens corners like that.
Hope this helps!
Ah yeah that makes a lot of sense, thank you for the explanation!
Your second point Photoshop and Illustrator is really interesting, I'm going to start with the modifications in code snippet you provided but I like the idea of the temporary line with the smoothing applied at the end so I'll pursue that longer term.
As for the corners, I'm not sure how I missed line.join
but setting it to round solves most of my problems.
Thanks again for the guidance and the code snippet and whenever I get the Photoshop/Illustrator line smoothing effect I'll submit it as a community example.
Describe your question
I'm making a simple canvas that the user can draw on. This works well for the most part but I notice that when I draw slowly, the line isn't smooth (which I assume is because many smaller lines are being created). Is there a way to make the line smoother, like it is when drawing faster?
Also, I notice that when creating a corner, it sometimes does not make a nice corner but instead it either breaks the line and starts another or it creates a very sharp corner. I'm not sure if this would be solved by the same solution above or not.
These are definitely not bugs but I would appreciate any insight into how I might prevent/improve these issues with my use case.
Your code (either pasted here, or a link to a hosted example)
This is how the lines are drawn in my function that runs when the user clicks down and drags their mouse on the canvas.
Screenshots
Drawing slowly vs. fast
Corners
Environment (please select one):
If applicable:
Desktop (please complete the following information):