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":
<template>
<div>
<v-stage
ref="stage"
:config="configKonva"
@mousedown="handleMouseDown"
@mousemove="handleMouseMove"
@mouseup="handleMouseUp"
>
<v-layer ref="layer">
<v-line
v-for="line in lines"
:key="line.id"
:config="{
stroke: 'black',
points: line.points,
}"
/>
</v-layer>
</v-stage>
</div>
</template>
<script>
const width = window.innerWidth;
const height = window.innerHeight;
export default {
data() {
return {
lines: [],
isDrawing: false,
configKonva: {
width: width,
height: height,
},
};
},
methods: {
handleMouseDown(e) {
this.isDrawing = true;
const pos = e.target.getStage().getPointerPosition();
this.lines = [...this.lines, { points: [pos.x, pos.y] }];
},
handleMouseMove(e) {
// no drawing - skipping
if (!this.isDrawing) {
return;
}
const stage = e.target.getStage();
const point = stage.getPointerPosition();
let lastLine = this.lines[this.lines.length - 1];
// add point
lastLine.points = lastLine.points.concat([point.x, point.y]);
// replace last
this.lines.splice(this.lines.length - 1, 1, lastLine);
},
handleMouseUp() {
this.isDrawing = false;
},
},
};
</script>
<style>
body {
margin: 0;
padding: 0;
}
</style>
demo: https://codesandbox.io/s/vue-konva-free-drawing-ux2uy?file=/src/App.vue