javascript - 从循环中生成多个图像

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 的子级，我可以在代码检查器中看到它们
• 层出现在页面上，上面什么也没有(我可以在检查器中看到它)
• 用简单的形状 (Regular.Polygon) 替换图片效果很好。

Answer 1

加载图像时需要重绘图层:

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