从循环中生成多个图像

Question

我尝试编写一个循环，从本地路径加载图像。为此，我尝试使用 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的children，我可以在code inspector中看到它们
图层出现在页面上，上面什么都没有（我可以在检查器中看到它）
用简单的形状替换图像 (Regular.Polygon) 效果很好。

Answer 1

加载图片时需要重新绘制图层：

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

从循环中生成多个图像

Generate multiple images from loop

javascript

loops

while-loop

konvajs