Open TheMapSmith opened 5 years ago
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:
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.
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 yourpolylinesToSVG()
helper function. Looking at yourpenplot.js
incanvas-sketch-util
, it looks like here you just iterate through each coordinate pair and generate the relevantsvg
tags. Those are then handed down into a pre-bakedsvg
template here that only allows<path ... >
elementsI'm going to play around with implementing this myself, but it seems like with the relatively straightforward mapping from
canvas
tosvg
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);"/>