canvas based input fields for nuxt framework
npm install @sirusdev/canvas-input-nuxtnpm 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: [],
};
}
}
``