CODEWITHSUNDEEP
javascriptfabricjs
Vitozz_RDX
Vitozz_RDX

Reputation: 166

How to animate line-drawing in Fabric

It is not very hard to animate line-drawing in clear Canvas, but i don't understand how do it in Fabric . For example i got this line :

var L = new fabric.Line([50, 100, 200, 200], {
    left: 170,
    top: 150,
    stroke: 'red'
})

and i need that one of its end started to continue till next point ( like a pencil drawing the line ). I know that there is a function 'animate' , but with 

L.animate('left', 50, {
onChange: canvas.renderAll.bind(canvas),
duration: 3000
});

my line only changes its top-left coordinates , not changing itself

Upvotes: 2

Views: 786

Answers (1)

Durga
Durga

Reputation: 15604

You need to pass the animate property as object in first argument

{
  x2: 200,
  y2: 200
}

DEMO

var canvas = new fabric.Canvas('canvas');
var line = new fabric.Line([50,100,50,100],{
  left: 170,
  top: 150,
  stroke: 'red'
});
canvas.add(line);
line.animate({
  x2: 200,
  y2: 200
}, {
  onChange: canvas.renderAll.bind(canvas),
  onComplete: function() {
    line.setCoords();
  },
  duration: 3000
});
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>

Upvotes: 2

Related Questions