react 对img图片进行放大缩小拖拽

javascript 复制代码
import React, { Component } from 'react';
import BaseComponent from "../../../../base/BaseComponent";
import zoomInIcon from "./images/zoom-in.png";
import zoomOutIcon from "./images/zoom-out.png";

export default class DetailPicture extends BaseComponent {
    static defaultProps = {};
    static propTypes = {};

    constructor(props) {
        super(props);
        this.state = {
            zoomLevel: 100, // 初始缩放级别为100%
            dragging: false,
            offsetX: 0,
            offsetY: 0,
            translateX: 0,
            translateY: 0,
            lastTranslateX: 0,
            lastTranslateY: 0,
            scale: 1, // 缩放比例
        };
    }

    handleZoomIn = () => {
        // 将缩放级别增加20%
        this.setState(prevState => ({
            zoomLevel: Math.min(prevState.zoomLevel + 20, 500),
            scale: (prevState.zoomLevel + 20) / 100,
        }));
    };

    handleZoomOut = () => {
        // 将缩放级别减小20%
        this.setState(prevState => ({
            zoomLevel: Math.max(prevState.zoomLevel - 20, 20),
            scale: (prevState.zoomLevel - 20) / 100,
        }));
    };

    handleMouseDown = (event) => {
        event.preventDefault();
        this.setState({
            dragging: true,
            offsetX: event.clientX,
            offsetY: event.clientY,
            lastTranslateX: this.state.translateX,
            lastTranslateY: this.state.translateY,
        });
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
    };

    handleMouseMove = (event) => {
        if (this.state.dragging) {
            const { offsetX, offsetY, lastTranslateX, lastTranslateY, scale } = this.state;
            const dx = (event.clientX - offsetX) / scale;
            const dy = (event.clientY - offsetY) / scale;
            this.setState({
                translateX: lastTranslateX + dx,
                translateY: lastTranslateY + dy,
            });
        }
    };

    handleMouseUp = () => {
        this.setState({ dragging: false });
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
    };


    render() {
        const { detailData = {} } = this.props;
        const { storageFile = {} } = detailData;
        const { path = "" } = storageFile;
        const { scale , translateX , translateY} = this.state;

        return (
            <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex' }}>
                <img
                    src={path}
                    style={{
                        maxWidth: '100%',
                        maxHeight: '100%',
                        margin: 'auto',
                        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`, // 根据缩放级别和平移应用变换
                        transition: 'transform 0.3s ease-in-out', // 添加平滑的过渡效果
                        cursor: this.state.dragging ? 'grabbing' : 'grab',
                    }}
                    id={this.props.id}
                    onMouseDown={this.handleMouseDown}
                />

                <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 1 }}>
                    <img
                        src={zoomOutIcon}
                        alt="Zoom In"
                        onClick={this.handleZoomIn}
                        style={{ cursor: 'pointer', marginRight: '5px' }}
                    />
                    <img
                        src={zoomInIcon}
                        alt="Zoom Out"
                        onClick={this.handleZoomOut}
                        style={{ cursor: 'pointer' }}
                    />
                </div>
            </div>
        );
    }
}
效果展示
可放大缩小并且拖拽
react 对img图片进行放大 缩小 拖拽

react 对img图片进行放大缩小拖拽
