鼠标单击后图像不会完全显示

Question

我发现图片没有像下面那样显示的问题。 它是我使用konva.js的画布。 舞台是可拖的：真的。如果我在draggable：false时单击此画布，我发现图像现在将显示事件。它有点像画布重新加载所有图像都出现了。

点击此画布后。所有图像都会显示出来。

这是我的一些代码。

var rackTop = new Image();
rackTop.onload = function() {
    var image = new Konva.Image({
        x: 13+x,
        y : y, 
        image: rackTop,
        width: drawer_width + rack_side*2,
        height: Math.ceil(70 * scale_default)
    });
    onerackLayer.add(image);
};
rackTop.src = 'img/rack/rack_top.png';



function createMutiRackImage(callback, number, serverObj, serverContent, type) {
  var img = new Image();
  if (type === 'front') {
      img.src = serverObj.imgUrl.thumFront;
  } else if (type === 'rear') {
      img.src = serverObj.imgUrl.thumRear;
  } else {
    //  console.log('Server img type not defined.');
      return;
  }

  var imgData = {};
  imgData.x = serverContent.x;
  imgData.y = serverContent.y;
  imgData.width = serverContent.width;
  imgData.height = serverContent.height;
  imgData.status = serverContent.health;
  imgData.type = type;
  imgData.location = serverObj.locationId;
  imgData.imgUrl = serverObj.imgUrl;
  imgData.model = serverObj.model;
  imgData.imgObj = img;
  imgData.rackSize = serverContent.rackSize;  
  imgData.name = serverObj.name; 
  imgData.rackid = serverObj.rackid;
  imgData.nodes = serverObj.nodes; 
  serverImgs.push(imgData);

  img.onload = function() {
      callback_multi(number);
  }(number);
}

function callback_multi(i) {
   var kinImgObj = createrMultiKonvaImage(serverImgs[i]);
   onerackLayer.add(kinImgObj);
   onerackLayer.draw();
}

function createrMultiKonvaImage(imgData) {
  var _imgObj = imgData.imgObj;
  var x = imgData.x;
  var y = imgData.y;
  var width = imgData.width;
  var height = imgData.height;
  var position = imgData.location;
  var imgUrl = imgData.imgUrl;
  var light = '';

  var image = new Konva.Image({
      x: x,
      y: y,
      width : width,
      height : height,
      image : _imgObj,
  });

   return image;
}

Answer 1

将Konva.Image添加到图层后，您需要重绘它：

rackTop.onload = function() {
    var image = new Konva.Image({
        x: 13+x,
        y : y, 
        image: rackTop,
        width: drawer_width + rack_side*2,
        height: Math.ceil(70 * scale_default)
    });
    onerackLayer.add(image);

    onerackLayer.draw(); // this line is important
};