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

szqfcxe2  于 2023-05-12  发布在  Java
关注(0)|答案(6)|浏览(234)

我在我的Fabric.js上使用覆盖图像,它是这样添加的:

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

我的问题是,我找不到一个方法来删除它从画布。要删除对象,我可以使用类fabric.StaticCanvas中的remove(object),但我还没有找到一种方法来将覆盖图像作为该方法的对象。我尝试将叠加图像设置为null

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

但没有用

kninwzqo

kninwzqo1#

查看源代码,它几乎看起来像一个错误,您不能以您期望的方式将其设置为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);
vof42yt1

vof42yt12#

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

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

ctzwtxfj3#

而不是Null,只是使其空白。

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

zbq4xfa04#

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

self.canvas.backgroundImage = 0;
2skhul33

2skhul335#

我能想到的唯一的变通方法是将不透明度设置为

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

k3bvogb16#

这是我找到的唯一解决办法。canvas.overlayImage?.dispose()我发现在源代码中使用。

canvas.overlayImage?.dispose();
canvas.setOverlayImage('', canvas.renderAll.bind(canvas));

相关问题