Fabric.js - 개체를 페이드 아웃하고 캔버스에서 제거

Question

캔버스에서 개체를 어떻게 페이드 아웃 한 다음 해당 개체를 제거합니까?

또한 Uncaught TypeError: activeObj.animate is not a function을 얻고 있습니다. 코드 편집기에서 애니메이션 메서드와 해당 매개 변수를 사용할 수 있으므로 실제로 이상합니다. 애니메이트는 내가 볼 수있는 한 캔버스에있는 모든 객체에 사용할 수 있어야합니다.

var activeObj = canvas.getActiveObject(); 

activeObj.setOpacity(1); 
activeObj.animate('opacity', '0', { 
    onChange: canvas.renderAll.bind(canvas) }); 
}; 
canvas.remove(activeObj); 

Answer 1

내가 위의 코드에 문제가 호출이 애니메이션이 완료되기 전에 객체가 일어나고 제거 할 수 있다고 믿습니다 :

는 여기에 지금까지 무슨이다. 애니메이션이 끝난 후 객체를 제거하려면 onComplete 옵션을 사용해야합니다.

var canvas = new fabric.Canvas('t'); 
 
var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100 }); 
 
canvas.add(circle); 
 
canvas.setActiveObject(circle); 
 
var activeObj = canvas.getActiveObject(); 
 

 
activeObj.setOpacity(1); 
 

 
activeObj.animate('opacity', '0', { 
 
    duration: 1000, 
 
    onChange: canvas.renderAll.bind(canvas), 
 
    onComplete: function() { 
 
    canvas.remove(activeObj); 
 
    } 
 
});

canvas { 
 
border:1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 

 
<canvas id="t" height="300" width="300">