Генерация нескольких изображений из цикла

Question

Генерация нескольких изображений из цикла

1

Я попытался написать цикл, который загружает изображение из локального пути. Для этого я пытаюсь использовать Konva:

const playerLayer = new Konva.Layer();
var playerAmount = 1;
  while (playerAmount < 6) {
    var playerIcon = new Image();

    var playerInstance = new Konva.Image({
      x: 660,
      y: 140,
      image: playerIcon,
      width: 32,
      height: 32
    });
    playerIcon.src = "media/heroes/hero1.png";
    playerLayer.add(playerInstance);
    playerAmount++;
    } 
    stage.add(playerLayer);

По какой-то причине изображения не отображаются.

Что я проверил:

Konva.Image успешно становятся дочерьми PlayerLayer, я могу видеть их в инспекторе кода
На странице появляется слой, на нем ничего нет (я вижу его в инспекторе)
Замена изображения на простые фигуры (Regular.Polygon) отлично работает.

Skypho 12 июнь 2018, в 14:23

Источник

0

Перемещение PlayerLayer вверх с помощью .moveToTop () также не работает, если у кого-то есть такая идея. На этом слое просто ничего нет.
Skypho 12 июнь 2018, в 12:16

Теги:

javascript

loops

while-loop

konvajs

1 ответ

Ещё вопросы

Перемещение PlayerLayer вверх с помощью .moveToTop () также не работает, если у кого-то есть такая идея. На этом слое просто ничего нет.

lavrton · Accepted Answer · 2018-06-12T13-07-00.000Z

Вам необходимо перерисовать слой при загрузке изображения:

playerIcon.onload = function() {
  playerLayer.batchDraw();
}

Спасибо, теперь отлично работает! У меня есть еще один вопрос по Konva, если вы хотите мне помочь, я был бы признателен за это: stackoverflow.com/questions/50854814/context-menu-with-konva-js