javascript - 如何从 Fabric.js Canvas 中删除叠加图像？

Question

我在我的 Fabric.js 上使用叠加图像，它是这样添加的:

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

我的问题是我找不到将它从 Canvas 中删除的方法。要删除对象，我可以使用 fabric.StaticCanvas 类中的 remove(object)，但我还没有找到如何将叠加图像作为对象提供给此方法的方法。我尝试将叠加图像设置为 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);