如何从 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

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

 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);
      }
    });
  }

Answer 2

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

查看 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',
  }"
/>

演示：https://codesandbox.io/s/32xxoon18p

如果您想完全控制绘图，可以使用自定义形状：https://konvajs.org/docs/vue/Custom_Shape.html

如何从 vue konva 中的路径绘制形状？

How to draw shape from path in vue konva?

vue.js

konvajs