From 657da57860faebe3fcda80b653ed9b5e9e860e07 Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Wed, 17 May 2023 19:35:41 +0200 Subject: [PATCH 1/3] docs(canvas): improving content --- packages/canvas/README.md | 91 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 87 insertions(+), 4 deletions(-) diff --git a/packages/canvas/README.md b/packages/canvas/README.md index a8e96d7c..fdf8ff5e 100644 --- a/packages/canvas/README.md +++ b/packages/canvas/README.md @@ -1,27 +1,66 @@ # NativeScript Canvas -**Powered by** +## Introduction + +This plugin provides a canvas view for NativeScript applications. It is powered by the following libraries: - [CanvasNative](src-native/canvas-native) - Rust - [CanvasNative](src-native/canvas-ios) - IOS - [CanvasNative](src-native/canvas-android) - Android +>**Minimum version supported:**
- `iOS`: `11`
- `Android`: `API 17` + + ## Installation +To install the plugin, run the following command from the root of your project: + ```bash ns plugin add @nativescript/canvas ``` -_Note_ min ios support 11 | min android support 17 +You also need to install the following 2 plugins: + +- `ns plugin add @nativescript/canvas-polyfill` + +- `ns plugin add @nativescript/canvas-media` + +## How to use @nativescript/canvas + +The following sections describe how to use the plugin in different frameworks. + +### Using @nativescript/canvas in NativeScript Core + +1. Register the plugin + +2. Add the Canvas view to your page + +### Using @nativescript/canvas in NativeScript Angular + +1. Register the plugin + +2. Add the Canvas view to your page +### Using @nativescript/canvas in NativeScript Vue + +1. Register the plugin + +2. Add the Canvas view to your page + +### Using @nativescript/canvas in NativeScript Svelte + +1. Register the plugin + +2. Add the Canvas view to your page + IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N} -## Usage +# Usage ```xml ``` - +## Vanilla ### 2D ```typescript @@ -54,9 +93,53 @@ export function canvasReady(args) { gl.clear(gl.COLOR_BUFFER_BIT); } ``` +## Vue +In `app.ts`, add: + +``` +Vue.registerElement("Canvas", ()=>require("@nativescript/canvas").Canvas) +``` +Then in a `.vue` file: + +```xml + +``` +```ts +let ctx; +let canvas; +export default Vue.extend({ + methods: { + + canvasReady(args: EventData) { + console.log('canvas ready'); + canvas = args.object as Canvas; + console.log(canvas); + ctx = (canvas.getContext('2d')) as CanvasRenderingContext2D; + + ctx.fillStyle = 'green'; + ctx.fillRect(10, 10, 150, 100); + } + } +``` ## API +### Canvas class +|Method| Return Type| Description| +|------|------------|------------| +|`getContext(type: string, options?: any)`|`CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null`|| +|`toDataURL(type?: string, encoderOptions?: number)`| `any`|| +|`getBoundingClientRect()`| `{x: number; y: number;width: number;height: number;top: number;right: number;bottom: number;left: number;}`|| - 2D Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) - WebGL Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) - WebGL2 Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext) From 641b969147548f7b3a10163ebc96d160698acb0d Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Mon, 22 May 2023 16:12:53 +0200 Subject: [PATCH 2/3] chore: update --- packages/canvas/README.md | 149 ++++++++++++++++++++++++++++---------- 1 file changed, 110 insertions(+), 39 deletions(-) diff --git a/packages/canvas/README.md b/packages/canvas/README.md index fdf8ff5e..acf8a7b5 100644 --- a/packages/canvas/README.md +++ b/packages/canvas/README.md @@ -19,11 +19,11 @@ To install the plugin, run the following command from the root of your project: ns plugin add @nativescript/canvas ``` -You also need to install the following 2 plugins: + ## How to use @nativescript/canvas @@ -33,35 +33,22 @@ The following sections describe how to use the plugin in different frameworks. 1. Register the plugin -2. Add the Canvas view to your page +To register the plugin, use the Page view's `xmlns` attribute to declare the plugin namespace under a prefix, as follows: -### Using @nativescript/canvas in NativeScript Angular - -1. Register the plugin - -2. Add the Canvas view to your page -### Using @nativescript/canvas in NativeScript Vue - -1. Register the plugin - -2. Add the Canvas view to your page - -### Using @nativescript/canvas in NativeScript Svelte - -1. Register the plugin - -2. Add the Canvas view to your page - - -IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N} +```xml + +... + +``` -# Usage +2. Use the Canvas view +Next, use the prefix(`canvas`) to access the Canvas view in the page ```xml ``` -## Vanilla -### 2D + +#### 2D rendering context ```typescript let ctx; @@ -76,7 +63,7 @@ export function canvasReady(args) { } ``` -### WEBGL +#### WEBGL rendering context ```typescript let gl; @@ -93,11 +80,26 @@ export function canvasReady(args) { gl.clear(gl.COLOR_BUFFER_BIT); } ``` -## Vue -In `app.ts`, add: -``` -Vue.registerElement("Canvas", ()=>require("@nativescript/canvas").Canvas) + +### Using @nativescript/canvas in NativeScript Vue + +1. Register the plugin + +In the `app.ts` file, add the following code: + +```ts +import { registerElement } from 'nativescript-vue' + +registerElement( + 'Canvas', + () => require('@nativescript/canvas').Canvas +) + ``` Then in a `.vue` file: @@ -115,12 +117,13 @@ Then in a `.vue` file: ``` ```ts + +``` + +### Using @nativescript/canvas in NativeScript Svelte + +1. Register the plugin + +In the `app.ts` file, register the plugin as follows: + +```ts +import { registerNativeViewElement } from 'svelte-native/dom' + +registerNativeViewElement('canvas', () => require('@nativescript/canvas').Canvas) ``` +2. Then, in a `.svelte` file, add use the Canvas view as follows: + + +```svelte + + + + + + + + +``` ## API ### Canvas class -|Method| Return Type| Description| -|------|------------|------------| -|`getContext(type: string, options?: any)`|`CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null`|| -|`toDataURL(type?: string, encoderOptions?: number)`| `any`|| -|`getBoundingClientRect()`| `{x: number; y: number;width: number;height: number;top: number;right: number;bottom: number;left: number;}`|| +#### getContext() +```ts +context : CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null = canvas.getContext(type, options) +``` + +| Param | Type | Description | +| --- | --- | --- | +| `type` | `string` | The context type. Can be either `2d`, `webgl` or `webgl2` | +| `options?` | `any` | The context options. | + +--- +#### toDataURL() +```ts +data : any = canvas.toDataURL(type, encoderOptions) +``` + +| Param | Type | Description | +| --- | --- | --- | +| `type?` | `string` | +| `encoderOptions?` | `number` | + +--- +#### getBoundingClientRect() +```ts +rect : {x: number; y: number;width: number;height: number;top: number;right: number;bottom: number;left: number;} = canvas.getBoundingClientRect() +``` + +--- + +#### flush() +```ts +canvas.flush() +``` + +--- - 2D Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) - WebGL Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) - WebGL2 Similar to -> the [Web Spec](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext) From 860047b54f6934a079b8cebaaa66060f5505ef80 Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Thu, 25 May 2023 17:07:13 +0200 Subject: [PATCH 3/3] chore: update --- packages/canvas/README.md | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/canvas/README.md b/packages/canvas/README.md index acf8a7b5..35eea73e 100644 --- a/packages/canvas/README.md +++ b/packages/canvas/README.md @@ -19,11 +19,15 @@ To install the plugin, run the following command from the root of your project: ns plugin add @nativescript/canvas ``` - +- [@nativescript/babylon](https://www.npmjs.com/package/@nativescript/canvas-babylon): For rendering 3D graphics +- [@nativescript/canvas-polyfill](https://github.com/NativeScript/canvas/tree/master/packages/canvas-polyfill): For polyfilling the canvas API +- [@nativescript/canvas-media](https://github.com/NativeScript/canvas/tree/master/packages/canvas-media): For rendering video and audio +- [@nativescript/canvas-three](https://www.npmjs.com/package/@nativescript/canvas-three): For rendering 3D graphics +- [@nativescript/canvas-phaser](https://github.com/NativeScript/canvas/tree/master/packages/canvas-phaser): For rendering 2D graphics +- [@nativescript/canvas-pixi](https://github.com/NativeScript/canvas/tree/master/packages/canvas-pixi): +- [@nativescript/canvas-phaser-ce](https://github.com/NativeScript/canvas/tree/master/packages/canvas-phaser-ce) ## How to use @nativescript/canvas @@ -80,6 +84,16 @@ export function canvasReady(args) { gl.clear(gl.COLOR_BUFFER_BIT); } ``` +### Example: Create a swarm effect +To use the canvas plugin to create a swarm effect, see the example at the following link: + +https://github.com/NativeScript/canvas/blob/cc723b4504a6878d8e25ec6b1fea22f5ca949f30/tools/demo/canvas/canvas2d/particles/swarm.ts + +### Example: solar system animation + +To use the canvas plugin to create a solar system animation, see the example at the following link: + +https://github.com/NativeScript/canvas/blob/cc723b4504a6878d8e25ec6b1fea22f5ca949f30/tools/demo/canvas/canvas2d/solarSystem.ts