直到鼠标单击图像才完全显示

Question

我发现了图像不显示的问题，如下所示。我用的是 canvas konva.js。舞台是可拖动的：是的。我发现如果我在可拖动时单击此 canvas，图像现在将显示事件：false。这有点像 canvas 重新加载，所以所有图像都会出现。

我点击这个之后canvas。将显示所有图像。

这是我的一些代码。

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

直到鼠标单击图像才完全显示

Images do not appear completely until mouse click

javascript

jquery

konvajs