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;
}
}
Let's visualize your problem:
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.