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

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

本文关键字：一条 绘制 动画 fabric js 使用      更新时间：2023-09-26

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

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

然而，我想动画的绘图。I tried: 

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

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

我做了一个基于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}
];

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

我做了一个简单的函数，接受画布(如果你想在多个画布上使用它)，颜色，原始的线坐标(StartXY, EndXY)和新的线坐标(NewStartX,NewStartY)。

function animateLine(canvasInstance,color,
  startX,startY,endX,endY,
  newStartX, newStartY,newEndX,newEndY)
相关文章：