Fabric.js - 淡出物体并从画布中移除

Question

如何在画布上淡出某个物体，然后移除该物体？

此外，我得到Uncaught TypeError: activeObj.animate is not a function，这是非常奇怪的，因为我可以在我的代码编辑器中看到我有动画方法和它的参数可用。就我所知，Animate应该可以在画布上的任何对象上使用。

这是我到目前为止有：

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">