Acabo de terminar un curso sobre React y estoy transfiriendo un proyecto JS previo de Vanilla a React como ejercicio de aprendizaje.
En mi código anterior (que funciona correctamente) tengo una pila de 2 lienzos HTML con una imagen cargada en el ctx inferior y un rectángulo blanco cargado en el ctx superior. Luego uso el detector de eventos 'mousemove' de JS para borrar el rectángulo blanco en la parte superior para revelar la imagen a continuación.
Creo que estoy muy cerca de la solución en mi código React . (Si sigue el enlace, solo verá una página en blanco; ese es el rectángulo blanco en la parte superior de la imagen. He verificado que la imagen está efectivamente debajo).
Cargué la imagen inferior y el rectángulo superior dentro de useEffect() para que React no obtenga ningún ctx de lienzo indefinido cuando el componente se renderiza por primera vez. Sin embargo, tengo dificultades para conectar la funcionalidad de mi borrador en 'eraseImageHandler'. ¿Alguna idea de lo que puedo estar haciendo mal? Gracias.
En el renderizado inicial, no sabe qué tan grande es la imagen, por lo que no puede calcular correctamente los tamaños del lienzo. Si la imagen tuviera un tamaño intrínseco como el que se muestra a continuación, sería capaz de calcularlo.
<Fragment> <div className={classes.stack}> <canvas ref={bottomCanvasRef} /> <canvas ref={topCanvasRef} onMouseMove={eraseImageHandler} /> </div> <img ref={imageRef} hidden width={300} height={300} src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg" alt="Flower" /> </Fragment>