javascript - 如何从 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);

Answer 2

而不是 Null 只是使其空白。

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

Answer 3

我创建了一个切换，它在覆盖图像和空覆盖之间交替。在 Kangax 更新代码后，这是可能的：

function toggleOverlay(){
    if(!canvas.overlayImage){
        canvas.setOverlayImage(
            'img/transparent-overlay.png', 
            canvas.renderAll.bind(canvas)
        );
    }else{
        canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));
    }
}

Answer 4

我发现
我通过设置 backgroundImage = 0 解决了同样的问题

self.canvas.backgroundImage = 0;

Answer 5

我能想到的唯一解决方法是将不透明度设置为 0

canvas.overlayImage.set('opatcity', 0)
canvas.renderAll()