README
Installation
tns plugin add @nativescript-community/ui-canvas
Be sure to run a new build after adding plugins to avoid any issues.
Migration
2.x => 3.x
The Shapes
component was removed, simply put your shapes directly under the CanvasView
Usage
The nativescript Canvas is based on the Android Canvas class. The android API is actually a direct subclass with some Additions
Plain NativeScript
IMPORTANT: Make sure you include xmlns:cv="@nativescript-community/ui-canvas"
on the Page element
XML
<Page xmlns:cv="@nativescript-community/ui-canvas">
<StackLayout horizontalAlignment="center">
<cv:CanvasView width="100" height="100" draw="draw"/>
</StackLayout>
</Page>
NativeScript + Angular
import { registerElement } from 'nativescript-angular/element-registry';
import { CanvasView } from '@nativescript-community/ui-canvas';
registerElement('CanvasView', () => CanvasView);
<CanvasView width="100" height="100" (draw)="draw($event)></CanvasView>
NativeScript + Vue
import Vue from 'nativescript-vue';
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';
Vue.use(CanvasPlugin);
<CanvasView width="100" height="100" @draw="draw"/>
Draw Method
function draw(event: { canvas: Canvas }) {
const paint = new Paint();
paint.setColor(new Color('black'));
paint.strokeWidth = 10;
canvas.drawRect(createRect(0, 0, 200, 100), paint);
}