A Path2D library, fully compatible with Web Path2D, with additional support for triangulate、animation、deformation etc.
npm install modern-path2d- Compatible Web Path2D
- Path transform
- Path triangulate (fill、stroke)
- Parse SVG to Path2DSet
- TypeScript
``sh`
npm i modern-path2d
`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())
``