Konvajs 如何动态更改图像 src
Konvajs How to change image src dynamically
我创建了一个像这样的 Konva 图像
var imageObj = new Image();
imageObj.onload = function() {
var image = new Konva.Image({
x: 200,
y: 50,
image: imageObj,
width: 100,
height: 100
});
};
imageObj.src = '/path/to/image.jpg'
现在我需要知道如何更新创建的 Konva.Image 对象的图像 src/url。
您可以只替换 Konva.Image
的 image
属性。或更新 src
原生图像:
var card = new Konva.Image({
x: 200,
y: 50,
width: 100,
height: 100
});
var imageObj = new Image();
imageObj.onload = function() {
card.image(imageObj);
};
imageObj.src = '/path/to/image.jpg';
// later
var imageObj2 = new Image();
imageObj2.onload = function() {
card.image(imageObj2);
};
imageObj2.src = '/path/to/image.jpg';
或者
var imageObj = new Image();
var card = new Konva.Image({
x: 200,
y: 50,
width: 100,
height: 100,
image: imageObj
});
imageObj.onload = function() {
card.getLayer().draw();
};
imageObj.src = '/path/to/image.jpg';
// later
imageObj2.src = '/path/to/image.jpg'; // it should trigger onload
我创建了一个像这样的 Konva 图像
var imageObj = new Image();
imageObj.onload = function() {
var image = new Konva.Image({
x: 200,
y: 50,
image: imageObj,
width: 100,
height: 100
});
};
imageObj.src = '/path/to/image.jpg'
现在我需要知道如何更新创建的 Konva.Image 对象的图像 src/url。
您可以只替换 Konva.Image
的 image
属性。或更新 src
原生图像:
var card = new Konva.Image({
x: 200,
y: 50,
width: 100,
height: 100
});
var imageObj = new Image();
imageObj.onload = function() {
card.image(imageObj);
};
imageObj.src = '/path/to/image.jpg';
// later
var imageObj2 = new Image();
imageObj2.onload = function() {
card.image(imageObj2);
};
imageObj2.src = '/path/to/image.jpg';
或者
var imageObj = new Image();
var card = new Konva.Image({
x: 200,
y: 50,
width: 100,
height: 100,
image: imageObj
});
imageObj.onload = function() {
card.getLayer().draw();
};
imageObj.src = '/path/to/image.jpg';
// later
imageObj2.src = '/path/to/image.jpg'; // it should trigger onload