How to draw shape from path in vue konva?

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