Fabric.js 캔버스에서 오버레이 이미지를 제거하는 방법은 무엇입니까?

Question

나는 나의 Fabric.js에 오버레이 이미지를 사용하고이 같은 추가됩니다

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

내 문제는 내가 캔버스에서 제거하는 방법을 찾을 수 있다는 것입니다. 개체를 제거하려면 fabric.StaticCanvas 클래스의 remove(object)을 사용할 수 있지만이 방법의 개체로 오버레이 이미지를 제공하는 방법을 찾지 못했습니다. 도움이되지 않았다

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

하지만 : 나는 null에 오버레이 이미지를 설정하기 위해 시도 할 수 있습니다.

Answer 1

소스 코드를 보면, 예상대로 (setOverlayImage에 대한 매개 변수로) 널 (null)로 설정할 수없는 버그처럼 보입니다. 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; 
    } 
} 

그래서 당신은 당신이, setOverlayImage()에 널 의지를 null을 전달하면 볼 수 있습니다 인자는 util.loadImage()이됩니다. 후자에 대한 인수가 null 인 경우 메서드는 아무 작업도 수행하지 않으므로 전체 연산은 아무 것도 수행하지 않습니다.

canvas.overlayImage = null; 
canvas.renderAll.bind(canvas); 

Answer 2

내가 오버레이 이미지 및 null 오버레이를 가진 번갈아 토글을 만들어 : 당신이 속임수가 직접 canvas 개체의 속성을 설정처럼

는 것 같습니다. 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;