Airy Canvas
Powerful front-end interactive drawing board.
Quick start
Try Airy Canvas mini, a mini demo with backend.
Features
Basic Usage
<template>
<airy-canvas
:data="airyCanvasData"
:options="airyCanvasOptions"
/>
</template>
<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'
export default {
...,
components: {
AiryCanvas
},
data() {
return {
airyCanvasData: [],
airyCanvasOptions: {
fluid: true
}
}
},
...
}
</script>
Options
Attribute |
Description |
Type |
Accepted Values |
Default |
width |
canvas width |
number |
- |
800 |
height |
canvas height |
number |
- |
600 |
fluid |
resize by container size |
boolean |
- |
false |
plugins |
plugins array |
array |
- |
[] |
store |
vuex integration options |
object |
- |
undefined |
Methods
Name |
Arguments |
Return |
clear |
- |
- |
getHistory |
- |
Array of history data |
Plugins (Not finished)
Want more tools in Airy Canvas? Airy Canvas accept plugins.
init with Airy Canvas
<template>
<airy-canvas
:data="airyCanvasData"
:options="airyCanvasOptions"
/>
</template>
<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'
import AiryCanvasPolygon from 'airy-canvas-polygon'
export default {
...,
components: {
AiryCanvas
},
data() {
return {
airyCanvasData: [],
airyCanvasOptions: {
fluid: true,
plugins: [AiryCanvasPolygon]
}
}
},
...
}
</script>
plugin hot loading
<template>
<airy-canvas
:data="airyCanvasData"
:options="airyCanvasOptions"
ref="airy-canvas"
/>
</template>
<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'
import AiryCanvasPolygon from 'airy-canvas-polygon'
export default {
...,
components: {
AiryCanvas
},
data() {
return {
airyCanvasData: [],
airyCanvasOptions: {
fluid: true
}
}
},
methods: {
...
addPolygonPlugin() {
this.$refs['airy-canvas'].addPlugin(AiryCanvasPolygon)
},
...
},
...
}
integration with Vuex
<template>
<airy-canvas
:data="airyCanvasData"
:options="airyCanvasOptions"
/>
</template>
<script>
import Vue from 'Vue'
import AiryCanvas from 'airy-canvas'
export default {
...,
components: {
AiryCanvas
},
data() {
return {
airyCanvasData: [],
airyCanvasOptions: {
fluid: true,
store: {
getter() => {
return this.$store.getters.history
},
dispatcher(payload) {
Store.dispatch('updateCanvas', payload)
},
...
}
}
}
},
...
}
</script>