Konva/Vue-Konva 遇到错误 client.js:227 TypeError: Konva.Layer is not a constructor

Question

I am using Konva/Vue-Konva within my Nuxtjs application to draw the Rectangle . I have the Add Node button and whenever user clicks on the button he should be able to freely draw the Ractangular shape on the Konva Canvas .

I am trying to do the same but I am running into the error:

client.js:227 TypeError: Konva.Layer is not a constructor
    at VueComponent.addNode (index.js?!./node_modules/vue-loader/lib/index.js?!./pages/Test1.vue?vue&type=script&lang=js&:65)

All I want to do is draw the rectangular shape using the Konva based on the user clicking on the Add Node button

Following is my sample code:

<template>
  <div>
    <button class="btn btn-primary btn-sm" @click="addNode()">
      Add Node
    </button>&nbsp;
    <div id="container" ref="container" />
  </div>
</template>

<script>
import Vue from 'vue'
let Konva = null

export default {
  data () {
    return {
    }
  },
  async mounted () {
    if (process.browser) {
      const VueKonva = await import('vue-konva')
      Konva = await import('konva')
      Vue.use(VueKonva)
      Vue.use(Konva)
    }
  },
  methods: {
    // Onclick of the Add Node button trigger the frunction to draw the Nodes/Shapes on the canvas
    addNode () {
      const layer = new Konva.Layer()
      const stage = this.$refs.stage.getStage()
      const rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      })
      layer.add(rect1)
      stage.add(layer)
      stage.draw()
    }
  }
}
</script>

Answer 1

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <button class="btn btn-primary btn-sm" @click="addEvent()">
          Add Event
        </button>&nbsp;
        <button class="btn btn-success btn-sm" @click="submitNodes()">
          Submit
        </button>&nbsp;
      </div>
    </div>
    <div class="row root">
      <div class="col-sm-12 body">
        <v-stage
          ref="stage"
          class="stage"
          :config="stageSize"
          @mouseup="handleMouseUp"
          @mousemove="handleMouseMove"
          @mousedown="handleMouseDown"
        >
          <v-layer ref="layer">
            <v-rect
              v-for="(rec, index) in nodeArray"
              :key="index"
              :config="{
                x: Math.min(rec.startPointX, rec.startPointX + rec.width),
                y: Math.min(rec.startPointY, rec.startPointY + rec.height),
                width: Math.abs(rec.width),
                height: Math.abs(rec.height),
                fill: 'rgb(0,0,0,0)',
                stroke: 'black',
                strokeWidth: 3,
              }"
            />
          </v-layer>
        </v-stage>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      stageSize: {
        width: null,
        height: 900
      },
      lines: [],
      isDrawing: false,
      eventFlag: false,
      nodeCounter: 0,
      nodeArray: []
    }
  },
  mounted () {
    if (process.browser && window !== undefined) {
      this.stageSize.width = window.innerWidth
      // this.stageSize.height = window.innerHeight
    }
  },
  methods: {
    handleMouseDown (event) {
      if (this.eventFlag) {
        this.isDrawing = true
        const pos = this.$refs.stage.getNode().getPointerPosition()
        const nodeInfo = this.nodeArray[this.nodeArray.length - 1]
        nodeInfo.startPointX = pos.x
        nodeInfo.startPointY = pos.y
        console.log(JSON.stringify(nodeInfo, null, 4))
      }
    },
    handleMouseUp () {
      this.isDrawing = false
      this.eventFlag = false
    },
    setNodes (element) {
      this.nodeArray = element
    },
    handleMouseMove (event) {
      if (!this.isDrawing) {
        return
      }
      // console.log(event);
      const point = this.$refs.stage.getNode().getPointerPosition()
      // Handle  rectangle part
      const curRec = this.nodeArray[this.nodeArray.length - 1]
      curRec.width = point.x - curRec.startPointX
      curRec.height = point.y - curRec.startPointY
    },
    // Function to read the Nodes after add all the nodes
    submitNodes () {
      console.log('ALL NODE INFO')
      console.log(JSON.stringify(this.nodeArray, null, 4))
      this.handleDragstart()
    },
    addEvent () {
      this.eventFlag = true
      this.setNodes([
        ...this.nodeArray,
        {
          width: 0,
          height: 0,
          draggable: true,
          name: 'Event ' + this.nodeCounter
        }
      ])
      this.nodeCounter++
    }
  }
}
</script>

<style scoped>
.root {
  --bg-color: #fff;
  --line-color-1: #D5D8DC;
  --line-color-2: #a9a9a9;
}

.body {
  height: 100vh;
  margin: 0;
}

.stage {
  height: 100%;
  background-color: var(--bg-color);
  background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0),
    conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0);
  background-size: 100px 100px, 20px 20px;
}
</style>