我在Fabric.js上使用叠加图像,并添加如下:
canvas.setOverlayImage('image.png', canvas.renderAll.bind(canvas));
我的问题是我无法找到从画布中删除它的方法。要删除对象,我可以使用remove(object)
类中的fabric.StaticCanvas
,但我还没有找到如何将叠加图像作为此方法的对象提供的方法。我尝试将叠加图像设置为null
:
canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));
但它没有帮助。
答案 0 :(得分:8)
查看源代码,它几乎看起来像一个错误,你无法以你期望的方式将其设置为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);
答案 1 :(得分:0)
我创建了一个切换,可以在叠加图像和空叠加之间切换。在Kangax更新代码之后,这是可能的:
function toggleOverlay(){
if(!canvas.overlayImage){
canvas.setOverlayImage(
'img/transparent-overlay.png',
canvas.renderAll.bind(canvas)
);
}else{
canvas.setOverlayImage(null, canvas.renderAll.bind(canvas));
}
}
答案 2 :(得分:0)
而不是Null只是让它变成空白。
canvas.setOverlayImage('', canvas.renderAll.bind(canvas));
答案 3 :(得分:0)
我发现了同样的问题
我通过设置backgroundImage = 0
self.canvas.backgroundImage = 0;
答案 4 :(得分:0)
我能想到的唯一解决方法是将不透明度设置为 0
canvas.overlayImage.set('opatcity', 0)
canvas.renderAll()