0
157
VistasRueda del ratón (zoom) sobre lienzo img
Reaccionar principiante aquí, tengo un lienzo donde está img, quería implementar el zoom cuando el usuario toma el mouse sobre la imagen, luego el usuario puede acercar y alejar con la rueda del mouse, lo implementé correctamente porque ahora es posible acercar y alejar la imagen, pero obtuve un problema, img se vuelve más pequeño (pero el zoom funciona), si elimino 'TransformComponent', entonces img se vuelve más grande (como debería ser de este tamaño) pero el usuario ya no puede hacer zoom.
El inglés no es mi lengua materna, por lo que podría haber errores.
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; renderPreview() { const camera = this.props.currentCamera; // render size (not display size) of the canvas const canvasRenderWidth = camera ? camera.width : this.state.config.previewStyle.width; const canvasRenderHeight = camera ? camera.height : this.state.config.previewStyle.height; // display size of the canvas let canvasStyle = { width: canvasRenderWidth >= canvasRenderHeight ? "100%" : "auto", height: canvasRenderHeight > canvasRenderWidth ? "100%" : "auto", }; return ( <div style={this.state.config.previewStyle}> <TransformWrapper > <TransformComponent> <canvas ref="CameraPreviewCanvas" width={canvasRenderWidth} height={canvasRenderHeight} onClick={this.onClickCanvas} onMouseMove={this.onMouseOverCanvas} style={canvasStyle} ></canvas> </TransformComponent> </TransformWrapper> <img ref="CameraPreviewImage" src={this.state.snapshot.snapshotUrl} style={{ display: "none" }} ></img> </div> ); }imagen:
quiero que el ancho de img sea del 100% tal como está sin 'TransformComponent'
Algúna idea de cómo arreglar esto ?
·
Juan Pablo Isaza
Responde la pregunta