Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fabric.js: Positioning bug when rotating a group?

When rotating a group in fabric.js, the .left and .top values of the group "jump". Is that a fabric.js bug or somehow explainable/intended?

group.on "moving", ->
    #Yields values of about 100 px, also after the group was rotated

group.on "rotating", ->
    #Yields values of about 130 px

JSFiddle -> http://jsfiddle.net/thomasf1/X76X9/2/

like image 988
thomasf1 Avatar asked Oct 26 '25 14:10

thomasf1


2 Answers

The difference is due to the originX and originY values changing upon rotation. originX and originY will become 'center' in place of their typical values of 'left' and 'top'. I encountered a similar issue where the positioning would change and found that I needed to be aware of the origin values.

like image 130
whatsTheDiff Avatar answered Oct 29 '25 04:10

whatsTheDiff


I faced similar problem, but not with group, but single object. Solution for me was not taking the top and left positions of rotated object, but top left Oocord x and y position.

For example:

fabricPlace.on('object:modified', function(event){
var object = event.target;

var save = {};
save.position = {};

save.id = object.id;
save.position.y = object.oCoords.tl.y;
save.position.x = object.oCoords.tl.x;
save.position.angle = object.angle;

console.log(object);

changeObject(save);
});
like image 45
Frantisek Avatar answered Oct 29 '25 04:10

Frantisek