66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
// Some helpers for drawing SVGs.
|
|
import { getSweep } from 'utils'
|
|
|
|
// General
|
|
|
|
export default class Svg {
|
|
static ellipse = (A: number[], r: number): string => {
|
|
return `M ${A[0] - r},${A[1]}
|
|
a ${r},${r} 0 1,0 ${r * 2},0
|
|
a ${r},${r} 0 1,0 -${r * 2},0 `
|
|
}
|
|
|
|
static moveTo = (v: number[]): string => {
|
|
return `M ${v[0]},${v[1]} `
|
|
}
|
|
|
|
static lineTo = (v: number[]): string => {
|
|
return `L ${v[0]},${v[1]} `
|
|
}
|
|
|
|
static line = (a: number[], ...pts: number[][]): string => {
|
|
return Svg.moveTo(a) + pts.map((p): string => Svg.lineTo(p)).join()
|
|
}
|
|
|
|
static hLineTo = (v: number[]): string => {
|
|
return `H ${v[0]},${v[1]} `
|
|
}
|
|
|
|
static vLineTo = (v: number[]): string => {
|
|
return `V ${v[0]},${v[1]} `
|
|
}
|
|
|
|
static bezierTo = (A: number[], B: number[], C: number[]): string => {
|
|
return `C ${A[0]},${A[1]} ${B[0]},${B[1]} ${C[0]},${C[1]} `
|
|
}
|
|
|
|
static arcTo = (C: number[], r: number, A: number[], B: number[]): string => {
|
|
return [
|
|
Svg.moveTo(A),
|
|
'A',
|
|
r,
|
|
r,
|
|
0,
|
|
getSweep(C, A, B) > 0 ? '1' : '0',
|
|
0,
|
|
B[0],
|
|
B[1],
|
|
].join(' ')
|
|
}
|
|
|
|
static closePath = (): string => {
|
|
return 'Z'
|
|
}
|
|
|
|
static rectTo = (A: number[]): string => {
|
|
return ['R', A[0], A[1]].join(' ')
|
|
}
|
|
|
|
static getPointAtLength = (
|
|
path: SVGPathElement,
|
|
length: number
|
|
): number[] => {
|
|
const point = path.getPointAtLength(length)
|
|
return [point.x, point.y]
|
|
}
|
|
}
|