modern-path2d 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -15
- package/dist/index.cjs +353 -222
- package/dist/index.d.cts +67 -26
- package/dist/index.d.mts +67 -26
- package/dist/index.d.ts +67 -26
- package/dist/index.js +2 -2
- package/dist/index.mjs +350 -221
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,13 +22,11 @@
|
|
|
22
22
|
|
|
23
23
|
- Compatible Web Path2D
|
|
24
24
|
|
|
25
|
-
- Path animation
|
|
26
|
-
|
|
27
25
|
- Path transform
|
|
28
26
|
|
|
29
|
-
- Path triangulate
|
|
27
|
+
- Path triangulate (fill、stroke)
|
|
30
28
|
|
|
31
|
-
- Parse
|
|
29
|
+
- Parse SVG to Path2DSet
|
|
32
30
|
|
|
33
31
|
- TypeScript
|
|
34
32
|
|
|
@@ -41,11 +39,11 @@ npm i modern-path2d
|
|
|
41
39
|
## 🦄 Usage
|
|
42
40
|
|
|
43
41
|
```ts
|
|
44
|
-
import {
|
|
42
|
+
import { Path2D, Path2DSet, svgToPath2DSet } from 'modern-path2d'
|
|
45
43
|
|
|
46
44
|
const path = new Path2D()
|
|
47
45
|
|
|
48
|
-
//
|
|
46
|
+
// Window.Path2D methods
|
|
49
47
|
path.arc(75, 75, 50, 0, Math.PI * 2, true)
|
|
50
48
|
path.moveTo(110, 75)
|
|
51
49
|
path.arc(75, 75, 35, 0, Math.PI, false)
|
|
@@ -54,35 +52,49 @@ path.arc(60, 65, 5, 0, Math.PI * 2, true)
|
|
|
54
52
|
path.moveTo(95, 65)
|
|
55
53
|
path.arc(90, 65, 5, 0, Math.PI * 2, true)
|
|
56
54
|
|
|
57
|
-
// add path data
|
|
55
|
+
// add SVG path data
|
|
58
56
|
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')
|
|
59
57
|
|
|
60
|
-
// add path commands
|
|
58
|
+
// add SVG path commands
|
|
61
59
|
path.addCommands([
|
|
62
60
|
{ type: 'M', x: 118, y: 39 },
|
|
63
61
|
{ type: 'L', x: 218, y: 39 }
|
|
64
62
|
])
|
|
65
63
|
|
|
66
|
-
// add
|
|
67
|
-
const
|
|
64
|
+
// add SVG XML
|
|
65
|
+
const pathSet = svgToPath2DSet(`<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
|
|
68
66
|
<path d="M51.3646 45.8642C49.7808 46.2782 47.906 46.705 45.8588 47.0857M45.8588 47.0857C34.1649 49.2607 16.8486 49.9343 16.0277 38.1484C15.22 26.5533 32.264 22.3636 45.6135 24.5626C53.601 25.8783 57.4507 29.6208 57.9285 34.237C58.2811 37.6435 55.778 43.3702 45.8588 47.0857ZM45.8588 47.0857C42.3367 48.4051 37.8795 49.4708 32.283 50.0891" stroke="#FFC300" stroke-width="2.5" stroke-linecap="round"/>
|
|
69
67
|
</svg>`)
|
|
70
|
-
|
|
68
|
+
pathSet.paths.forEach((parsedPath) => {
|
|
71
69
|
path.addPath(parsedPath)
|
|
72
70
|
})
|
|
73
71
|
|
|
74
|
-
|
|
72
|
+
/**
|
|
73
|
+
* Export
|
|
74
|
+
*/
|
|
75
|
+
|
|
76
|
+
// export SVG path data
|
|
75
77
|
console.log(path.toData())
|
|
76
78
|
|
|
77
|
-
// export path commands
|
|
79
|
+
// export SVG path commands
|
|
78
80
|
console.log(path.toCommands())
|
|
79
81
|
|
|
80
|
-
// export to ctx
|
|
82
|
+
// export to canvas ctx
|
|
81
83
|
path.drawTo(document.getElementById('canvas').getContext('2d'))
|
|
82
84
|
|
|
83
85
|
// export to canvas
|
|
84
86
|
document.body.append(new Path2DSet([path]).toCanvas())
|
|
85
87
|
|
|
86
|
-
// export to
|
|
88
|
+
// export to SVG DOM
|
|
87
89
|
document.body.append(new Path2DSet([path]).toSVG())
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Triangulate
|
|
93
|
+
*/
|
|
94
|
+
|
|
95
|
+
// triangulate for fill
|
|
96
|
+
console.log(path.fillTriangulate())
|
|
97
|
+
|
|
98
|
+
// triangulate for stroke
|
|
99
|
+
console.log(path.strokeTriangulate())
|
|
88
100
|
```
|