Изображения не отображаются полностью, пока не щелкнет мышью

Я обнаружил, что изображения не отображаются, как показано ниже. Это холст, который я использую konva.js. И сцена перетягивается: правда. Я обнаружил, что изображения теперь будут отображать событие, если я щелкну этот холст при перетаскивании: 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;
}

person Jay    schedule 08.08.2017    source источник
comment
Может быть, если вы создадите рабочий пример проблемы, у нас будет больше шансов помочь вам   -  person Carsten Løvbo Andersen    schedule 08.08.2017
comment
здесь перед y стоит пробел - ›y: y, но, может быть, это не имеет значения. Кроме того, «rackSzie * USize» - это заклинание «промах»? (размер стойки?)   -  person Icewine    schedule 08.08.2017
comment
в консоли вы должны были получить ошибку относительно свойства Height, переменная rackSzie не существует.   -  person almost a beginner    schedule 08.08.2017
comment
Да, rackSzie - это промах, но это работоспособный код, позже я попытаюсь создать рабочую среду в Интернете. Благодарю.   -  person Jay    schedule 08.08.2017


Ответы (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
};
person lavrton    schedule 08.08.2017
comment
Спасибо, lavrton, это работает для моей стойки. Но на это нужно время. Должен ли я рисовать изображение после добавления каждого изображения? И я обнаружил, что внутренняя часть (сервер) стойки все еще не работает. Я дополнил этот код сверху. - person Jay; 08.08.2017
comment
При любых изменениях слой следует перерисовывать. - person lavrton; 08.08.2017