如何从vue konva的路径画出形状？

Question

我想在vue里面使用konvajs。我想从路径数据中绘制一个对象，但我不知道该怎么做。我的主要目的是从服务器获取路径数据，但首先我想看到一些绘图。

谢谢！所有帮助赞赏。

  <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

不建议将sceneFunc用于内置形状（例如Konva.Path）。

看看vue-konva https://konvajs.org/docs/vue/Shapes.html的形状教程。

如果你想创建一个Konva.Path，你需要使用v-path组件：

<v-path
  :config="{
    x: 200,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    data: 'm0,0L100,100L0,100L0,0',
  }"
/>

但是：ぁzxswい

您想要完全控制绘图，您可以使用自定义形状：https://codesandbox.io/s/32xxoon18p

Answer 2

我可以让它发挥作用。我不认为，这是正确的方法，但现在至少它正在发挥作用

https://konvajs.org/docs/vue/Custom_Shape.html