Использование фонового изображения в Konva Layer или Stage - PullRequest
Новая
       35

Использование фонового изображения в Konva Layer или Stage

0 голосов
/ 22 марта 2020

Как добавить фоновое изображение в мою сцену или слой при использовании Konva с VueJS? Я попытался применить fillPatternImage в config как на слое, так и на сцене без эффекта. Не могу найти что-нибудь об этом в документах, кроме, может быть, добавления большого прямоугольника в один из слоев и его заполнения. Любые идеи, как это сделать?

Вот код, где я использую его на одной фигуре. Можно ли сделать что-то подобное, но на уровне слоя / группы / сцены, чтобы установить фон? 

<v-stage
  ref="stage"
  :config="configKonva"
>
  <v-layer v-if="image" ref="layer">
    <v-regular-polygon
      v-for="item in list"
      :key="item.id"
      :config="{
        x: item.x,
        y: item.y,
        sides: 6,
        rotation: item.rotation,
        id: item.id,
        numPoints: 5,
        radius: 30,
        outerRadius: 50,
        opacity: 0.8,
        fillPatternImage: image,
        fillPatternRepeat: 'no-repeat',
        fillPatternOffset: {
...

1 Ответ

1 голос
/ 24 марта 2020

stage, layer и group не имеют свойства fillPatternImage. Только фигуры имеют это свойство: https://konvajs.org/api/Konva.Shape.html#fillPatternImage

Поэтому рекомендуется добавлять фоновую форму прямоугольника.

Кроме того, вы можете добавить фоновое изображение с помощью CSS в контейнер сцены (но такой фон не будет экспортироваться в изображение, если вы попытаетесь экспортировать содержимое холста методами Konva)

...