diff --git a/packages/dev/src/state/shapes/draw.tsx b/packages/dev/src/state/shapes/draw.tsx index 5ff3dd7..f4d5e82 100644 --- a/packages/dev/src/state/shapes/draw.tsx +++ b/packages/dev/src/state/shapes/draw.tsx @@ -233,26 +233,44 @@ export class DrawUtil extends TLShapeUtil { const average = (a: number, b: number) => (a + b) / 2 -function getSvgPathFromStroke(points: number[][]): string { +/** + * Turn an array of points into a path of quadradic curves. + * + * @param points The points returned from perfect-freehand + * @param closed Whether the stroke is closed + */ +export function getSvgPathFromStroke( + points: number[][], + closed = true +): string { const len = points.length - if (!len) { - return '' + if (len < 4) { + return `` } - const first = points[0] - let result = `M${first[0].toFixed(3)},${first[1].toFixed(3)}Q` - - for (let i = 0, max = len - 1; i < max; i++) { - const a = points[i] - const b = points[i + 1] - result += `${a[0].toFixed(3)},${a[1].toFixed(3)} ${average( - a[0], - b[0] - ).toFixed(3)},${average(a[1], b[1]).toFixed(3)} ` + let a = points[0] + let b = points[1] + const c = points[2] + + let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed( + 2 + )},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average( + b[1], + c[1] + ).toFixed(2)} T` + + for (let i = 2, max = len - 1; i < max; i++) { + a = points[i] + b = points[i + 1] + result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed( + 2 + )} ` } - result += 'Z' + if (closed) { + result += 'Z' + } return result }