Un escenario más «real» para manejar eventos de redimensionamiento es cuando se dibuja en un lienzo. Es muy probable que la escala del lienzo tenga que cambiar al cambiar el tamaño de la pantalla. Ahora construiremos un componente que renderizará un lienzo, dibujará algunas formas en él, y redibujará esas formas a la escala correspondiente cada vez que el navegador sea redimensionado.
Primero, necesitamos una función que tome un lienzo, la escala como parámetro, y dibuje algo en él:
123456789101112131415161718192021functiondraw(canvas, scaleX, scaleY){const context = canvas.getContext("2d"); context.scale(scaleX, scaleY); context.clearRect(0,0, canvas.clientWidth, canvas.clientHeight); context.beginPath(); context.setLineDash([]); context.lineWidth=2; context. strokeStyle="rojo"; context.moveTo(0,100); context.lineTo(scaleWidth,100); context.moveTo(0,400); context.lineTo(scaleWidth,400); context.stroke(); context.lineWidth=1; context.strokeStyle="azul"; context.fillStyle="azul"; context.rect(200,200,100,100); context.fill(); context.closePath();}javascript
Esta función obtiene un contexto de dibujo 2D, lo escala según los parámetros, lo borra y dibuja dos líneas y un rectángulo sólido.
También necesitamos un elemento de lienzo sobre el que dibujar. Necesitamos mantener una referencia a este lienzo usando el gancho useRef; esto permite que el elemento del lienzo sea accedido en otra parte dentro del código del componente:
12const canvas =React.useRef(null);return<canvas ref={canvas} style={{{ancho: "100%", altura: "100%"}}/{{i};;javascript
El ref se inicializa a nulo y se establece en el elemento de lona por el atributo ref en el elemento. Para acceder al elemento de lienzo referenciado se utiliza canvas.current.
Necesitaremos una función que se llame cuando se cambie el tamaño del lienzo que establezca las propiedades de ancho y alto del lienzo al ancho y alto real del lienzo y que establezca la escala del tamaño de la ventana actual. Para los propósitos de esta guía, se usará esta función que usa un ancho y alto de 500 para ser una escala de uno:
12345678constcalculateScaleX=()=> canvas.current.clientWidth/ scaleWidth;constcalculateScaleY=()=> canvas.current.clientHeight/ scaleHeight;constresized=()=>{ canvas. current.width= canvas.current.clientWidth; canvas.current.height= canvas.current.clientHeight;setScale({ x:calculateScaleX(), y:calculateScaleY()});};javascript
La escala necesita ser almacenada en estado de componente y será inicializada a una en ambos ejes de esta manera:
1const[escala, setScale]=Reaccionar.usarEstado({ x:1, y:1});javascript
Cada vez que se cambia el tamaño de la ventana del navegador, necesitamos calcular la escala y actualizar el valor almacenado en el estado de los componentes. Como en el ejemplo anterior, esto se hace usando el gancho de efecto sin segundo parámetro para añadir y quitar oyentes para el evento de redimensionamiento, esta vez llamando a la función de redimensionamiento:
12345React.useEffect(()= >{const currentCanvas = canvas.current; currentCanvas.addEventListener("resize", redimensionado);return()=> currentCanvas.removeEventListener("resize", redimensionado);});javascript
Por último, necesitamos dibujar en el lienzo siempre que la escala cambie. Para ello podemos, de nuevo, utilizar el gancho de efecto pero, esta vez, le daremos un segundo parámetro del valor del estado de la escala. Esto significa que el gancho sólo se ejecutará cuando se cambie la escala. Dentro del gancho, simplemente tenemos que llamar a la función de dibujo pasando el lienzo y las escalas como parámetros:
123React.useEffect(()=,[escala]);
javascript
El componente ahora cambia la escala del lienzo y lo redibuja cada vez que se cambia el tamaño del navegador. El código de este componente se puede encontrar aquí.