Fabric.js-淡出对象并从画布中删除

Question

如何淡出画布上的对象然后删除该对象？

另外，我收到了Uncaught TypeError: activeObj.animate is not a function ，这真是奇怪，正如我在代码编辑器中看到的那样，我有animate方法及其参数可用。 据我所知，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">