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>
        );
    }
}

效果展示

可放大 缩小 并且拖拽

相关推荐
花生侠24 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯31 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调38 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined240 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor