modern-path2d

Features

- Compatible Web Path2D

- Path transform

- Path triangulate (fill、stroke)

- Parse SVG to Path2DSet

- TypeScript

📦 Install

``sh
npm i modern-path2d
`

🦄 Usage

`ts
import { Path2D, Path2DSet, svgToPath2DSet } from 'modern-path2d'

const path = new Path2D()

// Window.Path2D methods
path.arc(75, 75, 50, 0, Math.PI * 2, true)
path.moveTo(110, 75)
path.arc(75, 75, 35, 0, Math.PI, false)
path.moveTo(65, 65)
path.arc(60, 65, 5, 0, Math.PI * 2, true)
path.moveTo(95, 65)
path.arc(90, 65, 5, 0, Math.PI * 2, true)

// add SVG path data
path.addData('M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90')

// add SVG path commands
path.addCommands([
{ type: 'M', x: 118, y: 39 },
{ type: 'L', x: 218, y: 39 }
])

// add SVG XML
const pathSet = svgToPath2DSet(

)
pathSet.paths.forEach((parsedPath) => {
path.addPath(parsedPath)
})

/**
* Export
*/

// export SVG path data
console.log(path.toData())

// export SVG path commands
console.log(path.toCommands())

// export to canvas ctx
path.drawTo(document.getElementById('canvas').getContext('2d'))

// export to canvas
document.body.append(new Path2DSet([path]).toCanvas())

// export to SVG DOM
document.body.append(new Path2DSet([path]).toSvg())

/**
* Triangulate
*/

// triangulate for fill
console.log(path.fillTriangulate())

// triangulate for stroke
console.log(path.strokeTriangulate())
``