You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

svg.ts 1.4KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import { Utils } from './utils'
  2. // General
  3. export class Svg {
  4. static ellipse = (A: number[], r: number): string => {
  5. return `M ${A[0] - r},${A[1]}
  6. a ${r},${r} 0 1,0 ${r * 2},0
  7. a ${r},${r} 0 1,0 -${r * 2},0 `
  8. }
  9. static moveTo = (v: number[]): string => {
  10. return `M ${v[0]},${v[1]} `
  11. }
  12. static lineTo = (v: number[]): string => {
  13. return `L ${v[0]},${v[1]} `
  14. }
  15. static line = (a: number[], ...pts: number[][]): string => {
  16. return Svg.moveTo(a) + pts.map((p): string => Svg.lineTo(p)).join()
  17. }
  18. static hLineTo = (v: number[]): string => {
  19. return `H ${v[0]},${v[1]} `
  20. }
  21. static vLineTo = (v: number[]): string => {
  22. return `V ${v[0]},${v[1]} `
  23. }
  24. static bezierTo = (A: number[], B: number[], C: number[]): string => {
  25. return `C ${A[0]},${A[1]} ${B[0]},${B[1]} ${C[0]},${C[1]} `
  26. }
  27. static arcTo = (C: number[], r: number, A: number[], B: number[]): string => {
  28. return [
  29. Svg.moveTo(A),
  30. 'A',
  31. r,
  32. r,
  33. 0,
  34. 0,
  35. Utils.getArcLength(C, r, A, B) > 0 ? '1' : '0',
  36. B[0],
  37. B[1],
  38. ].join(' ')
  39. }
  40. static closePath = (): string => {
  41. return 'Z'
  42. }
  43. static rectTo = (A: number[]): string => {
  44. return ['R', A[0], A[1]].join(' ')
  45. }
  46. static getPointAtLength = (path: SVGPathElement, length: number): number[] => {
  47. const point = path.getPointAtLength(length)
  48. return [point.x, point.y]
  49. }
  50. }
  51. export default Svg