如何在 Fabric 中为线条绘制设置动画

【问题标题】：How to animate line-drawing in Fabric如何在 Fabric 中为线条绘制设置动画
【发布时间】：2018-05-07 14:24:20
【问题描述】：

在清晰的 Canvas 中为线条画制作动画并不难，但我不明白如何在 Fabric 中进行。例如，我得到了这一行：

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

我需要它的一端开始持续到下一点（就像铅笔画线一样）。我知道有一个功能 'animate' ，但有

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

我的线只改变它的左上角坐标，不改变自己

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

您需要在第一个参数中将 animate 属性作为对象传递

{
  x2: 200,
  y2: 200
}

演示

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>

【讨论】：