How to draw shape from path in vue konva? - vue.js

Question

I am trying to use konvajs inside vue. I want to draw an object from path data, but i don't know how to do it. My main purpose is to get the path data from server, but first i would like to see some drawing in action.
Thank you!
All help appreciated.
<div>
<v-container>
<v-layout align-end justify-center row fill-height>
<v-flex xs12>
<v-stage :config="configKonva">
<v-layer>
<v-shape :config="configShape"/>
</v-layer>
</v-stage>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
configShape: {},
configKonva: {
width: 200,
height: 200
}
};
},
methods: {},
mounted() {
this.configShape = new Konva.Path({
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
data: "m0,0L100,100L0,100L0,0",
sceneFunc: function(context, shape) {
// special Konva.js method
context.fillStrokeShape(shape);
}
});
}
};
</script>```

Answer 1

It is not recommended to use sceneFunc for built-in shapes (such as Konva.Path).
Take a look into shapes tutorial for vue-konva https://konvajs.org/docs/vue/Shapes.html.
If you want to create a Konva.Path you need to use v-path component:
<v-path
:config="{
x: 200,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
data: 'm0,0L100,100L0,100L0,0',
}"
/>
Demo: https://codesandbox.io/s/32xxoon18p
You you want to have full control of drawing you can use custom shapes: https://konvajs.org/docs/vue/Custom_Shape.html

Answer 2

I could make it work. I don't think, that this is the correct way, but now at least it's working
mounted() {
this.configShape = new Konva.Path({
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
data: "m0,0L100,100L0,100L0,0",
sceneFunc: function(context, shape) {
let arr = shape.attrs.dataArray;
context.beginPath();
for (var i = 0; i < arr.length; i++) {
if (arr[i].command == "M") {
context.moveTo(arr[i].points[0],arr[i].points[1]);
} else if (arr[i].command == "L") {
context.lineTo(arr[i].points[0],arr[i].points[1]);
}
}
context.closePath();
// special Konva.js method
context.fillStrokeShape(shape);
}
});
}