如何从Fabric.js画布中删除叠加图像？

Question

我在Fabric.js上使用叠加图像,它添加如下:

canvas.setOverlayImage('image.png', canvas.renderAll.bind(canvas));

我的问题是我找不到方法从画布中删除它.要删除我可以remove(object)在类中使用的对象fabric.StaticCanvas,但我还没有找到如何将覆盖图像作为对象提供给此方法的方法.我试图将叠加图像设置为null:

canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));

但它没有帮助.

Answer 1

查看源代码,它几乎看起来像一个错误,你无法以你期望的方式将其设置为null(作为setOverlayImage的参数).查看static_canvas.class.js,您会看到以下源代码setOverlayImage():

setOverlayImage: function (url, callback) { // TODO (kangax): test callback
  return fabric.util.loadImage(url, function(img) {
    this.overlayImage = img;
    callback && callback();
  }, this);
}

在util/misc.js中,您可以看到以下源代码util.loadImage():

function loadImage(url, callback, context) {
  if (url) {
    var img = new Image();
    /** @ignore */
    img.onload = function () { 
      callback && callback.call(context, img);
      img = img.onload = null;
    };
    img.src = url;
  }
}

因此,您可以看到是否将null传递给setOverlayImage(),null将依次作为参数util.loadImage().如果后者的参数为null,则该方法不执行任何操作,因此整个操作无效.

看起来你必须作弊并直接在canvas对象上设置属性:

canvas.overlayImage = null;
canvas.renderAll.bind(canvas);