@oscharko-dev/keiko 0.2.0-beta.0 → 0.2.0-beta.2

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.
Files changed (102) hide show
  1. package/README.md +6 -5
  2. package/dist/ui/csp-hashes.json +20 -20
  3. package/dist/ui/static/404.html +1 -1
  4. package/dist/ui/static/_next/static/chunks/{422-70c16ea4b1f77f2e.js → 923-4141696576191bc0.js} +1 -1
  5. package/dist/ui/static/_next/static/chunks/app/_not-found/page-03d642dcd0f15b52.js +1 -0
  6. package/dist/ui/static/_next/static/chunks/app/launch/page-c725ff0c02b50663.js +1 -0
  7. package/dist/ui/static/_next/static/chunks/app/layout-aadefe615729db05.js +1 -0
  8. package/dist/ui/static/_next/static/chunks/app/local-knowledge/capsule/{page-0dc74e194a1f0092.js → page-4a7f242906e19a07.js} +1 -1
  9. package/dist/ui/static/_next/static/chunks/app/local-knowledge/page-3361769b8964e659.js +1 -0
  10. package/dist/ui/static/_next/static/chunks/app/memoriaviva/consolidation/{page-dc6c6bd180bc47a3.js → page-44b3f4fa3e10085f.js} +1 -1
  11. package/dist/ui/static/_next/static/chunks/app/memoriaviva/detail/{page-659e308e68ab2b1e.js → page-0cdfb3eeb659daeb.js} +1 -1
  12. package/dist/ui/static/_next/static/chunks/app/memoriaviva/{page-d6ba78f54207b69f.js → page-e78e0cd2876fec41.js} +1 -1
  13. package/dist/ui/static/_next/static/chunks/app/memoriaviva/review-queue/page-e32fe86466827484.js +1 -0
  14. package/dist/ui/static/_next/static/chunks/app/page-9ad91065d05ddfa0.js +1 -0
  15. package/dist/ui/static/_next/static/chunks/{main-app-5b043f6c611974ae.js → main-app-b52a8fa1d8127a5f.js} +1 -1
  16. package/dist/ui/static/apple-touch-icon.png +0 -0
  17. package/dist/ui/static/favicon.ico +0 -0
  18. package/dist/ui/static/icon-192-maskable.png +0 -0
  19. package/dist/ui/static/icon-192.png +0 -0
  20. package/dist/ui/static/icon-512-maskable.png +0 -0
  21. package/dist/ui/static/icon-512.png +0 -0
  22. package/dist/ui/static/index.html +1 -1
  23. package/dist/ui/static/index.txt +3 -3
  24. package/dist/ui/static/launch.html +1 -1
  25. package/dist/ui/static/launch.txt +3 -3
  26. package/dist/ui/static/local-knowledge/capsule.html +1 -1
  27. package/dist/ui/static/local-knowledge/capsule.txt +2 -2
  28. package/dist/ui/static/local-knowledge.html +1 -1
  29. package/dist/ui/static/local-knowledge.txt +2 -2
  30. package/dist/ui/static/memoriaviva/consolidation.html +1 -1
  31. package/dist/ui/static/memoriaviva/consolidation.txt +2 -2
  32. package/dist/ui/static/memoriaviva/detail.html +1 -1
  33. package/dist/ui/static/memoriaviva/detail.txt +2 -2
  34. package/dist/ui/static/memoriaviva/review-queue.html +1 -1
  35. package/dist/ui/static/memoriaviva/review-queue.txt +2 -2
  36. package/dist/ui/static/memoriaviva.html +1 -1
  37. package/dist/ui/static/memoriaviva.txt +2 -2
  38. package/node_modules/@oscharko-dev/keiko-cli/dist/.tsbuildinfo +1 -1
  39. package/node_modules/@oscharko-dev/keiko-cli/package.json +1 -1
  40. package/node_modules/@oscharko-dev/keiko-contracts/dist/.tsbuildinfo +1 -1
  41. package/node_modules/@oscharko-dev/keiko-contracts/dist/index.d.ts +1 -1
  42. package/node_modules/@oscharko-dev/keiko-contracts/dist/index.js +1 -1
  43. package/node_modules/@oscharko-dev/keiko-contracts/package.json +1 -1
  44. package/node_modules/@oscharko-dev/keiko-evaluations/dist/.tsbuildinfo +1 -1
  45. package/node_modules/@oscharko-dev/keiko-evaluations/package.json +1 -1
  46. package/node_modules/@oscharko-dev/keiko-evidence/dist/.tsbuildinfo +1 -1
  47. package/node_modules/@oscharko-dev/keiko-evidence/package.json +1 -1
  48. package/node_modules/@oscharko-dev/keiko-harness/dist/.tsbuildinfo +1 -1
  49. package/node_modules/@oscharko-dev/keiko-harness/package.json +1 -1
  50. package/node_modules/@oscharko-dev/keiko-local-knowledge/dist/.tsbuildinfo +1 -1
  51. package/node_modules/@oscharko-dev/keiko-local-knowledge/dist/parsers/pdf-parser.d.ts.map +1 -1
  52. package/node_modules/@oscharko-dev/keiko-local-knowledge/dist/parsers/pdf-parser.js +2 -2
  53. package/node_modules/@oscharko-dev/keiko-local-knowledge/package.json +1 -1
  54. package/node_modules/@oscharko-dev/keiko-memory-capture/package.json +1 -1
  55. package/node_modules/@oscharko-dev/keiko-memory-consolidation/package.json +1 -1
  56. package/node_modules/@oscharko-dev/keiko-memory-governance/package.json +1 -1
  57. package/node_modules/@oscharko-dev/keiko-memory-retrieval/package.json +1 -1
  58. package/node_modules/@oscharko-dev/keiko-memory-vault/dist/.tsbuildinfo +1 -1
  59. package/node_modules/@oscharko-dev/keiko-memory-vault/package.json +1 -1
  60. package/node_modules/@oscharko-dev/keiko-model-gateway/dist/.tsbuildinfo +1 -1
  61. package/node_modules/@oscharko-dev/keiko-model-gateway/package.json +1 -1
  62. package/node_modules/@oscharko-dev/keiko-quality-intelligence/dist/.tsbuildinfo +1 -1
  63. package/node_modules/@oscharko-dev/keiko-quality-intelligence/package.json +1 -1
  64. package/node_modules/@oscharko-dev/keiko-sdk/dist/.tsbuildinfo +1 -1
  65. package/node_modules/@oscharko-dev/keiko-sdk/package.json +1 -1
  66. package/node_modules/@oscharko-dev/keiko-security/dist/.tsbuildinfo +1 -1
  67. package/node_modules/@oscharko-dev/keiko-security/package.json +1 -1
  68. package/node_modules/@oscharko-dev/keiko-server/dist/.tsbuildinfo +1 -1
  69. package/node_modules/@oscharko-dev/keiko-server/package.json +1 -1
  70. package/node_modules/@oscharko-dev/keiko-tools/dist/.tsbuildinfo +1 -1
  71. package/node_modules/@oscharko-dev/keiko-tools/package.json +1 -1
  72. package/node_modules/@oscharko-dev/keiko-verification/dist/.tsbuildinfo +1 -1
  73. package/node_modules/@oscharko-dev/keiko-verification/package.json +1 -1
  74. package/node_modules/@oscharko-dev/keiko-workflows/dist/.tsbuildinfo +1 -1
  75. package/node_modules/@oscharko-dev/keiko-workflows/package.json +1 -1
  76. package/node_modules/@oscharko-dev/keiko-workspace/dist/.tsbuildinfo +1 -1
  77. package/node_modules/@oscharko-dev/keiko-workspace/package.json +1 -1
  78. package/package.json +4 -3
  79. package/dist/ui/static/_next/static/chunks/app/_not-found/page-c4d800f366186be0.js +0 -1
  80. package/dist/ui/static/_next/static/chunks/app/launch/page-08afd1a052e7662c.js +0 -1
  81. package/dist/ui/static/_next/static/chunks/app/layout-0f75a39edc90325d.js +0 -1
  82. package/dist/ui/static/_next/static/chunks/app/local-knowledge/page-48bd57c5e542349e.js +0 -1
  83. package/dist/ui/static/_next/static/chunks/app/memoriaviva/review-queue/page-7186cd8b22efc78b.js +0 -1
  84. package/dist/ui/static/_next/static/chunks/app/page-f8386b8e05b3db03.js +0 -1
  85. package/node_modules/@napi-rs/canvas/LICENSE +0 -21
  86. package/node_modules/@napi-rs/canvas/README.md +0 -448
  87. package/node_modules/@napi-rs/canvas/geometry.js +0 -873
  88. package/node_modules/@napi-rs/canvas/index.d.ts +0 -1097
  89. package/node_modules/@napi-rs/canvas/index.js +0 -196
  90. package/node_modules/@napi-rs/canvas/js-binding.js +0 -464
  91. package/node_modules/@napi-rs/canvas/load-image.js +0 -156
  92. package/node_modules/@napi-rs/canvas/node-canvas.d.ts +0 -216
  93. package/node_modules/@napi-rs/canvas/node-canvas.js +0 -379
  94. package/node_modules/@napi-rs/canvas/package.json +0 -179
  95. package/node_modules/@napi-rs/canvas-linux-x64-gnu/README.md +0 -3
  96. package/node_modules/@napi-rs/canvas-linux-x64-gnu/package.json +0 -47
  97. package/node_modules/@napi-rs/canvas-linux-x64-gnu/skia.linux-x64-gnu.node +0 -0
  98. package/node_modules/@napi-rs/canvas-linux-x64-musl/README.md +0 -3
  99. package/node_modules/@napi-rs/canvas-linux-x64-musl/package.json +0 -47
  100. package/node_modules/@napi-rs/canvas-linux-x64-musl/skia.linux-x64-musl.node +0 -0
  101. /package/dist/ui/static/_next/static/{IZjQES_2JaG9qZ7_fkEPl → BNiyfCos3TiM2QdurajIZ}/_buildManifest.js +0 -0
  102. /package/dist/ui/static/_next/static/{IZjQES_2JaG9qZ7_fkEPl → BNiyfCos3TiM2QdurajIZ}/_ssgManifest.js +0 -0
