Skip to content

Commit acc1ebf

Browse files
authored
Update blueprint.md - Add svelte usage for ui-canvas
Includes some things helpful to devs: 1. code comments indicating which file the code belongs in 2. code example includes the imports needed for the example `draw()` method and adds the `canvas` object which is undefined in the current example. 3. shows a layout wrapping the canvas view since it is required.
1 parent a35f908 commit acc1ebf

File tree

1 file changed

+22
-2
lines changed

1 file changed

+22
-2
lines changed

packages/ui-canvas/blueprint.md

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,29 @@ Vue.use(CanvasPlugin);
5454
<CanvasView width="100" height="100" @draw="draw"/>
5555
```
5656
57+
## NativeScript + Svelte
58+
59+
```ts
60+
// app/app.ts
61+
registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
62+
```
63+
64+
```svelte
65+
// app/components/Foo.svelte
66+
<stackLayout>
67+
<canvasView width="300" height="300" on:draw={draw} />
68+
</stackLayout>
69+
```
70+
5771
## Draw Method
58-
```typescript
72+
73+
```ts
74+
import type { Canvas } from '@nativescript-community/ui-canvas';
75+
import { Paint, createRect } from '@nativescript-community/ui-canvas';
76+
import { Color } from '@nativescript/core';
77+
5978
function draw(event: { canvas: Canvas }) {
79+
const canvas = event.canvas;
6080
const paint = new Paint();
6181
paint.setColor(new Color('black'));
6282
paint.strokeWidth = 10;
@@ -78,4 +98,4 @@ function draw(event: { canvas: Canvas }) {
7898
- An example of animating a shape
7999
80100
{{ load:../../tools/readme/demos-and-development.md }}
81-
{{ load:../../tools/readme/questions.md }}
101+
{{ load:../../tools/readme/questions.md }}

0 commit comments

Comments
 (0)