Vue-konva: невозможно заполнить прямоугольники изображением - PullRequest
Новая
       6

Vue-konva: невозможно заполнить прямоугольники изображением

0 голосов
/ 13 ноября 2018

Я правильно рисую несколько прямоугольников с помощью библиотеки vue-konva (мой проект сделан с помощью Vue.js 2).

Однако я хочу заполнить эти нарисованные прямоугольники изображениями. Vue-konva doc говорит использовать свойство 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 с указанным выше путем, я смогу увидеть свое изображение.

Вы можете протестировать образец кода по этому адресу: https://codesandbox.io/s/6x1r9jxklz

Почему ни одно изображение не отображается в этом случае?

1 Ответ

0 голосов
/ 13 ноября 2018

в соответствии с документацией 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
      }
    };
  }
};
...