Tengo un lienzo en una aplicación de reacción en el que puedo acercar la imagen y moverla hacia la derecha/izquierda/arriba/abajo. Quiero poder calcular el tamaño de desbordamiento de la imagen para poder limitar las acciones de izquierda/derecha/arriba/abajo cuando no haya más espacio.

Aquí está la aplicación de trabajo: https://codesandbox.io/s/reverent-mestorf-9gd1t?file=/src/App.js

Como puede ver, cuando aleja la imagen, la imagen ya no se rellenará dentro del lienzo. Quiero poder deshabilitar el botón de alejamiento cuando la imagen va a ser más pequeña que el lienzo.

También quiero poder deshabilitar los botones de movimiento hacia la derecha/izquierda/arriba/abajo cuando no haya más espacio en la imagen para moverse.

el comportamiento actual solo muestra espacios vacíos dentro del lienzo.

Aquí está el código del lienzo dentro de mi useEffect, cada vez que src, x, y y la escala cambien, renderizaremos el lienzo.

 useEffect(() => { if (src) { const canvas = canvasRef.current const canvasContext = canvas?.getContext('2d') const imageObj = new Image() imageObj.onload = () => { if (canvas) { const hRatio = canvas.width / imageObj.width const vRatio = canvas.height / imageObj.height // Calculate ratio so the image is filled inside canvas const ratio = Math.max(hRatio, vRatio) canvasContext?.clearRect(0, 0, canvas.width, canvas.height) canvasContext?.drawImage( imageObj, x, y, imageObj.width, imageObj.height, 0, 0, // for zooming scale is between 0 and 2 imageObj.width * ratio * scale, imageObj.height * ratio * scale ) } } imageObj.src = src } }, [src, x, y, scale])