apexify.js 4.9.27 → 4.9.28
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 +93 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,22 +85,24 @@ const canvas = await painter.createCanvas({
|
|
|
85
85
|
borderRadius: 20
|
|
86
86
|
});
|
|
87
87
|
|
|
88
|
-
// Add a beautiful heart shape
|
|
88
|
+
// Add a beautiful heart shape (single object)
|
|
89
89
|
const heartImage = await painter.createImage({
|
|
90
90
|
source: 'heart',
|
|
91
91
|
x: 300,
|
|
92
92
|
y: 200,
|
|
93
93
|
width: 200,
|
|
94
94
|
height: 200,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
shape: {
|
|
96
|
+
fill: true,
|
|
97
|
+
gradient: {
|
|
98
|
+
type: 'radial',
|
|
99
|
+
colors: [
|
|
100
|
+
{ color: '#FF6B6B', position: 0 },
|
|
101
|
+
{ color: '#FF1744', position: 1 }
|
|
102
|
+
],
|
|
103
|
+
center: { x: 100, y: 100 },
|
|
104
|
+
radius: 100
|
|
105
|
+
}
|
|
104
106
|
},
|
|
105
107
|
shadow: {
|
|
106
108
|
color: '#000',
|
|
@@ -112,9 +114,9 @@ const heartImage = await painter.createImage({
|
|
|
112
114
|
color: '#FFF',
|
|
113
115
|
width: 5
|
|
114
116
|
}
|
|
115
|
-
});
|
|
117
|
+
}, canvas.buffer);
|
|
116
118
|
|
|
117
|
-
// Add stunning text
|
|
119
|
+
// Add stunning text (single object)
|
|
118
120
|
const textImage = await painter.createText({
|
|
119
121
|
text: 'ApexPainter',
|
|
120
122
|
x: 400,
|
|
@@ -151,6 +153,75 @@ const textImage = await painter.createText({
|
|
|
151
153
|
fs.writeFileSync('beautiful-artwork.png', textImage);
|
|
152
154
|
```
|
|
153
155
|
|
|
156
|
+
### 📝 **Flexible Array Support**
|
|
157
|
+
|
|
158
|
+
Both `createImage()` and `createText()` methods accept **single objects** OR **arrays of objects**:
|
|
159
|
+
|
|
160
|
+
```typescript
|
|
161
|
+
// ✅ Single Object
|
|
162
|
+
await painter.createImage({
|
|
163
|
+
source: 'heart',
|
|
164
|
+
x: 100, y: 100,
|
|
165
|
+
width: 200, height: 200,
|
|
166
|
+
shape: { fill: true, color: '#ff6b6b' }
|
|
167
|
+
}, canvasBuffer);
|
|
168
|
+
|
|
169
|
+
// ✅ Array of Objects
|
|
170
|
+
await painter.createImage([
|
|
171
|
+
{
|
|
172
|
+
source: 'rectangle',
|
|
173
|
+
x: 50, y: 50,
|
|
174
|
+
width: 100, height: 80,
|
|
175
|
+
shape: { fill: true, color: '#ff6b6b' }
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
source: 'circle',
|
|
179
|
+
x: 200, y: 50,
|
|
180
|
+
width: 80, height: 80,
|
|
181
|
+
shape: { fill: true, color: '#4ecdc4' }
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
source: 'star',
|
|
185
|
+
x: 350, y: 50,
|
|
186
|
+
width: 80, height: 80,
|
|
187
|
+
shape: { fill: true, color: '#45b7d1' }
|
|
188
|
+
}
|
|
189
|
+
], canvasBuffer);
|
|
190
|
+
|
|
191
|
+
// ✅ Single Text Object
|
|
192
|
+
await painter.createText({
|
|
193
|
+
text: 'Hello World',
|
|
194
|
+
x: 100, y: 100,
|
|
195
|
+
fontSize: 24,
|
|
196
|
+
color: '#ff6b6b'
|
|
197
|
+
}, canvasBuffer);
|
|
198
|
+
|
|
199
|
+
// ✅ Array of Text Objects
|
|
200
|
+
await painter.createText([
|
|
201
|
+
{
|
|
202
|
+
text: 'Title',
|
|
203
|
+
x: 100, y: 50,
|
|
204
|
+
fontSize: 32,
|
|
205
|
+
bold: true,
|
|
206
|
+
color: '#2c3e50'
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
text: 'Subtitle',
|
|
210
|
+
x: 100, y: 100,
|
|
211
|
+
fontSize: 18,
|
|
212
|
+
color: '#666'
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
text: 'Body text with effects',
|
|
216
|
+
x: 100, y: 150,
|
|
217
|
+
fontSize: 14,
|
|
218
|
+
color: '#333',
|
|
219
|
+
glow: { color: '#ffd700', intensity: 0.5 },
|
|
220
|
+
shadow: { color: '#000', offsetX: 2, offsetY: 2, blur: 4 }
|
|
221
|
+
}
|
|
222
|
+
], canvasBuffer);
|
|
223
|
+
```
|
|
224
|
+
|
|
154
225
|
---
|
|
155
226
|
|
|
156
227
|
## 🎯 Real-World Examples
|
|
@@ -273,11 +344,19 @@ const buttonText = await painter.createText({
|
|
|
273
344
|
| Method | Description | Parameters |
|
|
274
345
|
|--------|-------------|------------|
|
|
275
346
|
| `createCanvas()` | Create a new canvas with background | `CanvasConfig` |
|
|
276
|
-
| `createImage()` | Add shapes/images to canvas | `ImageProperties` |
|
|
277
|
-
| `createText()` | Add text to canvas | `TextProperties` |
|
|
347
|
+
| `createImage()` | Add shapes/images to canvas | `ImageProperties \| ImageProperties[]` |
|
|
348
|
+
| `createText()` | Add text to canvas | `TextProperties \| TextProperties[]` |
|
|
278
349
|
| `createChart()` | Generate charts | `ChartConfig` |
|
|
279
350
|
| `createGIF()` | Create animated GIFs | `GIFConfig` |
|
|
280
351
|
|
|
352
|
+
### 🔄 **Flexible Parameters**
|
|
353
|
+
|
|
354
|
+
Both `createImage()` and `createText()` methods accept:
|
|
355
|
+
- **Single Object**: `ImageProperties` or `TextProperties`
|
|
356
|
+
- **Array of Objects**: `ImageProperties[]` or `TextProperties[]`
|
|
357
|
+
|
|
358
|
+
This allows you to add multiple elements in one call for better performance and cleaner code.
|
|
359
|
+
|
|
281
360
|
### Shape Types
|
|
282
361
|
|
|
283
362
|
- `rectangle` - Standard rectangle
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "apexify.js",
|
|
3
|
-
"version": "4.9.
|
|
3
|
+
"version": "4.9.28",
|
|
4
4
|
"description": "🎨 Advanced Canvas Rendering Library - Professional image processing, shape drawing, text effects, patterns, filters, and charts. Built with TypeScript & Rust for high performance.",
|
|
5
5
|
"author": "zenith-79",
|
|
6
6
|
"license": "MIT",
|