@sirusdev/canvas-input-nuxt

a canvas input component built for nuxt frameworks

Quick Start

this module can only be used on typescript environment, check nuxt typescript module documentation to setup one.

After all in placed, follow these simple steps

1. install this modules using npm CLI

   npm i @sirusdev/canvas-input-nuxt

2. register this modules on consumer configuration nuxt.config.ts

   buildModules: [
     ...
     '@sirusdev/canvas-input-nuxt'
   ]
   ...

1. add typings on tsconfig.json to enable intellisense features

   "types": [
     ...
     "@sirusdev/canvas-input-nuxt/types"
   ]

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

   <sirus-canvas-input
     v-model="c1"
     :size="size"
     :color="color"
     :opacity="opacity"
     :disabled="!enabled"
     :offset-left="offsetLeft"
     :offset-top="offsetTop"
   ></sirus-canvas-input>

   controller

   @Component
   export default class IndexPage extends Vue {
     // 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: [],
       };
     }
   }