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标签，则可以看到我的图片。

您可以在以下网址测试代码示例：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
      }
    };
  }
};

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

1 个答案: