nativescript-canvas
TypeScript icon, indicating that this package has built-in type declarations

3.0.10 • Public • Published

npm npm GitHub forks GitHub stars

Installation

  • tns plugin add nativescript-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-canvas" on the Page element

XML

<Page xmlns:cv="nativescript-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-canvas';
registerElement('CanvasView', () => CanvasView);
<CanvasView width="100" height="100" (draw)="draw($event)></CanvasView>

NativeScript + Vue

import Vue from 'nativescript-vue';
import CanvasPlugin from 'nativescript-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);
}

Package Sidebar

Install

npm i nativescript-canvas

Weekly Downloads

9

Version

3.0.10

License

Apache-2.0

Unpacked Size

2.41 MB

Total Files

58

Last publish

Collaborators

  • farfromrefuge