@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

``bash
npm i @sirusdev/canvas-input-nuxt
`

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

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

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

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

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

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

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