JSPM – @nativescript-community/ui-canvas@4.4.0

Package Exports

@nativescript-community/ui-canvas/shapes/shape
@nativescript-community/ui-canvas/shapes/shape.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nativescript-community/ui-canvas) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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);
}