search

fskpf / svg2roughjs

Create sketchy, hand-drawn-like images from SVGs
https://fskpf.github.io/
MIT License
158 stars 13 forks source link

Support rectangular clipPaths #24

Closed fskpf closed 4 years ago

fskpf commented 4 years ago

At least simple rect clipPaths should be possible.

Can't we draw into a separate canvas with the clipPaths dimensions and then draw this canvas onto the output canvas?

ygra commented 4 years ago

You can just clip in general, I guess. But the result may not be ideal (e.g. with zigzag fills). Doesn't canvas have a way of clipping to a region?

fskpf commented 4 years ago

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip

This should work. I assume that clipPaths can be defined anywhere in the SVG and referenced by any element as well. So I'd do something similar as for the defs (collect them first and reuse where needed?)

ygra commented 4 years ago

That should work, yeah. I think you can probably generate the clipping region for canvas directly and re-use that. But shapes inside a clip-path may still have an ID that could be referenced in a use, so we must not skip them entirely for normal processing. Although I think we collect the shapes with ID via XPath anyway, so that shouldn't be affected.

I probably won't find time today with family and SpaceX, though ;)

fskpf commented 4 years ago

Added basic support but still needs more work -> #26