Skip to content

Commit 4ba85f8

Browse files
author
farfromrefug
committed
chore: readme
1 parent d2fb7c9 commit 4ba85f8

File tree

3 files changed

+54
-3
lines changed

3 files changed

+54
-3
lines changed

demo-snippets/vue/Simple.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { Component } from 'vue-property-decorator';
1515
import { Canvas, Paint, Style, createRect } from '@nativescript-community/ui-canvas';
1616
import { Color } from '@nativescript/core';
1717
import { Screen } from '@nativescript/core/platform';
18+
import { Path } from '@nativescript-community/ui-canvas';
19+
import { Direction } from '@nativescript-community/ui-canvas';
1820
1921
@Component
2022
export default class Simple extends Vue {
@@ -48,6 +50,13 @@ export default class Simple extends Vue {
4850
bgPaint.setStyle(Style.FILL);
4951
bgPaint.setColor(new Color(255, 0, 0, 0));
5052
canvas.drawText('test', 0, 20, bgPaint);
53+
54+
55+
const path = new Path();
56+
const rect = createRect(10, 10, 40, 60);
57+
console.log('rect', rect)
58+
path.addRoundRect(rect.left, rect.top, rect.right, rect.bottom, [5, 5, 5, 5, 5,5, 0,0], Direction.CW)
59+
canvas.drawPath(path, bgPaint);
5160
}
5261
}
5362
</script>

packages/ui-canvas/README.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
* [XML](#xml)
4444
* [NativeScript + Angular](#nativescript--angular)
4545
* [NativeScript + Vue](#nativescript--vue)
46+
* [NativeScript + Svelte](#nativescript--svelte)
4647
* [Draw Method ](#draw-method-)
4748
* [Examples:](#examples)
4849
* [Demos and Development](#demos-and-development)
@@ -119,11 +120,35 @@ Vue.use(CanvasPlugin);
119120
```
120121
121122
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+
122141
[](#draw-method-)
123142
124143
## 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+
126150
function draw(event: { canvas: Canvas }) {
151+
const canvas = event.canvas;
127152
const paint = new Paint();
128153
paint.setColor(new Color('black'));
129154
paint.strokeWidth = 10;
@@ -241,4 +266,4 @@ One easy solution is t modify `~/.gitconfig` and add
241266
242267
## Questions
243268
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).

packages/ui-svg/README.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939

4040
* [Installation](#installation)
4141
* [Configuration](#configuration)
42+
* [NativeScript + Vue](#nativescript--vue)
43+
* [NativeScript + Svelte](#nativescript--svelte)
4244
* [Examples:](#examples)
4345
* [Demos and Development](#demos-and-development)
4446
* [Repo Setup](#repo-setup)
@@ -67,6 +69,8 @@ Run the following command from the root of your project:
6769

6870
For now only `vue` (and core) is supported.
6971

72+
### NativeScript + Vue
73+
7074
```ts
7175
import CanvasSVG from '@nativescript-community/ui-svg/vue';
7276
Vue.use(CanvasSVG);
@@ -100,6 +104,19 @@ Or within and Canvas View extending `CanvasView` like `CanvasLabel`
100104
</CanvasSVG>
101105
```
102106

107+
### NativeScript + Svelte
108+
109+
```ts
110+
// app/app.ts
111+
import { registerNativeViewElement } from 'svelte-native/dom';
112+
registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);
113+
```
114+
115+
```svelte
116+
<!-- app/components/Foo.svelte -->
117+
<svgView src="~/assets/foo.svg" aspectFit="stretch" />
118+
```
119+
103120
### Examples:
104121

105122
- [Basic](demo-snippets/vue/SVG.vue)
@@ -202,4 +219,4 @@ One easy solution is t modify `~/.gitconfig` and add
202219

203220
## Questions
204221

205-
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).
222+
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

Comments
 (0)