rough-stuff / rough

Create graphics with a hand-drawn, sketchy, appearance
http://roughjs.com
MIT License
19.83k stars 613 forks source link

Path segments are not joined #132

Open ygra opened 4 years ago

ygra commented 4 years ago

This can looks really bad with larger stroke widths. One workaround might be to use square or round line caps, but then every line segment gets longer, which might not be what was intended originally.

image image

This also sometimes leads to rendering errors around the missing joint:

image image image

As if there's a self-intersecting path that's filled with even-odd.

pshihn commented 4 years ago

Are you adapting existing SVG paths with rough or drawing fresh shapes? It's not very well optimized for converting arbitrary SVG paths right now. There's a lot of randomness in the algorithm so when complex paths are interpreted they can get skewed.

ygra commented 4 years ago

I'm trying to draw existing SVG paths (and for the current drawing mode, I also have to convert simple shapes to paths in nearly all cases). So there's no real way of knowing at drawing time which line-cap mode is appropriate. I already use square for drawing rectangles, though, so the blue + icon above isn't as bad anymore right now.

pshihn commented 4 years ago

I suspect it's the way the particular SVG path is defined. If it's broken into chunks then rough will treat each chunk as own shape. The traditional line joins are not the same because it's a different shape not a continuous ones.

Also, if you are using SVG, you can set appropriate attributes yourself on the SVG node

aroc commented 3 years ago

Are there any ways to solve for this when drawing a fresh shape on the canvas? Here is an example of a simple shape defined on a canvas with a large stroke that results in the not fully connected corners. Thanks!!

https://codepen.io/aroc/pen/mdRvRqZ