首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在单击鼠标之前,图像不会完全显示

在单击鼠标之前,图像不会完全显示
EN

Stack Overflow用户
提问于 2017-08-08 13:56:24
回答 1查看 509关注 0票数 2

我发现了一个问题,图像不能像下面这样显示。这是我使用konva.js的画布。而且舞台是可拖动的:真的。我发现如果我在draggable: false的时候点击这个画布,图像将会显示事件。这有点像重新加载画布,所以所有图像都会显示出来。

在我点击这个画布之后。所有的图像都将被展示。

这是我的一些代码。

代码语言:javascript
运行
复制
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;
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-08 17:50:26

Konva.Image添加到层中后,需要重新绘制它:

代码语言:javascript
运行
复制
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
};
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45560305

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档