Vue-konva 底層為 HTML 5 Canvas，可簡單使用 Canvas 繪圖，並具有 Vue 的 Declarative 與 Reactive 特性。
Version
macOS Catalina 10.15.5
WebStorm 2020.1.3
Vue 2.6.11
Vue-konva 2.1.3
Install Package
$ yarn add vue-konva konva
使用 Yarn 安裝 Vue-konva 與 Konva。
main.js
import Vue from 'vue'
import App from './App.vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
第 3 行
import VueKonva from 'vue-konva'
引入 Vue-konva。
第 5 行
Vue.use(VueKonva)
Vue 引入 VueKonva。
Vue Component
<template>
<v-stage :config="stageConfig">
<v-layer>
<v-rect :config="rectConfig"></v-rect>
</v-layer>
</v-stage>
</template>
<script>
let width = window.innerWidth
let height = window.innerHeight
export default {
name: 'App',
data: _ => ({
stageConfig: {
width, height
},
rectConfig: {
x: 20,
y: 50,
width: 100,
height: 100,
stroke: 'red',
strokeWidth: 2
}
})
}
</script>
第 2 行
<v-stage :config="stageConfig">
<v-layer>
<v-rect :config="rectConfig"></v-rect>
</v-layer>
</v-stage>
Vue-konva 支援 declarative 在 HTML template 內，<v-rect> 必須在 <s-stage> 與 <v-layer> 使用，只要將相關資料 binding 到 config property。
16 行
stageConfig: {
width, height
},
首先必須提供 <v-stage> 的 width 與 height。
19 行
rectConfig: {
x: 20,
y: 50,
width: 100,
height: 100,
stroke: 'red',
strokeWidth: 2
}
提供繪製 矩形 所需要的資料，其中 stroke 為邊框顏色，strokeWidth 邊框寬度。
DevServer
$ yarn serve
啟動 DevServer。
Vue-konva 順利在 browser 繪製矩形。
Conclusion
- Vue-konva 讓我們以 declarative 與 component 方式繪圖，完全不必使用 API，直接提供資料 binding 到 component 即可