0
155
VistasDetectar un elemento ha sido redimensionado por un usuario con React
Tengo un componente React que representa un lienzo y dibuja polígonos en él:
function Plot(props) { const [localPlot, setLocalPlot] = useState(props.plot); ... useEffect(() => { // here we get the Canvas context and draw polygons to it }, [localPlot]); return ( <> <div style={{ resize: "both", border: "1px solid #32a1ce", overflow: "auto", }} ref={ref} > <canvas style={{ border: "thick solid #32a1ce" }} className="canvas" id={`canvas-${props.plotIndex}`} /> </div> ); Ahora quiero permitir que el usuario pueda cambiar el tamaño del lienzo, así que lo hice posible con el div alrededor y resize: "both" . Estoy usando la biblioteca react-resize-detector para detectar cuándo se ha cambiado el tamaño del div:
function Plot(props) { const [localPlot, setLocalPlot] = useState(props.plot); ... useEffect(() => { // here we get the Canvas context and draw polygons to it }, [localPlot]); const onResize = useCallback((w, h) => { // on resize logic console.log("in onResize, w, h is ", w, h); }, []); const { width, height, ref } = useResizeDetector({ onResize, }); return ( <> <div style={{ resize: "both", border: "1px solid #32a1ce", overflow: "auto", }} ref={ref} > <canvas style={{ border: "thick solid #32a1ce" }} className="canvas" id={`canvas-${props.plotIndex}`} </div> );El problema es que desde que agregué esto, el lienzo está en blanco. Creo que esto se debe a que onResize se llama después del renderizado y, de alguna manera, borra todo en el lienzo. Cuando cambio a:
const { width, height, ref } = useResizeDetector({ handleHeight: false, refreshMode: 'debounce', refreshRate: 1000, onResize });Veo los polígonos en el lienzo por un segundo, antes de que se borren. ¿Qué estoy haciendo mal?
1 Respuestas
Responde la pregunta0
Puede usar una combinación de estado y efecto para volver a pintar el lienzo cuando se cambia de tamaño.
He aquí un ejemplo simplificado:
function Plot() { const onResize = useCallback((w, h) => { setSize({ w, h }); }, []); const canvasRef = useRef(); const { ref } = useResizeDetector({ onResize }); const [size, setSize] = useState({ w: 300, h: 300 }); useEffect(() => { const ctx = canvasRef.current.getContext("2d"); ctx.fillStyle = "green"; ctx.font = "18px serif"; ctx.fillText(`${size.w} x ${size.h}`, 10, 50); }, [size]); return ( <div id="resizer" ref={ref}> {/* subtract 10 for the resize corner in the enclosing div */} <canvas ref={canvasRef} width={size.w - 10} height={size.h - 10} /> </div> ); } Puedes ver una demo completa aquí:
