chore: readme

Author: farfromrefug

demo-snippets/vue/Simple.vue

@@ -15,6 +15,8 @@ import { Component } from 'vue-property-decorator';
 import { Canvas, Paint, Style, createRect } from '@nativescript-community/ui-canvas';
 import { Color } from '@nativescript/core';
 import { Screen } from '@nativescript/core/platform';
+import { Path } from '@nativescript-community/ui-canvas';
+import { Direction } from '@nativescript-community/ui-canvas';
 
 @Component
 export default class Simple extends Vue {
@@ -48,6 +50,13 @@ export default class Simple extends Vue {
         bgPaint.setStyle(Style.FILL);
         bgPaint.setColor(new Color(255, 0, 0, 0));
         canvas.drawText('test', 0, 20, bgPaint);
+
+
+        const path = new Path();
+        const rect = createRect(10, 10, 40, 60);
+        console.log('rect', rect)
+        path.addRoundRect(rect.left, rect.top, rect.right, rect.bottom, [5, 5, 5, 5, 5,5, 0,0], Direction.CW)
+        canvas.drawPath(path, bgPaint);   
     }
 }
 </script>

packages/ui-canvas/README.md

@@ -43,6 +43,7 @@
 	* [XML](#xml)
 * [NativeScript + Angular](#nativescript--angular)
 * [NativeScript + Vue](#nativescript--vue)
+* [NativeScript + Svelte](#nativescript--svelte)
 * [Draw Method ](#draw-method-)
 	* [Examples:](#examples)
 * [Demos and Development](#demos-and-development)
@@ -119,11 +120,35 @@ Vue.use(CanvasPlugin);
 ```
 
 
+[](#nativescript--svelte)
+
+## NativeScript + Svelte
+
+```ts
+// app/app.ts
+import { registerNativeViewElement } from 'svelte-native/dom';
+registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
+```
+
+```svelte
+<!-- app/components/Foo.svelte -->
+<stackLayout>
+    <canvasView width="300" height="300" on:draw={draw} />
+</stackLayout>
+```
+
+
 [](#draw-method-)
 
 ## Draw Method 
-```typescript
+
+```ts
+import type { Canvas } from '@nativescript-community/ui-canvas';
+import { Paint, createRect } from '@nativescript-community/ui-canvas';
+import { Color } from '@nativescript/core';
+
 function draw(event: { canvas: Canvas }) {
+    const canvas = event.canvas;
     const paint = new Paint();
     paint.setColor(new Color('black'));
     paint.strokeWidth = 10;
@@ -241,4 +266,4 @@ One easy solution is t modify `~/.gitconfig` and add
 
 ## Questions
 
-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).
+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).

packages/ui-svg/README.md

@@ -39,6 +39,8 @@
 
 * [Installation](#installation)
 * [Configuration](#configuration)
+	* [NativeScript + Vue](#nativescript--vue)
+	* [NativeScript + Svelte](#nativescript--svelte)
 	* [Examples:](#examples)
 * [Demos and Development](#demos-and-development)
 	* [Repo Setup](#repo-setup)
@@ -67,6 +69,8 @@ Run the following command from the root of your project:
 
 For now only `vue` (and core) is supported.
 
+### NativeScript + Vue
+
 ```ts
 import CanvasSVG from '@nativescript-community/ui-svg/vue';
 Vue.use(CanvasSVG);
@@ -100,6 +104,19 @@ Or within and Canvas View extending `CanvasView` like `CanvasLabel`
 </CanvasSVG>
 ```
 
+### NativeScript + Svelte
+
+```ts
+// app/app.ts
+import { registerNativeViewElement } from 'svelte-native/dom';
+registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);
+```
+
+```svelte
+<!-- app/components/Foo.svelte -->
+<svgView src="~/assets/foo.svg" aspectFit="stretch" />
+```
+
 ### Examples:
 
 - [Basic](demo-snippets/vue/SVG.vue)
@@ -202,4 +219,4 @@ One easy solution is t modify `~/.gitconfig` and add
 
 ## Questions
 
-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).
+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).