@@ -1,448 +0,0 @@
1
- # `skr canvas`
2
-
3
- [![CI](https://github.com/Brooooooklyn/canvas/actions/workflows/CI.yaml/badge.svg)](https://github.com/Brooooooklyn/canvas/actions/workflows/CI.yaml)
4
- ![Skia Version](https://img.shields.io/badge/Skia-chrome%2Fm148-hotpink)
5
- [![install size](https://packagephobia.com/badge?p=@napi-rs/canvas)](https://packagephobia.com/result?p=@napi-rs/canvas)
6
- [![Downloads](https://img.shields.io/npm/dm/@napi-rs/canvas.svg?sanitize=true)](https://npmcharts.com/compare/@napi-rs/canvas?minimal=true)
7
-
8
- > 🚀 Help me to become a full-time open-source developer by [sponsoring me on Github](https://github.com/sponsors/Brooooooklyn)
9
-
10
- Google Skia binding to Node.js via [Node-API](https://napi.rs), **0 System dependencies!**
11
-
12
- ⚠️ This project is in pre-release stage. And there may be some bugs.<br/>
13
- For details on planned features and future direction please refer to the [Roadmap](https://github.com/Brooooooklyn/canvas/issues/113).
14
-
15
- [中文文档](./README-zh.md)
16
-
17
- # Install
18
-
19
- ```bash
20
- yarn add @napi-rs/canvas
21
- npm install @napi-rs/canvas
22
- ```
23
-
24
- # Support matrix
25
-
26
- ## System requirement
27
-
28
- ### `arm64`
29
-
30
- [**_cortex-a57_**](https://en.wikipedia.org/wiki/ARM_Cortex-A57) or newer CPU architecture on **Linux**.
31
-
32
- All Apple M chips on **macOS**.
33
-
34
- ### `armv7`
35
-
36
- [**_cortex-a7_**](https://en.wikipedia.org/wiki/ARM_Cortex-A7) or newer CPU architecture.
37
-
38
- ### glibc
39
-
40
- Since Skia relies on the [glibc](https://www.gnu.org/software/libc/) 2.18 API, you need to have at least glibc version >= 2.18 on your system.
41
-
42
- ## AWS Lambda usage
43
-
44
- To use this library on Lambda you will need to use a Lambda layer.
45
-
46
- You can simply attach a lambda layer by getting an ARN from [Canvas-Lambda-Layer](https://github.com/ShivamJoker/Canvas-Lambda-Layer)
47
-
48
- > Make sure to exclude `@napi-rs/canvas` while bundling your Lambda.
49
-
50
- # Usage
51
-
52
- ```js
53
- const { promises } = require('node:fs')
54
- const { join } = require('node:path')
55
- const { createCanvas, loadImage } = require('@napi-rs/canvas')
56
-
57
- const canvas = createCanvas(300, 320)
58
- const ctx = canvas.getContext('2d')
59
-
60
- ctx.lineWidth = 10
61
- ctx.strokeStyle = '#03a9f4'
62
- ctx.fillStyle = '#03a9f4'
63
-
64
- // Wall
65
- ctx.strokeRect(75, 140, 150, 110)
66
-
67
- // Door
68
- ctx.fillRect(130, 190, 40, 60)
69
-
70
- // Roof
71
- ctx.beginPath()
72
- ctx.moveTo(50, 140)
73
- ctx.lineTo(150, 60)
74
- ctx.lineTo(250, 140)
75
- ctx.closePath()
76
- ctx.stroke()
77
-
78
- async function main() {
79
- // load images from disk or from a URL
80
- const catImage = await loadImage('path/to/cat.png')
81
- const dogImage = await loadImage('https://example.com/path/to/dog.jpg')
82
-
83
- ctx.drawImage(catImage, 0, 0, catImage.width, catImage.height)
84
-
85
- ctx.drawImage(dogImage, canvas.width / 2, canvas.height / 2, dogImage.width, dogImage.height)
86
-
87
- // export canvas as image
88
- const pngData = await canvas.encode('png') // JPEG, AVIF and WebP are also supported
89
- // encoding in libuv thread pool, non-blocking
90
- await promises.writeFile(join(__dirname, 'simple.png'), pngData)
91
- }
92
-
93
- main()
94
- ```
95
-
96
- ![](./example/simple.png)
97
-
98
- ## Emoji text
99
-
100
- ```js
101
- const { writeFileSync } = require('fs')
102
- const { join } = require('path')
103
-
104
- const { createCanvas, GlobalFonts } = require('@napi-rs/canvas')
105
-
106
- GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'), 'Apple Emoji')
107
- GlobalFonts.registerFromPath(join(__dirname, '..', '__test__', 'fonts', 'COLRv1.ttf'), 'COLRv1')
108
-
109
- console.info(GlobalFonts.families)
110
-
111
- const canvas = createCanvas(760, 360)
112
- const ctx = canvas.getContext('2d')
113
-
114
- ctx.font = '50px Apple Emoji'
115
- ctx.strokeText('😀😃😄😁😆😅😂🤣☺️😊😊😇', 50, 150)
116
-
117
- ctx.font = '100px COLRv1'
118
- ctx.fillText('abc', 50, 300)
119
-
120
- const b = canvas.toBuffer('image/png')
121
-
122
- writeFileSync(join(__dirname, 'draw-emoji.png'), b)
123
- ```
124
-
125
- ![](./example/draw-emoji.png)
126
-
127
- # Performance
128
-
129
- See [benchmark](./benchmark) for benchmark code.
130
-
131
- Hardware info:
132
-
133
- ```
134
- ,MMMM. Host - xxxxxxxxxxxxxxxxxxxxxxx
135
- .MMMMMM Machine - Mac15,9
136
- MMMMM, Kernel - 24.0.0
137
- .;MMMMM:' MMMMMMMMMM;. OS - macOS 15.0.1 Sequoia
138
- MMMMMMMMMMMMNWMMMMMMMMMMM: DE - Aqua
139
- .MMMMMMMMMMMMMMMMMMMMMMMMWM. WM - Quartz Compositor
140
- MMMMMMMMMMMMMMMMMMMMMMMMM. Packages - 194 (Homebrew), 32 (cargo)
141
- ;MMMMMMMMMMMMMMMMMMMMMMMM: Shell - zsh
142
- :MMMMMMMMMMMMMMMMMMMMMMMM: Terminal - warpterminal (Version v0.2024.10.23.14.49.stable_00)
143
- .MMMMMMMMMMMMMMMMMMMMMMMMM. Resolution - 5120x2880@160fps (as 2560x1440)
144
- MMMMMMMMMMMMMMMMMMMMMMMMMMM. 2992x1934@120fps (as 1496x967)
145
- .MMMMMMMMMMMMMMMMMMMMMMMMMM. 2232x1512@60fps (as 1116x756)
146
- MMMMMMMMMMMMMMMMMMMMMMMM Uptime - 1d 2h 32m
147
- ;MMMMMMMMMMMMMMMMMMMM. CPU - Apple M3 Max (16)
148
- .MMMM,. .MMMM,. CPU Load - 16%
149
- Memory - 50.1 GB / 134.2 GB
150
- Battery - 78% & Discharging
151
- Disk Space - 624.0 GB / 994.7 GB
152
- ```
153
-
154
- ```
155
- ❯ yarn bench
156
- Draw a House and export to PNG
157
- ┌─────────┬─────────────────┬───────────────────────┬──────────────────────────┬────────────────────────────┬───────────────────────────┬─────────┐
158
- │ (index) │ Task name │ Latency average (ns) │ Latency median (ns) │ Throughput average (ops/s) │ Throughput median (ops/s) │ Samples │
159
- ├─────────┼─────────────────┼───────────────────────┼──────────────────────────┼────────────────────────────┼───────────────────────────┼─────────┤
160
- │ 0 │ '@napi-rs/skia' │ '14676992.14 ± 0.68%' │ '14602333.00' │ '68 ± 0.59%' │ '68' │ 69 │
161
- │ 1 │ 'skia-canvas' │ '21167809.17 ± 2.05%' │ '20960021.00 ± 13646.00' │ '47 ± 1.31%' │ '48' │ 64 │
162
- │ 2 │ 'node-canvas' │ '16552027.42 ± 0.70%' │ '16451291.50 ± 2208.50' │ '60 ± 0.62%' │ '61' │ 64 │
163
- └─────────┴─────────────────┴───────────────────────┴──────────────────────────┴────────────────────────────┴───────────────────────────┴─────────┘
164
- Draw Gradient and export to PNG
165
- ┌─────────┬─────────────────┬───────────────────────┬─────────────────────────┬────────────────────────────┬───────────────────────────┬─────────┐
166
- │ (index) │ Task name │ Latency average (ns) │ Latency median (ns) │ Throughput average (ops/s) │ Throughput median (ops/s) │ Samples │
167
- ├─────────┼─────────────────┼───────────────────────┼─────────────────────────┼────────────────────────────┼───────────────────────────┼─────────┤
168
- │ 0 │ '@napi-rs/skia' │ '15228495.58 ± 0.53%' │ '15146312.50 ± 1187.50' │ '66 ± 0.48%' │ '66' │ 66 │
169
- │ 1 │ 'skia-canvas' │ '21725564.41 ± 2.20%' │ '21412520.50 ± 2104.50' │ '46 ± 1.39%' │ '47' │ 64 │
170
- │ 2 │ 'node-canvas' │ '17976022.14 ± 1.53%' │ '17563479.50 ± 5104.50' │ '56 ± 1.38%' │ '57' │ 64 │
171
- └─────────┴─────────────────┴───────────────────────┴─────────────────────────┴────────────────────────────┴───────────────────────────┴─────────┘
172
- ```
173
-
174
- # Features
175
-
176
- ## Path2D
177
-
178
- ```typescript
179
- new Path2D()
180
- new Path2D(path: Path2D)
181
- // new Path2D('M108.956,403.826c0,0,0.178,3.344-1.276,3.311 c-1.455-0.033-30.507-84.917-66.752-80.957C40.928,326.18,72.326,313.197,108.956,403.826z')
182
- new Path2D(path: string)
183
- ```
184
-
185
- ```typescript
186
- export interface DOMMatrix2DInit {
187
- a: number
188
- b: number
189
- c: number
190
- d: number
191
- e: number
192
- f: number
193
- }
194
-
195
- export class Path2D {
196
- constructor(path?: Path2D | string)
197
-
198
- addPath(path: Path2D, transform?: DOMMatrix2DInit): void
199
- arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
200
- arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
201
- bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
202
- closePath(): void
203
- ellipse(
204
- x: number,
205
- y: number,
206
- radiusX: number,
207
- radiusY: number,
208
- rotation: number,
209
- startAngle: number,
210
- endAngle: number,
211
- anticlockwise?: boolean,
212
- ): void
213
- lineTo(x: number, y: number): void
214
- moveTo(x: number, y: number): void
215
- quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
216
- rect(x: number, y: number, w: number, h: number): void
217
-
218
- // PathKit methods
219
- op(path: Path2D, operation: PathOp): Path2D
220
- toSVGString(): string
221
- getFillType(): FillType
222
- getFillTypeString(): string
223
- setFillType(type: FillType): void
224
- simplify(): Path2D
225
- asWinding(): Path2D
226
- stroke(stroke?: StrokeOptions): Path2D
227
- transform(transform: DOMMatrix2DInit): Path2D
228
- getBounds(): [left: number, top: number, right: number, bottom: number]
229
- computeTightBounds(): [left: number, top: number, right: number, bottom: number]
230
- trim(start: number, end: number, isComplement?: boolean): Path2D
231
- round(radius: number): Path2D
232
- equals(path: Path2D): boolean
233
- }
234
- ```
235
-
236
- ## PathKit
237
-
238
- `PathKit` is a toolset for manipulating Path in `Skia`, supporting **_quadratic beziers_**, **_cubic beziers_** and **_conics_**.
239
- The main features are.
240
-
241
- ### Path Operation
242
-
243
- `.op(path, PathOp)`
244
-
245
- ```js
246
- const pathOne = new Path2D(
247
- 'M8 50H92C96.4183 50 100 53.5817 100 58V142C100 146.418 96.4183 150 92 150H8C3.58172 150 0 146.418 0 142V58C0 53.5817 3.58172 50 8 50Z',
248
- )
249
- const pathTwo = new Path2D(
250
- '"M58 0H142C146.418 0 150 3.58172 150 8V92C150 96.4183 146.418 100 142 100H58C53.5817 100 50 96.4183 50 92V8C50 3.58172 53.5817 0 58 0Z',
251
- )
252
-
253
- pathOne.op(pathTwo, PathOp.Intersect).toSVGString()
254
- // => "M100 100L58 100C53.5817 100 50 96.4183 50 92L50 50L92 50C96.4183 50 100 53.5817 100 58L100 100Z"
255
- ```
256
-
257
- - **Union**, subtract the op path from the first path
258
- - **Difference**, intersect the two paths
259
- - **ReverseDifference**, union (inclusive-or) the two paths
260
- - **Intersect**, exclusive-or the two paths
261
- - **XOR**, subtract the first path from the op path
262
-
263
- ![boolean-operations](./docs/imgs/boolean-operations.svg)
264
-
265
- ### Covert `FillType` in **_Path_**
266
-
267
- `.asWinding()`
268
-
269
- You can convert `fill-rule="evenodd"` to `fill-rule="nonzero"` in SVG.
270
- This is useful for **OpenType** font-related tools, as `fill-rule="nonzero"` is only supported in **OpenType** fonts.
271
-
272
- ![SVG fill-rule](./docs/imgs/asWinding@2x.png)
273
-
274
- ```js
275
- const pathCircle = new Path2D(
276
- 'M24.2979 13.6364H129.394V40.9091H24.2979L14.6278 27.2727L24.2979 13.6364ZM21.9592 0C19.0246 0 16.2716 1.42436 14.571 3.82251L1.67756 22.0043C-0.559186 25.1585 -0.559186 29.387 1.67756 32.5411L14.571 50.7227C16.2716 53.1209 19.0246 54.5455 21.9592 54.5455H70.4673V68.1818H16.073C11.0661 68.1818 7.00728 72.2518 7.00728 77.2727V113.636C7.00728 118.657 11.0661 122.727 16.073 122.727H70.4673V150H84.0658V122.727H128.041C130.975 122.727 133.729 121.303 135.429 118.905L148.323 100.723C150.559 97.5686 150.559 93.3405 148.323 90.1864L135.429 72.0045C133.729 69.6064 130.975 68.1818 128.041 68.1818H84.0658V54.5455H133.927C138.934 54.5455 142.993 50.4755 142.993 45.4545V9.09091C142.993 4.07014 138.934 0 133.927 0H21.9592ZM125.702 109.091H20.6058V81.8182H125.702L135.372 95.4545L125.702 109.091Z',
277
- )
278
- pathCircle.setFillType(FillType.EvenOdd)
279
- pathCircle.asWinding().toSVGString()
280
- // => "M24.2979 13.6364L129.394 13.6364L129.394 40.9091L24.2979 40.9091L14.6278 27.2727L24.2979 13.6364ZM21.9592 0C19.0246 0 16.2716 1.42436 14.571 3.82251L1.67756 22.0043C-0.559186 25.1585 -0.559186 29.387 1.67756 32.5411L14.571 50.7227C16.2716 53.1209 19.0246 54.5455 21.9592 54.5455L70.4673 54.5455L70.4673 68.1818L16.073 68.1818C11.0661 68.1818 7.00728 72.2518 7.00728 77.2727L7.00728 113.636C7.00728 118.657 11.0661 122.727 16.073 122.727L70.4673 122.727L70.4673 150L84.0658 150L84.0658 122.727L128.041 122.727C130.975 122.727 133.729 121.303 135.429 118.905L148.323 100.723C150.559 97.5686 150.559 93.3405 148.323 90.1864L135.429 72.0045C133.729 69.6064 130.975 68.1818 128.041 68.1818L84.0658 68.1818L84.0658 54.5455L133.927 54.5455C138.934 54.5455 142.993 50.4755 142.993 45.4545L142.993 9.09091C142.993 4.07014 138.934 0 133.927 0L21.9592 0ZM125.702 109.091L20.6058 109.091L20.6058 81.8182L125.702 81.8182L135.372 95.4545L125.702 109.091Z"
281
- ```
282
-
283
- ### Simplify **_Path_**
284
-
285
- `.simplify()`
286
-
287
- Set the path to the same non-overlapping contour as the original path area, which means that it can also remove overlapping paths.
288
-
289
- <img width="800" src="./docs/imgs/simplify.png" >
290
-
291
- [SVG with overlapping paths](./docs/imgs/overlapping-path.svg) (Left)
292
-
293
- ```js
294
- const path =
295
- 'M2.933,89.89 L89.005,3.818 Q90.412,2.411 92.249,1.65 Q94.087,0.889 96.076,0.889 Q98.065,0.889 99.903,1.65 Q101.741,2.411 103.147,3.818 L189.22,89.89 Q190.626,91.296 191.387,93.134 Q192.148,94.972 192.148,96.961 Q192.148,98.95 191.387,100.788 Q190.626,102.625 189.219,104.032 Q187.813,105.439 185.975,106.2 Q184.138,106.961 182.148,106.961 Q180.159,106.961 178.322,106.2 Q176.484,105.439 175.077,104.032 L89.005,17.96 L96.076,10.889 L103.147,17.96 L17.075,104.032 Q15.668,105.439 13.831,106.2 Q11.993,106.961 10.004,106.961 Q8.015,106.961 6.177,106.2 Q4.339,105.439 2.933,104.032 Q1.526,102.625 0.765,100.788 Q0.004,98.95 0.004,96.961 Q0.004,94.972 0.765,93.134 Q1.526,91.296 2.933,89.89 Z'
296
-
297
- path.simplify().toSVGString()
298
- // => "M89.005 3.818L2.933 89.89Q1.526 91.296 0.765 93.134Q0.004 94.972 0.004 96.961Q0.004 98.95 0.765 100.788Q1.526 102.625 2.933 104.032Q4.339 105.439 6.177 106.2Q8.015 106.961 10.004 106.961Q11.993 106.961 13.831 106.2Q15.668 105.439 17.075 104.032L96.076 25.031L175.077 104.032Q176.484 105.439 178.322 106.2Q180.159 106.961 182.148 106.961Q184.138 106.961 185.975 106.2Q187.813 105.439 189.219 104.032Q190.626 102.625 191.387 100.788Q192.148 98.95 192.148 96.961Q192.148 94.972 191.387 93.134Q190.626 91.296 189.22 89.89L103.147 3.818Q101.741 2.411 99.903 1.65Q98.065 0.889 96.076 0.889Q94.087 0.889 92.249 1.65Q90.412 2.411 89.005 3.818Z"
299
- ```
300
-
301
- ## Lottie Animation
302
-
303
- Render [Lottie](https://airbnb.io/lottie/) animations using Skia's [Skottie](https://skia.org/docs/user/modules/skottie/) module.
304
-
305
- ### Load Animation
306
-
307
- ```js
308
- const { LottieAnimation } = require('@napi-rs/canvas')
309
-
310
- // Load from file
311
- const animation = LottieAnimation.loadFromFile('animation.json')
312
-
313
- // Load from JSON string with resource path for external assets
314
- const animation = LottieAnimation.loadFromData(jsonString, {
315
- resourcePath: '/path/to/assets',
316
- })
317
- ```
318
-
319
- ### Animation Properties
320
-
321
- ```js
322
- animation.duration // Total duration in seconds
323
- animation.fps // Frames per second
324
- animation.frames // Total frame count
325
- animation.width // Animation width
326
- animation.height // Animation height
327
- animation.version // Lottie format version
328
- ```
329
-
330
- ### Playback Control
331
-
332
- ```js
333
- animation.seekFrame(30) // Seek to frame 30
334
- animation.seek(1.5) // Seek to 1.5 seconds
335
- ```
336
-
337
- ### Render to Canvas
338
-
339
- ```js
340
- const { createCanvas, LottieAnimation } = require('@napi-rs/canvas')
341
-
342
- const animation = LottieAnimation.loadFromFile('animation.json')
343
- const canvas = createCanvas(animation.width, animation.height)
344
- const ctx = canvas.getContext('2d')
345
-
346
- // Render at original size
347
- animation.render(ctx)
348
-
349
- // Render with custom destination rect
350
- animation.render(ctx, { x: 0, y: 0, width: 800, height: 600 })
351
- ```
352
-
353
- ### Supported Features
354
-
355
- - **Embedded images** - Base64-encoded images (`data:image/png;base64,...`)
356
- - **Embedded fonts** - Vector glyph paths for text rendering without system fonts
357
- - **External assets** - Load images from `resourcePath` directory
358
- - **dotLottie format** - Extract `.lottie` ZIP files at runtime (see example)
359
-
360
- ### Example: Encode Lottie to Video
361
-
362
- See [`example/lottie-to-video.ts`](./example/lottie-to-video.ts) for encoding Lottie animations to MP4 using [`@napi-rs/webcodecs`](https://github.com/Brooooooklyn/webcodecs-node).
363
-
364
- ```js
365
- import { createCanvas, LottieAnimation } from '@napi-rs/canvas'
366
- import {
367
- VideoEncoder,
368
- VideoFrame,
369
- Mp4Muxer,
370
- type EncodedVideoChunk,
371
- type EncodedVideoChunkMetadata,
372
- } from '@napi-rs/webcodecs'
373
-
374
- const animation = LottieAnimation.loadFromFile('animation.json')
375
- const canvas = createCanvas(animation.width, animation.height)
376
- const ctx = canvas.getContext('2d')
377
-
378
- for (let frame = 0; frame < animation.frames; frame++) {
379
- animation.seekFrame(frame)
380
- ctx.fillStyle = '#ffffff'
381
- ctx.fillRect(0, 0, canvas.width, canvas.height)
382
- animation.render(ctx)
383
- // Encode frame to video...
384
- }
385
- ```
386
-
387
- # [Example](./example/tiger.js)
388
-
389
- > The tiger.json was serialized from [gojs/samples/tiger](https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/tiger.html)
390
-
391
- <img width="500" src="example/tiger.png">
392
-
393
- ```shell
394
- node example/anime-girl.js
395
- ```
396
-
397
- | SVG | PNG |
398
- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
399
- | <img width="500" src="example/anime-girl.svg"><br/>[CC-BY-SA 3.0](https://creativecommons.org/licenses/by/3.0) by [Niabot](https://commons.wikimedia.org/wiki/User:Niabot) | <img width="500" src="example/anime-girl.png"><br/>[CC-BY-SA 3.0](https://creativecommons.org/licenses/by/3.0) by [Niabot](https://commons.wikimedia.org/wiki/User:Niabot) |
400
-
401
- # Building
402
-
403
- ## Build skia from source
404
-
405
- You can build this project from source, the system requirements are here: https://skia.org/docs/user/build
406
-
407
- ```sh
408
- # Clone the code:
409
- $ git clone --recurse-submodules https://github.com/Brooooooklyn/canvas.git
410
- $ cd canvas
411
-
412
- # Build Skia:
413
- $ node scripts/build-skia.js
414
-
415
- # Install NPM packages, build the Node.js addon:
416
- $ npm install -g yarn
417
- $ yarn install --mode=skip-build # Here are modules that are used for benchmarking and are hard to install, you can skip it by specifying `--mode=skip-build`
418
- $ sudo dnf install clang # https://fedora.pkgs.org/34/fedora-x86_64/clang-12.0.0-0.3.rc1.fc34.x86_64.rpm.html
419
- $ yarn build
420
-
421
- # All done! Run test cases or examples now:
422
- $ yarn test
423
- $ node example/tiger.js
424
- ```
425
-
426
- ## Pull pre-build skia binary from GitHub
427
-
428
- You can pull skia pre-build binaries if you just care the `Rust` part:
429
-
430
- ```sh
431
- # Clone the code:
432
- $ git clone --recurse-submodules https://github.com/Brooooooklyn/canvas.git
433
- $ cd canvas
434
-
435
- # Download Skia binaries:
436
- # It will pull the binaries match the git hash in `./skia` submodule
437
- $ node scripts/release-skia-binary.mjs --download
438
-
439
- # Install NPM packages, build the Node.js addon:
440
- $ npm install -g yarn
441
- $ yarn install --mode=skip-build
442
- $ sudo dnf install clang # https://fedora.pkgs.org/34/fedora-x86_64/clang-12.0.0-0.3.rc1.fc34.x86_64.rpm.html
443
- $ yarn build
444
-
445
- # All done! Run test cases or examples now:
446
- $ yarn test
447
- $ node example/tiger.js
448
- ```