I am integrating Konva/Vue-Konva into my Nuxtjs project to create a drawing feature where users can freely draw rectangles on the canvas by clicking the Add Node button.
However, I encountered an 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)
The goal is to allow users to draw rectangular shapes on the Konva Canvas when they click the Add Node button.
Below is a snippet of my code:
<template>
<div>
<button class="btn btn-primary btn-sm" @click="addNode()">
Add Node
</button>
<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: {
// Function to draw nodes/shapes on the canvas when the Add Node button is clicked
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>