feat: add fillTriangulate、strokeTriangulate、getAdaptivePoints m…

…ethod to `Curve`

docs/main.ts

@@ -1,6 +1,6 @@
-import { parseSVG, Path2D, pathsToCanvas, pathsToSVG } from '../src'
+import { drawPoint, parseSVG, Path2D, Path2DSet } from '../src'
 
-function createCtx(): CanvasRenderingContext2D {
+function genCtx(): CanvasRenderingContext2D {
   const canvas = document.createElement('canvas')
   canvas.width = 200
   canvas.height = 200
@@ -43,24 +43,24 @@ function testWebPath2D(): void {
   })
   path1.style.stroke = 'currentColor'
   path1.style.fill = 'none'
-  path1.drawTo(createCtx())
-  createCtx().stroke(path2)
+  path1.drawTo(genCtx())
+  genCtx().stroke(path2)
 }
 
 async function testSVGFixtures(): Promise<void> {
   for (const [key, value] of Object.entries(import.meta.glob('../test/fixtures/*.svg', { query: '?raw' }))) {
     const svgSource = await (value as () => Promise<any>)().then(rep => rep.default)
-    const svgPaths = parseSVG(svgSource)
+    const pathSet = parseSVG(svgSource)
 
-    const canvas = pathsToCanvas(svgPaths)
+    const canvas = pathSet.toCanvas()
     canvas.dataset.file = key
     document.body.append(canvas)
 
-    const svg = pathsToSVG(svgPaths)
+    const svg = pathSet.toSVG()
     svg.dataset.file = key
     document.body.append(svg)
 
-    console.warn(svgPaths)
+    console.warn(pathSet)
   }
 }
 
@@ -73,16 +73,31 @@ async function testJSONFixtures(): Promise<void> {
       .scale(2)
       .skew(-0.24)
       .rotate(90)
-    const canvas = path.toCanvas()
+    const canvas = new Path2DSet([path]).toCanvas()
     canvas.dataset.file = key
     document.body.append(canvas)
   }
 }
 
+function testPoints(): void {
+  const ctx = genCtx()
+  const path = new Path2D()
+  path.quadraticCurveTo(25, 25, 25, 62.5)
+  const points = path.getPoints()
+  for (let i = 0; i < points.length; i += 2) {
+    const x = points[i]
+    const y = points[i + 1]
+    drawPoint(ctx, x, y)
+  }
+  ctx.fillStyle = 'red'
+  ctx.fill()
+}
+
 async function main(): Promise<void> {
   testWebPath2D()
   await testJSONFixtures()
   await testSVGFixtures()
+  testPoints()
 }
 
 main()

eslint.config.js

@@ -1,6 +1,11 @@
 // @ts-check
 import antfu from '@antfu/eslint-config'
 
-export default antfu({
-  type: 'lib',
-})
+export default antfu(
+  { type: 'lib' },
+  {
+    rules: {
+      'antfu/consistent-list-newline': ['off'],
+    },
+  },
+)

package.json

@@ -47,16 +47,20 @@
   "scripts": {
     "build": "vite build && unbuild",
     "dev": "vite docs",
-    "lint": "eslint ./src",
+    "lint": "eslint src",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "release": "bumpp package.json --commit \"release: v%s\" --push --all --tag",
     "start": "esno src/index.ts",
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "prepare": "simple-git-hooks"
   },
+  "dependencies": {
+    "earcut": "^3.0.1"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.0",
+    "@types/earcut": "^2.1.4",
     "@types/node": "^22.10.2",
     "bumpp": "^9.9.2",
     "conventional-changelog-cli": "^5.0.0",
@@ -72,6 +76,6 @@
     "pre-commit": "pnpm lint-staged"
   },
   "lint-staged": {
-    "*": "eslint ./src --fix"
+    "*": "eslint src --fix"
   }
 }

src/canvas/drawPoint.ts

@@ -0,0 +1,13 @@
+export interface DrawPointOptions {
+  radius?: number
+}
+
+export function drawPoint(
+  ctx: CanvasRenderingContext2D,
+  x: number, y: number,
+  options: DrawPointOptions = {},
+): void {
+  const { radius = 1 } = options
+  ctx.moveTo(x, y)
+  ctx.arc(x, y, radius, 0, Math.PI * 2)
+}

src/canvas/index.ts

@@ -1 +1,2 @@
+export * from './drawPoint'
 export * from './setCanvasContext'

src/canvas/setCanvasContext.ts

@@ -1,4 +1,4 @@
-import type { PathStyle, StrokeLinejoin } from '../types'
+import type { Path2DStyle, StrokeLinejoin } from '../core'
 
 const lineJoinMap: Record<StrokeLinejoin, CanvasLineJoin> = {
   'arcs': 'bevel',
@@ -10,7 +10,7 @@ const lineJoinMap: Record<StrokeLinejoin, CanvasLineJoin> = {
 
 export function setCanvasContext(
   ctx: CanvasRenderingContext2D,
-  style: Partial<PathStyle>,
+  style: Partial<Path2DStyle>,
 ): void {
   const {
     fill = '#000',