CODEWITHSUNDEEP
fabricjs
Ying Yangz
Ying Yangz

Reputation: 177

How to get individual object's width, height, left and top in selection:created event?

I am getting the values of the properties of an object(top,width...) as an object is being scaled/moved by using this function :

canvas.on('object:scaling', onObjectModification);
canvas.on('object:moving', onObjectModification);
canvas.on('object:rotating', onObjectModification);
function onObjectModification(e) {
    var activeObject = e.target;
    var reachedLimit = false;
    objectLeft = activeObject.left,
    objectTop = activeObject.top,
    objectWidth = activeObject.width,
    objectHeight = activeObject.height,
    canvasWidth = canvas.width,
    canvasHeight = canvas.height;
}

How can I get the same for each object that are being moved as a group? I need the values to be constantly changing as the object:scaling event provide.

I know of the event selection:created but I am lost how to use that to attain what I want. Any help from you guys would be highly appreciated. Thanks

Upvotes: 4

Views: 5637

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

during object scaling width and height will not change. They will be the same all the time, just scaleX and scaleY will change.

You have to write a function that will iterate on possibile group sub objects.

canvas.on('object:scaling', onObjectModification);
canvas.on('object:moving', onObjectModification);
canvas.on('object:rotating', onObjectModification);
function onObjectModification(e) {
    var activeObject = e.target;
    if (!activeObject) {
      return;
    }
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var reachedLimit = false;
    var objectLeft = activeObject.left;
    var objectTop = activeObject.top;
// this provide scaled height and width
    var objectWidth = activeObject.getWidth();
    var objectHeight = activeObject.getHeight();
    if (activeObject._objects) {
        objs = activeObject._objects;
        for (var i= 0; i < objs.length; i++) {
            var obj = objs[i];
            var objWidth = activeObject.getWidth() * activeObject.scaleX;
            var objHeight = activeObject.getHeight() * activeObject.scaleY;  
        }
    }
}

Upvotes: 5

Related Questions