Как анимировать рисование линий в ткани - PullRequest
Новая
       5

Как анимировать рисование линий в ткани

0 голосов
/ 06 мая 2018

Не очень сложно анимировать рисование линий в чистом Canvas, но я не понимаю, как это сделать в Fabric. Например, я получил эту строку: 

var L = new fabric.Line([50, 100, 200, 200], {
    left: 170,
    top: 150,
    stroke: 'red'
})

и мне нужно, чтобы один из его концов продолжался до следующей точки (как карандаш, рисующий линию). Я знаю, что есть функция «оживить», но с 

L.animate('left', 50, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000
});

моя линия только меняет свои верхние левые координаты, не изменяя себя

1 Ответ

0 голосов
/ 07 мая 2018

Вам необходимо передать свойство animate в качестве объекта в первом аргументе 

{
  x2: 200,
  y2: 200
}

DEMO 

var canvas = new fabric.Canvas('canvas');
var line = new fabric.Line([50,100,50,100],{
  left: 170,
  top: 150,
  stroke: 'red'
});
canvas.add(line);
line.animate({
  x2: 200,
  y2: 200
}, {
  onChange: canvas.renderAll.bind(canvas),
  onComplete: function() {
    line.setCoords();
  },
  duration: 3000
});
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>
...