使用 Vue-konva 繪製文字 | 點燈坊

Vue-konva 除了能繪製圖片與圖形外，也可以繪製文字。

Version

macOS Catalina 10.15.5
WebStorm 2020.1.3
Vue 2.6.11
Vue-konva 2.1.3

Draw Text

以 Vue-konva 繪製文字。

Vue-konva

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

<script>
let width = window.innerWidth
let height = window.innerHeight

export default {
  name: 'App',
  data: () => ({
    stageConfig: {
      width, height
    },
    textConfig: {
      x: 40,
      y: 5,
      text: '37.5',
      fontSize: 20
    },
  }),
}
</script>

第 2 行

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

以 <v-text> 在 HTML template 宣告要繪製文字，並提供 textConfig 綁定到 config property。

19 行

textConfig: {
  x: 40,
  y: 5,
  text: '37.5',
  fontSize: 20
},

在 textConfig Object 提供文字資料。

Conclusion

• Vue-konva 繪製文字方式與繪製圖形方式類似，只要在 HTML template 宣告 <v-text>，並提供 config object 綁定到 <v-text> 即可