CODEWITHSUNDEEP
javascriptcanvasfabricjs
Ayan Pal
Ayan Pal

Reputation: 99

FabricJS: How to get the positions of an updated path

I was creating some visual elements using Fabric js. In my project, the path's were getting updated. But the issue is, the path's measurements were not as expected.

Refrer to jsFiddle

var canvas = new fabric.Canvas('c', {width: 400, height: 400});

var line = new fabric.Path('M,50,50,L,50,150,150,150,150,50,Z', {            
    fill: 'blue'

});

line.setCoords();

// During update
line.initialize('M,150,50,L,150,150,300,150,300,50,Z')
line.setCoords();
canvas.renderAll();

In the sample the path was initially drawn 50px away from the canvas left border. Then I have changed the path command so that it move's 100px towards the right.

But after updating the path, the shape is actually positioned at 175px away from the left. Also, the left property of the path element is not changed.

Also, unable to get the idea of all these properties and their relations like, left, top, scaleX, scaleY, height, width, pathOffset, oCoords, originalState etc in various conditions like the path / canvas is scaled, rotated, moved, placed inside a group etc.

Upvotes: 0

Views: 1551

Answers (1)

BKR
BKR

Reputation: 443

I'm not sure what you are trying to achieve but the initialize method is not an update method but it's the constructor of the class, you are practically overriding the initial object's path.

If your are just trying to move around your original created path you should play with left, top properties of the Path object like in this updated fiddler

Upvotes: 1

Related Questions