Images do not appear completely until mouse click

Question

I found a issue that images are not show like below. It's a canvas that I use konva.js. And the stage is draggable: true. I found the images will now show event if I click this canvas when draggable: false. It's a little like the canvas be reload so all images appear.

After I click this canvas. All images will be showen.

This is some of my code.

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

Maybe if you create a working example of the problem we will have a better chance of helping you — Carsten Løvbo Andersen, Aug 08 '17 at 05:57
there is a space before y here -> y : y, Maybe it does not matter however. Also, 'rackSzie*USize' is a miss spell? (rackSize?) — Icewine, Aug 08 '17 at 06:04
in console you should have recieved an error regarding the Height property, the variable rackSzie not existing.. — almost a beginner, Aug 08 '17 at 06:23
Yes rackSzie is miss spell, but it's a workable code, I will try to build a online working environment later. thanks. — Jay, Aug 08 '17 at 06:39

score 1 · Accepted Answer · answered Aug 08 '17 at 09:50

1

After you added a Konva.Image into a Layer you need to redraw it:

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

answered Aug 08 '17 at 09:50

lavrton

18,973
4
30
63

Thanks lavrton, this works for my rack. But it takes some time. Should I have to draw image after every image be added? And I found the inside (server ) of a rack still not working. I had supplemented this code upper. – Jay Aug 08 '17 at 11:06
You should redraw layer on any changes. – lavrton Aug 08 '17 at 13:46

Images do not appear completely until mouse click

1 Answers1