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选项删除对象。

＆＃13;

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);
  }
});

＆＃13;

canvas {
border:1px solid;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>

<canvas id="t" height="300" width="300">

＆＃13;

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

1 个答案: