Tengo un método de escalado para mis objetos Fabric.js, por lo que no se escalan fuera de los bordes. Pero cuando giro los objetos, el método de escalado no funciona correctamente. Supongo que el método de escalado no tiene en cuenta que la parte superior anterior ahora es el lado derecho del objeto. ¿Alguien sabe cómo hacer que tenga en cuenta la rotación al escalar?
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; } }Visualicemos tu problema:
Un enfoque simple para esto sería agrandar el contenedor que usa, de modo que sus límites no se desborden incluso si el contenido gira. El escenario del peor de los casos es cuando la cantidad de rotación es (n + 1) * pi / 4, donde n es un número natural.