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

Question

我可以使用以下方法在 canvas 中画一条线：

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 提供了更简洁的内容。

Answer 1

我做了一个jsFiddle based on 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（以防你想在多个 canvas 上使用它）、颜色、原始线坐标（StartXY、EndXY）和新的直线坐标 (NewStartX,NewStartY)。

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

Animating the drawing of a line in the canvas with fabric.js