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

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 (

);

}

}

效果展示

可放大   缩小   并且拖拽

好文链接

 您阅读本篇文章共花了：