使用 Vue-konva 動態繪圖 | 點燈坊

Vue-konva 除了在 HTML Template 以 Declarative 使用外，也可完全以 API 方式動態繪圖。

Version

macOS Catalina 10.15.5
WebStorm 2020.1.3
Vue 2.6.11
Vue-konva 2.1.3

Draw Shape Dynamically

一樣使用 Vue-konva 繪圖，但完全以 API 動態繪圖。

Vue-konva

<template>
  <v-stage :config="stageConfig">
    <v-layer ref="layer">
    </v-layer>
  </v-stage>
</template>

<script>
import Konva from 'konva'
let { Rect } = Konva

let width = window.innerWidth
let height = window.innerHeight

let mounted = function() {
  let layer = this.$refs.layer.getNode()
  let rect = new Rect({
    x: 20,
    y: 50,
    width: 100,
    height: 100,
    stroke: 'red',
    strokeWidth: 2
  })
  layer.add(rect)
  layer.draw()
}

export default {
  name: 'App',
  data: _ => ({
    stageConfig: {
      width, height
    },
  }),
  mounted
}
</script>

第 2 行

<v-stage :config="stageConfig">
  <v-layer ref="layer">
  </v-layer>
</v-stage>

HTML template 只包含 <v-stage> 與 <v-layer>，並沒有 <v-rect>。

特別在 <v-layer> 加上 ref，稍後要以 JavaScript 操縱 <v-layer>。

第 9 行

import Konva from 'konva'
let { Rect } = Konva

若要動態繪圖，要引用 konva，並 destructure 出 Rect class。

16 行

let layer = this.$refs.layer.getNode()
let rect = new Rect({
  x: 20,
  y: 50,
  width: 100,
  height: 100,
  stroke: 'red',
  strokeWidth: 2
})
layer.add(rect)
layer.draw()

使用 this.$refs.layer.getNode() 取得 layer object，直接將 config object 傳入 Rect() constructor 建立 rect Object。

以 layer.add() 加入 rect Object，最後以 layer.draw() 動態繪圖。

Conclusion

• 雖然 Vue-konva 可先在 HTML template 以 declarative 方式建立，但也可以 API 方式全動態使用