|
43 | 43 | * [XML](#xml)
|
44 | 44 | * [NativeScript + Angular](#nativescript--angular)
|
45 | 45 | * [NativeScript + Vue](#nativescript--vue)
|
| 46 | +* [NativeScript + Svelte](#nativescript--svelte) |
46 | 47 | * [Draw Method ](#draw-method-)
|
47 | 48 | * [Examples:](#examples)
|
48 | 49 | * [Demos and Development](#demos-and-development)
|
@@ -119,11 +120,35 @@ Vue.use(CanvasPlugin);
|
119 | 120 | ```
|
120 | 121 |
|
121 | 122 |
|
| 123 | +[](#nativescript--svelte) |
| 124 | +
|
| 125 | +## NativeScript + Svelte |
| 126 | +
|
| 127 | +```ts |
| 128 | +// app/app.ts |
| 129 | +import { registerNativeViewElement } from 'svelte-native/dom'; |
| 130 | +registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView); |
| 131 | +``` |
| 132 | +
|
| 133 | +```svelte |
| 134 | +<!-- app/components/Foo.svelte --> |
| 135 | +<stackLayout> |
| 136 | + <canvasView width="300" height="300" on:draw={draw} /> |
| 137 | +</stackLayout> |
| 138 | +``` |
| 139 | +
|
| 140 | +
|
122 | 141 | [](#draw-method-)
|
123 | 142 |
|
124 | 143 | ## Draw Method
|
125 |
| -```typescript |
| 144 | +
|
| 145 | +```ts |
| 146 | +import type { Canvas } from '@nativescript-community/ui-canvas'; |
| 147 | +import { Paint, createRect } from '@nativescript-community/ui-canvas'; |
| 148 | +import { Color } from '@nativescript/core'; |
| 149 | +
|
126 | 150 | function draw(event: { canvas: Canvas }) {
|
| 151 | + const canvas = event.canvas; |
127 | 152 | const paint = new Paint();
|
128 | 153 | paint.setColor(new Color('black'));
|
129 | 154 | paint.strokeWidth = 10;
|
@@ -241,4 +266,4 @@ One easy solution is t modify `~/.gitconfig` and add
|
241 | 266 |
|
242 | 267 | ## Questions
|
243 | 268 |
|
244 |
| -If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). |
| 269 | +If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord). |
0 commit comments