javascript - Konvajs 如何动态更改图像 src

Question

我创建了这样的 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。

您可以在此处找到文档：https ://konvajs.github.io/api/Konva.Image.html

Answer 1

您可以只替换image. Konva.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