Vue-konva :无法用图像填充矩形

Question

我用vue-konva库正确地画了几个矩形(我的项目是用Vue.js 2制作的)。

但是，我想用图像填充这些绘制的矩形。vue-konva文档说要使用fillPatternImage属性，但它不起作用

下面是我的代码

模板：

<div id="scene">
    <v-stage :config="configKonva">
        <v-layer>
            <div v-for="(coordonate, index) in coordonatesList" v-bind:key="index">
                <v-rect :config="getConfigRect(coordonate)"></v-rect>
            </div>
        </v-layer>
    </v-stage>
</div>

脚本：

methods: {
    getConfigRect: function(element) {
        return {
            x: element.x,
            y: element.y - (RECT_HEIGHT / 2),
            width: 20,
            height: 20,
            fill: element.color,
            fillPatternImage: '../../assets/cell.png',
        }
    }
}

png的路径是正确的。如果在我的模板中使用src中的上述路径放置一个img标记，我可以看到我的图像。

您可以通过以下url测试代码示例：https://codesandbox.io/s/6x1r9jxklz

为什么在这种情况下没有显示任何图像？

Answer 1

根据vue-konva文档，您的代码必须在数据中，而不是在方法中。示例：

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};