Sunday, 15 August 2021

My fabric.js sclaing methods don't work after object rotation

I have a scaling method for my Fabric.js objects, so they don't scale outside of the borders. But when I rotate the objects, the scaling method does not work correctly. My guess is that the scaling method does not take in account that the old top is now the right side of the object. Does someone know how to make it take the rotation in account when scaling?

let scalingProperties = {
    'left': 0,
    'top': 0,
    'scaleX': 0,
    'scaleY': 0
}

export function scaling(e) {
    const shape = e.target;
    const maxWidth = shape.canvas.width;
    const maxHeight = shape.canvas.height;

    //left border
    if(shape.left < 0) {
        shape.left = scalingProperties.left = 0;
        shape.scaleX = scalingProperties.scaleX;
    } else {
        scalingProperties.left = shape.left;
        scalingProperties.scaleX = shape.scaleX;
    }

    //right border
    if((shape.scaleX * shape.width) + shape.left > maxWidth) {
        shape.scaleX = (maxWidth - scalingProperties.left) / shape.width;
    } else {
        scalingProperties.scaleX = shape.scaleX;
    }

    //top border
    if(shape.top < 0) {
        shape.top = scalingProperties.top = 0;
        shape.scaleY = scalingProperties.scaleY;
    } else {
        scalingProperties.top = shape.top;
        scalingProperties.scaleY = shape.scaleY;
    }

    //bottom border
    if((shape.scaleY * shape.height) + shape.top > maxHeight) {
        shape.scaleY = (maxHeight - scalingProperties.top) / shape.height;
    } else {
        scalingProperties.scaleY = shape.scaleY;
    }
}


from My fabric.js sclaing methods don't work after object rotation

No comments:

Post a Comment