2

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;
    }
}
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
Marcel
  • 398
  • 2
  • 4
  • 22
  • Could you make a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) for this? – Robson Aug 15 '21 at 12:52
  • @Robson http://jsfiddle.net/melchiar/5f8apxno When you drag the rectangle down a little, and then rotate it 90 degrees to the right. Then try and stretch it to the right border, you see what i mean – Marcel Aug 16 '21 at 13:28
  • @Robson is this example useful? – Marcel Aug 18 '21 at 07:33
  • This should solve the issue: https://stackoverflow.com/a/56366195/4450938 – Jamal Aug 21 '21 at 23:09
  • @Jamal It does not solve the issue for me. That also has an issue with scaling after rotation. If you place it against the left border and try the use case I described in the comment above, you can see that it. – Marcel Aug 23 '21 at 07:48

1 Answers1

0

Let's visualize your problem:

enter image description here

A simple approach for this would be to enlarge the container you use, so its bounds would not be overflown even if the content rotates. The worst-case-senario is when the rotation's amount is (n + 1) * pi / 4, where n is a natural number.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • My explanation was maybe not the best. The problem is not really with the boundaries of the object, but more with not scaling properly. If you could maybe look at the comment I left under my question you can see what I mean. – Marcel Aug 15 '21 at 20:08