Question

我需要一个圆，它每秒钟变大。如果我单击圆圈，它应该会消失。

好，所以我添加了动画和鼠标按下功能。但是在动画结束时，mousedown功能不起作用。

该圆不再被识别，并且在动画结束之前为空。

有什么建议吗？

MyCode：

let canvas = new fabric.Canvas('c');

var temp = new fabric.Circle({
        left: 0,
        top: 0,
        fill: 'red',
        radius: 20
    });

temp.on('mousedown', function(e){
        console.log("clicked");
});

temp.selectable = false;

canvas.add(temp);

function animate(c){
    c.animate('radius', '80',{
        duration: 6000,
        onChange: canvas.renderAll.bind(canvas)
    });

}

animate(temp);

Answer 1

您需要致电object#setCoords。在onChange处理程序中。

演示

let canvas = new fabric.Canvas('c');

var temp = new fabric.Circle({
  left: 0,
  top: 0,
  fill: 'red',
  radius: 20,
  selectable: false
});

temp.on('mousedown', function(e) {
  console.log("clicked");
  canvas.remove(temp);
  temp.isRemoved = true;
});

canvas.add(temp);

function animate(c) {
  c.animate('radius', '80', {
    duration: 6000,
    onChange: function() {
      c.setCoords();
      canvas.requestRenderAll();
    },
    abort: function() {
      return c.isRemoved;
    }
  });

}

animate(temp);

canvas {
    border: 1px solid #999;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.js"></script>
<canvas id='c' width=300 height=200></canvas>
<div id='result'></div>
<div id='result2'>

</div>

FabricJS：为什么在动画过程中不能单击对象？

1 个答案: