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

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

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

如果要创建vue-konva，则需要使用Konva.Path组件：

v-path

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

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

Answer 2

我可以使它工作。我不认为这是正确的方法，但是现在至少可以了

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

如何在Vue Konva中从路径绘制形状？

2 个答案: