javascript - 如何在 Fabric 中制作线条画动画

Question

在清晰的 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
});

我的线只改变了它的左上角坐标，而不改变本身

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