0
158
ViewsMouse wheel (zoom) on canvas img
React beginner here, i have a canvas where is img, i wanted to implement zooming when user takes mouse on the picture then user could zoom in and out using mouse wheel, i implemented it correctly because now zoom in and zoom out is possible but got one problem, img becomes smaller (but zooming works), if i remove 'TransformComponent' then img becomes bigger(as it should be this size) but user cannot zoom anymore.
English is not my mother language so could be mistakes .
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>
);
}img:
i want img width to be 100% as it is without 'TransformComponent'
any idea how to fix this ?
·
Juan Pablo Isaza
Answer question