@effing/canvas 0.35.1 → 0.35.3
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 +36 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @effing/canvas
|
|
2
2
|
|
|
3
|
-
**Server-side canvas with JSX and Lottie support.**
|
|
3
|
+
**Server-side canvas with JSX, SVG, and Lottie support.**
|
|
4
4
|
|
|
5
5
|
> Part of the [**Effing**](../../README.md) family — programmatic video creation with TypeScript.
|
|
6
6
|
|
|
@@ -110,6 +110,41 @@ const fontSize = findLargestUsableFontSize({
|
|
|
110
110
|
|
|
111
111
|
Supports optional `lineHeight` (`"normal"` or a numeric multiplier), `minFontSize` (default 1), and `maxFontSize` (default 1000).
|
|
112
112
|
|
|
113
|
+
## Inline SVG
|
|
114
|
+
|
|
115
|
+
Use SVG markup directly in JSX — no need to convert icons to data URLs or `backgroundImage`. The `<svg>` element is sized from its `width`/`height` props (or derived from `viewBox` if only one is given), and its children render in SVG coordinate space rather than flex layout.
|
|
116
|
+
|
|
117
|
+
```typescript
|
|
118
|
+
await renderReactElement(
|
|
119
|
+
ctx,
|
|
120
|
+
<div
|
|
121
|
+
style={{ display: "flex", alignItems: "center", gap: 8, color: "#ffffff" }}
|
|
122
|
+
>
|
|
123
|
+
<svg
|
|
124
|
+
width={24}
|
|
125
|
+
height={24}
|
|
126
|
+
viewBox="0 0 24 24"
|
|
127
|
+
fill="none"
|
|
128
|
+
stroke="currentColor"
|
|
129
|
+
strokeWidth={2}
|
|
130
|
+
strokeLinecap="round"
|
|
131
|
+
strokeLinejoin="round"
|
|
132
|
+
>
|
|
133
|
+
<path d="M22 17v-3h-20" />
|
|
134
|
+
<path d="M2 8v9" />
|
|
135
|
+
<circle cx="7" cy="17" r="2" />
|
|
136
|
+
<circle cx="17" cy="17" r="2" />
|
|
137
|
+
</svg>
|
|
138
|
+
<span>Truck</span>
|
|
139
|
+
</div>,
|
|
140
|
+
{ fonts },
|
|
141
|
+
);
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Supported elements: `<path>`, `<circle>`, `<rect>`, `<line>`, `<ellipse>`, `<polygon>`, `<polyline>`, `<g>`, `<defs>`, `<clipPath>`, `<mask>`, `<filter>`, `<linearGradient>`, `<radialGradient>`.
|
|
145
|
+
|
|
146
|
+
Supported presentation props: `fill`, `stroke`, `strokeWidth`, `strokeLinecap`, `strokeLinejoin`, `strokeOpacity`, `fillOpacity`, `opacity`, `transform`, `clipPath`, `mask`, `filter`. `currentColor` resolves to the inherited CSS `color`, so SVG icons recolor with their surrounding text.
|
|
147
|
+
|
|
113
148
|
## Lottie Animations
|
|
114
149
|
|
|
115
150
|
Render individual frames of Lottie animations to a canvas:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@effing/canvas",
|
|
3
|
-
"version": "0.35.
|
|
3
|
+
"version": "0.35.3",
|
|
4
4
|
"description": "Low-level canvas rendering for JSX and Lottie using @napi-rs/canvas (Skia)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"tsx": "^4.0.0",
|
|
34
34
|
"typescript": "^5.9.3",
|
|
35
35
|
"vitest": "^3.2.4",
|
|
36
|
-
"@effing/tween": "0.35.
|
|
36
|
+
"@effing/tween": "0.35.3"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@napi-rs/canvas": ">=0.1.50",
|