组件用法

1. Import and use VueKonva

import { createApp } from 'vue';
import App from './App.vue';
// vue-konva.min.js 和 konva.min.js 千家悦提供
import VueKonva from './lib/vue-konva';

const app = createApp(App);
app.use(VueKonva);
app.mount('#app');

2.在组件模板中引用

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};

</script>