Tengo algunos problemas para intentar que mi Canvas/Stage cambie de tamaño y se ajuste correctamente dentro del contenedor principal. Encontré otras publicaciones similares y, aunque las respuestas me ayudaron a obtener el nuevo tamaño de pantalla, todavía no quiere caber dentro del contenedor y, en cambio, va directamente a los bordes de la pantalla (lo que se espera de los ejemplos), repasando el contenedor principal con el contenido izquierdo/derecho.
Probé muchas formas diferentes, pero aún no puedo encontrar la forma correcta en la que no sale del contenedor principal y la escala X/Y no descarta la posición de la forma dentro del lienzo. La forma más obvia para mí fue establecer una restricción en el lienzo/escenario real a través de CSS, pero eso termina eliminando la escala y haciendo que la forma aparezca fuera del lienzo.
En el enlace del código, incluí mi enfoque hacky que estaba tratando de hacer y, aunque parece correcto en algunos casos con pantallas de dispositivos más pequeñas, el ancho del lienzo seguirá estando fuera del contenedor principal. No estoy seguro de si estoy pensando demasiado en esto o si hay una manera mucho más simple de abordar mi problema, cualquier ayuda o consejo sería genial.
Caja de arena de código en vivo: https://codesandbox.io/s/white-surf-yc2vh
Imagen del resultado deseado: https://imgur.com/a/w0oXxG0
Creo que lo que quiere / necesita es cambiar el tamaño del lienzo para que encaje en el contenedor, manteniendo la relación de aspecto que ha especificado.
Puede usar esta función para cambiar el tamaño de un rectángulo (rect) para que encaje en otro rectángulo (contenedor):
// fit a rect into some container, keeping the aspect ratio of the rect export const fitRectIntoContainer = (rectWidth, rectHeight, containerWidth, containerHeight) => { const widthRatio = containerWidth / rectWidth; // ration container width to rect width const heightRatio = containerHeight / rectHeight; // ration container height to rect height const ratio = Math.min( widthRatio, heightRatio ); // take the smaller ratio // new rect width and height, scaled by the same ratio return { width: rectWidth * ratio, height: rectHeight * ratio, }; };Luego puede cambiar el tamaño del lienzo para que encaje en el contenedor:
const canvasSize = fitRectIntoContainer( 700, 600, size.width, size.height ); const canvasWidth = canvasSize.width; const canvasHeight = canvasSize.height;Entonces supongo que ya no necesita ninguna escala (por lo que scaleX y scaleY pueden ser 1 o indefinidos)