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

【问题标题】：Animating the drawing of a line in the canvas with fabric.js使用fabric.js在画布中绘制一条线的动画
【发布时间】：2016-09-23 16:50:18
【问题描述】：

我可以在画布上画一条线：

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

【问题讨论】：

【解决方案1】：

我在http://fabricjs.com/polygon-animation/ 的基础上制作了一个jsFiddle，并将其更改为fabricjs Polyline。您可以从这里设置开始和结束值：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：