使用fabric.js在画布中绘制线条的动画

Question

我可以使用以下方法在画布上画一条线：

var myLine = new fabric.Polyline([{x:200,y:200},{x:200,y:200}])
var canvas  = new fabric.Canvas('c');
canvas.add(myLine);

但是，我想为绘图设置动画。我试过了：

myLine.animate("points","[{x:200,y:200},{x:10,y:10}]",{onChange: canvas.renderAll.bind(canvas)})

但是它不起作用，我看不到使用fabric.js动画绘制线的任何方法 - 我知道我可以直接使用canvas方法但我很好奇的是fabric.js提供了更简洁的东西。 / p>

Answer 1

我根据jsFiddle制作了http://fabricjs.com/polygon-animation/，然后将其更改为fabricjs Polyline。您可以从此处设置起始值和结束值：

var startPoints = [
   {x: 1, y: 1},
   {x: 2, y: 2}
];

var endPoints = [
   {x: 1, y: 1},
   {x: 200, y: 200}
];

Answer 2

到目前为止，还没有适合我的解决方案，所以这里有js-fiddle我想出的东西。它基于Nistor Christian的解决方案：

我做了一个简单的函数，接受Canvas（如果你想在多个画布上使用它），颜色，原始的Line-Koordinates（StartXY，EndXY）和新的Line-Koordinates（NewStartX，NewStartY） 。

function animateLine(canvasInstance,color,
  startX,startY,endX,endY,
  newStartX, newStartY,newEndX,newEndY)