canvas-sketch-util

canvas-sketch-util copied to clipboard

This is a simple and backwards-compatible way to support groups for rendering & exporting in penplot.js. The inputs argument to renderPaths and pathsToSVG can now be optionally specified as an array of arrays, i.e. multiple groups of paths, which will then be written into SVG exports within separate <g> tags.

Options within opt can now also be specified as arrays, which will then be applied to groups at the corresponding indices, to allow styling each group differently. This works great for both rendering to the HTML canvas, and exporting SVG files. I didn't add any validation of array lengths, but this would be trivial to implement if desired.

The intention here is to use AxiDraw's "Layers" tool for drawing one group/layer at a time, so I've also set up layer naming via Inkscape's specification, so the AxiDraw extension should work as expected with these files.

Example usage:

const group1 = [
    path1,
    path2,
];

const group2 = [
    path3,
    path4,
];

return renderPaths([group1, group2], {
    lineWidth: 0.1,
    strokeStyle: ['black', 'orange'],
    ...props
});

Thanks! Very interesting. Only thing I wonder about is the assumption on Inkscape; maybe that could be default omitted, and behind a flag like { inkscape: true } that is passed into the function? It is fairly non-standard.

Thanks for checking it out @mattdesl! Great call, I just added a diff making the Inkscape stuff optional 🙌

Heya @mattdesl! Let me know if you get a chance to look at this again – minimal changes since your last review, but incorporating your feedback I hope :) Cheers!

I've been trying to see how to create multiple layers in the SVG output so as to plot in different colours on the AxiDraw. This pull request seems to confirm this is not currently possible unless you can advise a method.