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 標簽，我可以看到我的圖像。

您可以在此網址測試代碼示例： 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
      }
    };
  }
};