@sirusdev/canvas-input-nuxt v1.0.3

@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"
]

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

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

controller

```typescript
@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: [],
    };
  }
}
```