Open nikkolai14 opened 3 years ago
Docs coming soon but you can get started with the canvas with the following
ns plugin add @nativescript/canvas
IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}
Using Core {N}
<canvas:Canvas id="canvas" width="100%" height="100%" ready="canvasReady"/>
For all the other flavors you need to register the element
Angular
import { CanvasModule } from '@nativescript/canvas/angular';
@NgModule({
imports: [
CanvasModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
Vue
import { Vue } from 'nativescript-vue';
import Canvas from '@nativescript/canvas/vue';
Vue.use(Canvas);
Then you can use either the 2D or WebGL APIs
2D
let ctx;
let canvas;
export function canvasReady(args) {
console.log('canvas ready');
canvas = args.object;
console.log(canvas);
ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
}
WebGL
let gl;
let canvas;
export function canvasReady(args) {
console.log('canvas ready');
canvas = args.object;
gl = canvas.getContext('webgl'); // 'webgl' || 'webgl2'
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// Set the clear color to darkish green.
gl.clearColor(0.0, 0.5, 0.0, 1.0);
// Clear the context with the newly set color. This is
// the function call that actually does the drawing.
gl.clear(gl.COLOR_BUFFER_BIT);
}
Using other libs is possible with the @nativescript/canvas-polyfill
it helps fill in the missing pieces in the dom and {N} it's not perfect so feel free to open an issue if something is missing. When planning to use another canvas lib it always safe to require('@nativescript/canvas-polyfill')
early in the app boot e.g app.ts/main.ts
so it will setup the the needed APIs also some of those libs usually do some checks early API checks.
So one could get let's say babylonjs working by installing the @nativescript/canvas
, @nativescript/canvas-polyfill
and the babylonjs package an simply using require('@nativescript/canvas-polyfill')
in the app.ts then pass the gl context to the constructor.
Another example one could using Chartjs
similar to the babylonjs setup but instead of passing a gl context to the construtor you would pass the 2d context
There are a few libs that have been updated to help make thing much easier
@nativescript/canvas-phaser-ce .. phaser-ce examples @nativescript/canvas-phaser .. phaser examples @nativescript/canvas-three .. three examples @nativescript/canvas-pixi .. examples
@triniwiz thanks for the effort team!
in Angular there is no Page-Element? What's with Angular?
IMPORTANT: ensure you include xmlns:canvas="@nativescript/canvas" on the Page element for core {N}
For angular it would be as follow
import { CanvasModule } from '@nativescript/canvas/angular';
@NgModule({
imports: [
CanvasModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
<Canvas #canvas width="100%" height="100%" (ready)="canvasReady($event)"/>
There are a few libs that have been updated to help make thing much easier
@nativescript/canvas-phaser-ce .. phaser-ce examples @nativescript/canvas-phaser .. phaser examples @nativescript/canvas-three .. three examples @nativescript/canvas-pixi .. examples
I've tried to start a canvas-phaser and a canvas-phaser-ce demo but I couldn't get what steps I have to perform in order to do that. I hope it will be clarified in the docs.
Any documentation on how to use this plugin?