export function svgPathFromPoints(pts: { forEach: (arg0: (p: any) => void) => void }) { let out = ""; pts.forEach(function (p: Number[] | { elements: Number[] }) { let x, y; if ((p as any).elements) { // for vec2 [x, y] = (p as any).elements; } else { [x, y] = p as Number[]; } if (out.length === 0) { out = "M "; } else { out += "L "; } out += "" + x + "," + y + " "; }); return out; }; export function line( ctx: { moveTo: (arg0: any, arg1: any) => void; lineTo: (arg0: any, arg1: any) => any }, p1: { e: (arg0: number) => any }, p2: { e: (arg0: number) => any } ) { ctx.moveTo(p1.e(1), p1.e(2)); return ctx.lineTo(p2.e(1), p2.e(2)); }; // http://stackoverflow.com/a/4959890 export function roundRect( ctx: { beginPath: () => void; moveTo: (arg0: any, arg1: any) => void; lineTo: (arg0: number, arg1: number) => void; arc: (arg0: number, arg1: number, arg2: any, arg3: number, arg4: number, arg5: boolean) => void; closePath: () => any; }, sx: number, sy: number, ex: number, ey: number, r: number ) { const d2r = Math.PI / 180; if (ex - sx - 2 * r < 0) { r = (ex - sx) / 2; } // ensure that the radius isn't too large for x if (ey - sy - 2 * r < 0) { r = (ey - sy) / 2; } // ensure that the radius isn't too large for y ctx.beginPath(); ctx.moveTo(sx + r, sy); ctx.lineTo(ex - r, sy); ctx.arc(ex - r, sy + r, r, d2r * 270, d2r * 360, false); ctx.lineTo(ex, ey - r); ctx.arc(ex - r, ey - r, r, d2r * 0, d2r * 90, false); ctx.lineTo(sx + r, ey); ctx.arc(sx + r, ey - r, r, d2r * 90, d2r * 180, false); ctx.lineTo(sx, sy + r); ctx.arc(sx + r, sy + r, r, d2r * 180, d2r * 270, false); return ctx.closePath(); };