react实现图片缩放

使用 react-transform-zoom-pan 库

安装 react-transform-zoom-pan 库：

npm install react-transform-zoom-pan

创建一个可缩放和拖拽的图片组件：

import { TransformWrapper, TransformComponent } from "react-transform-zoom-pan";

function ZoomableImage({ src }) {
  return (
    <TransformWrapper>
      <TransformComponent>
        <img src={src} alt="zoomable" />
      </TransformComponent>
    </TransformWrapper>
  );
}

使用 CSS transform 实现缩放

通过状态管理缩放比例，使用 CSS transform 属性实现缩放效果：

import { useState } from 'react';

function ZoomableImage({ src }) {
  const [scale, setScale] = useState(1);

  return (
    <div>
      <div style={{ transform: `scale(${scale})`, transformOrigin: '0 0' }}>
        <img src={src} alt="zoomable" />
      </div>
      <button onClick={() => setScale(scale + 0.1)}>Zoom In</button>
      <button onClick={() => setScale(scale - 0.1)}>Zoom Out</button>
    </div>
  );
}

使用 react-zoom-pan-pinch 库

安装 react-zoom-pan-pinch 库：

npm install react-zoom-pan-pinch

实现带有平移和缩放功能的图片组件：

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

function ZoomableImage({ src }) {
  return (
    <TransformWrapper>
      {({ zoomIn, zoomOut, resetTransform }) => (
        <>
          <div className="tools">
            <button onClick={() => zoomIn()}>Zoom In</button>
            <button onClick={() => zoomOut()}>Zoom Out</button>
            <button onClick={() => resetTransform()}>Reset</button>
          </div>
          <TransformComponent>
            <img src={src} alt="zoomable" />
          </TransformComponent>
        </>
      )}
    </TransformWrapper>
  );
}

实现鼠标滚轮缩放

监听 wheel 事件实现滚轮缩放效果：

import { useState, useRef } from 'react';

function ZoomableImage({ src }) {
  const [scale, setScale] = useState(1);
  const imageRef = useRef(null);

  const handleWheel = (e) => {
    e.preventDefault();
    const delta = e.deltaY > 0 ? -0.1 : 0.1;
    setScale(prev => Math.max(0.1, prev + delta));
  };

  return (
    <div onWheel={handleWheel} ref={imageRef}>
      <img 
        src={src} 
        alt="zoomable" 
        style={{ 
          transform: `scale(${scale})`,
          transformOrigin: '0 0',
          width: '100%'
        }} 
      />
    </div>
  );
}

实现双击缩放

添加双击事件实现快速缩放：

function ZoomableImage({ src }) {
  const [scale, setScale] = useState(1);

  const handleDoubleClick = () => {
    setScale(scale === 1 ? 2 : 1);
  };

  return (
    <div onDoubleClick={handleDoubleClick}>
      <img 
        src={src} 
        alt="zoomable" 
        style={{ 
          transform: `scale(${scale})`,
          transformOrigin: '0 0',
          cursor: 'zoom-in'
        }} 
      />
    </div>
  );
}

实现触摸屏捏合缩放

处理 touch 事件实现移动设备上的捏合缩放：

function ZoomableImage({ src }) {
  const [scale, setScale] = useState(1);
  const [initialDistance, setInitialDistance] = useState(null);

  const handleTouchStart = (e) => {
    if (e.touches.length === 2) {
      setInitialDistance(getDistance(e.touches[0], e.touches[1]));
    }
  };

  const handleTouchMove = (e) => {
    if (e.touches.length === 2) {
      e.preventDefault();
      const currentDistance = getDistance(e.touches[0], e.touches[1]);
      if (initialDistance) {
        const newScale = (currentDistance / initialDistance) * scale;
        setScale(Math.max(0.5, Math.min(newScale, 3)));
      }
    }
  };

  const getDistance = (touch1, touch2) => {
    return Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
  };

  return (
    <div 
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={() => setInitialDistance(null)}
    >
      <img 
        src={src} 
        alt="zoomable" 
        style={{ 
          transform: `scale(${scale})`,
          transformOrigin: '0 0',
          touchAction: 'none'
        }} 
      />
    </div>
  );
}