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的路径是正确的。如果在我的模板中放一个img标签，在src中使用上面的路径，我可以看到我的图像。

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