Needs to start painting in the stage element when on events mousedown. I have template and example with js in official document. How can i use Line and start draw?
<template>
<v-stage
ref="stage"
:config="stageSize"
@mousedown="handleMousedown"
>
<v-layer ref="layer">
</v-layer>
</v-stage>
</template>
export default {
data() {
return {
stageSize: {
width: width,
height: height,
},
text: "",
isDrawing: false,
};
},
methods: {
handleMousedown() {
console.log("test");
this.isDrawing = true;
}
},
};
</script>
example from official document
stage.on('mousedown touchstart', function (e) {
isPaint = true;
var pos = stage.getPointerPosition();
lastLine = new Konva.Line({
stroke: '#df4b26',
strokeWidth: 5,
globalCompositeOperation:
mode === 'brush' ? 'source-over' : 'destination-out',
// round cap for smoother lines
lineCap: 'round',
// add point twice, so we have some drawings even on a simple click
points: [pos.x, pos.y, pos.x, pos.y],
});
layer.add(lastLine);
});
Using "vue-way":
demo: https://codesandbox.io/s/vue-konva-free-drawing-ux2uy?file=/src/App.vue