canvas-sketch
canvas-sketch copied to clipboard
polylinesToSVG accepts only lines?
Hey Matt,
I'm looking to generate pen plotter art files that includes arcs, but I must be missing something in your two --penplot
examples. Both generate arrays of coordinate arrays that are passed to your polylinesToSVG()
helper function. Looking at your penplot.js
in canvas-sketch-util
, it looks like here you just iterate through each coordinate pair and generate the relevant svg
tags. Those are then handed down into a pre-baked svg
template here that only allows <path ... >
elements
I'm going to play around with implementing this myself, but it seems like with the relatively straightforward mapping from canvas
to svg
arcs, maybe #L56 earlier could be made more flexible to include <circle>
svg tags without much hassle?
context.arc(375, 252, 75)
<circle cx="375" cy="252" r="75" style="fill:rgb(235,235,235);"/>
As a super hacky start for my own use case, instead of building up the <path
with M
and L
commands, I instead build a <circle>
for each context.arc()
based on passing an arc
object containing all the args for the circle
const circle = `<circle cx="${arcs[a].x}" cy="${arcs[a].y}" r="${arcs[a].r}" stroke-width="${s}" stroke="${sc}" fill="${f}"/>`;
Things not covered:
- Ellipses
- Elipsis
- Arcs that aren't 360 degrees
Yes, the 'penplot' tool is solely based on polylines at the moment to keep things simple. If you have arcs and curves, you can convert them into discrete polylines like so:
It would be great if there was a way to support all the features of Canvas2D context, but that is a huge undertaking that would take much longer to create than all of canvas-sketch itself! :smile:
What you are doing is also fine, though. In the past I've hacked the function to support different types and attributes like so:
const svg = graphicsToSVG([
{ type: 'path', path: [ [ x, y ], ... ], fill: 'red' },
{ type: 'path', path: [ [ x1, y1 ], ... ], fill: 'blue' },
{ type: 'circle', position: [ x2, y2 ], radius: r, stroke: 'green', lineWidth: 5 }
]);
So far I have kept these as local hacks because the API is a bit too opinionated to be put into canvas-sketch-util, and the features are too specific to my own application. Actually trying to match canvas + SVG (shapes, attributes, filters, text, clipping, etc) is just too huge of a rabbit hole to support in a utility module.