Negligible Participation Metric
    Wondering what’s next for npm?Check out our public roadmap! »

    @nativescript-community/ui-canvas
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.49 • Public • Published

    npm npm GitHub forks GitHub stars

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

    Install

    npm i @nativescript-community/ui-canvas

    DownloadsWeekly Downloads

    108

    Version

    4.0.49

    License

    Apache-2.0

    Unpacked Size

    471 kB

    Total Files

    80

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar