FabricJS: Почему я не могу нажимать на объекты во время анимации? - PullRequest
Новая
       19

FabricJS: Почему я не могу нажимать на объекты во время анимации?

0 голосов
/ 22 мая 2019

Мне нужен круг, который увеличивается с каждой секундой. Если я нажму на круг, он должен исчезнуть.

Хорошо, поэтому я добавил анимацию и функцию mousedown. Но в конце анимации функция 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);

1 Ответ

0 голосов
/ 22 мая 2019

Вам нужно вызвать object # setCoords .в обработчике onChange.

DEMO 

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