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();
}

从循环生成多个图像

1 个答案: