如何从Fabric.js画布中删除覆盖图像？

Question

我在我的Fabric.js上使用覆盖图像，它的添加方式如下：

canvas.setOverlayImage('image.png', canvas.renderAll.bind(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);

Answer 2

我创建了一个切换，该切换在具有叠加层图像和空叠加层之间切换。 在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 3

代替Null只是将其留空。

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

Answer 4

我发现了同样的问题
我通过设置backgroundImage = 0来修复

self.canvas.backgroundImage = 0;