@sirusdev/canvas-input-angular

a canvas input component built for angular frameworks

Quick Start

this module can only be used on angular framework project with version > 9

After all in placed, follow these simple steps

1. install this modules using npm CLI

   npm i @sirusdev/canvas-input-angular

2. add canvas input module to your modules

    import { CanvasInputModule } from '@sirusdev/canvas-input-angular';
   
    @NgModule({
      imports: [CanvasInputModule]
    })
   ...

1. canvas input will available globally, and can be used on any components or pages

   <sirus-canvas-input
     [(ngModel)]="c1"
     [size]="size"
     [disabled]="!enabled"
     [color]="color"
     [opacity]="opacity"
     [offsetTop]="offsetTop"
     [offsetLeft]="offsetLeft"
   ></sirus-canvas-input>

   angular controller

   import { CanvasModel } from '@sirusdev/canvas-input-angular';
   
   
   @Component({
     selector: 'my-page',
     templateUrl: 'my.page.html',
   })
   export class MyPage {
     // data model, save this model to db.
     c1: CanvasModel = {
       width: 920, // width of canvas
       height: 500, // height of canvas
       vectors: [], // vector data
       imgUrl:
         'https://www.howitworksdaily.com/wp-content/uploads/2012/05/Cat-720x340.jpg',
     };
   
     size = 2; // stroke size
     color = '#ff0000'; // stroke color
     opacity = .2; // stroke opacity
     enabled = true; // enable disable input, false for read only
     offsetTop = 20; // offset top, use this when component placed on scrollable component
     offsetLeft = 10; // offset left
   
     /**
      * clear canvas
      */
     clear() {
       this.c1 = {
         ...this.c1,
         vectors: [],
       };
     }
   }