CODEWITHSUNDEEP
javascriptcanvasfabricjs
S4M
S4M

Reputation: 4661

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

I can draw a line in the canvas using:

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

However, I want to animate the drawing. I tried: 

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

But it's not working, and I couldn't see any way to animate the drawing of the line using fabric.js - I know I can use canvas methods directly but I am curious is fabric.js offers something more concise.

Upvotes: 2

Views: 1703

Answers (2)

olaf
olaf

Reputation: 65

No solution suited me so far so here a js-fiddle with what i came up with. Its based on the prev solution by Nistor Christian:

I Made a simple function which accepts the Canvas (in case you want to use this on more than one canvas), color, the original Line-Koordinates (StartXY, EndXY) and the new Line-Koordinates (NewStartX,NewStartY). 

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

Upvotes: 1

Nistor Cristian
Nistor Cristian

Reputation: 1266

I made a jsFiddle based on http://fabricjs.com/polygon-animation/ and I change it into a fabricjs Polyline. You can set the start and end values from here:

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

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

Upvotes: 4

Related Questions