我发现了一个问题,图像不能像下面这样显示。这是我使用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;
}发布于 2017-08-08 17:50:26
将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
};https://stackoverflow.com/questions/45560305
复制相似问题