An online tool for converting SVG files into polygons that can be rendered on a Bangle.js.
Supported:
- All basic shapes (rect, circle, polyline, path, etc)
- Fill colors
- Stroke colors
<use>
elements
Not supported:
- Paths with holes
- Stroke widths other than 1 pixel
- Viewport clipping
- Anything even remotely fancy
Use the online tool here.
The following function can be used on the smartwatch to render the output of the converter:
// Draw an image composed of coloured polygons
//
// polys - A list of objects representing polygons, of the form
// [
// {
// optional fill : "#012345",
// optional stroke : "#012345",
// points : [x0,y0,x1,y1,x2,y2,...],
// },
// ...
// ]
// x - The X offset to draw the image
// y - The Y offset to draw the image
// options - an object of the form
// {
// rotate : 0, // amount to rotate image in radians
// scale : 1, // factor by which scale image
// graphics : Graphics // the graphics object to use
// }
function drawPolyImage(polys, x, y, options) {
const o = options || {};
const g = o.graphics || global.g;
const a = o.rotate || 0;
const s = o.scale != null ? o.scale : 1;
const ca = Math.cos(a), sa = Math.sin(a);
for (let p of polys) {
const pts = [];
for (var i = 0; i < p.points.length; i += 2) {
pts.push(p.points[i]*ca*s - p.points[i+1]*sa*s + x);
pts.push(p.points[i+1]*ca*s + p.points[i]*sa*s + y);
}
if (p.fill) g.setColor(p.fill).fillPoly(pts);
if (p.stroke) g.setColor(p.stroke).drawPoly(pts);
}
}