React中图片单指拖动、双指缩放

import React, { Component } from 'react';

class ViewerMain extends Component {
  constructor(props) {
    super(props);
    this.imageRef = React.createRef();
    this.state = {
      dxImg: '',
      // 图片移动
      isDragging: false,
      position: {
          x: 0,
          y: 0
      },
      startPos: {
          x: 0,
          y: 0
      },
      // 图片缩放
      scale: 1,
      touchStartDistance: 0,
      touchStartScale: 1,
      touchStartPosition: { x: 0, y: 0 }
      };
      this.handleMouseDown = this.handleMouseDown.bind(this);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.handleMouseUp = this.handleMouseUp.bind(this);
      this.handleTouchStart = this.handleTouchStart.bind(this);
      this.handleTouchMove = this.handleTouchMove.bind(this);
      this.handleTouchEnd = this.handleTouchEnd.bind(this);
      this.calculateDistance = this.calculateDistance.bind(this);
      this.calculateCenter = this.calculateCenter.bind(this);
    }
  }

  // 处理鼠标按下
  handleMouseDown (e) {

    this.setState({
      isDragging: true,
      startPos: {
        x: e.clientX - this.state.position.x,
        y: e.clientY - this.state.position.y
      }
    });
    e.preventDefault();
  };

  handleMouseUp(e) {
    this.setState({ isDragging: false });
  }

  // 处理鼠标移动
  handleMouseMove(e) {
    if (!this.state.isDragging) return;

    const newX = e.clientX - this.state.startPos.x;
    const newY = e.clientY - this.state.startPos.y;

    this.setState({
      position: { x: newX, y: newY }
    }, this.updateImageStyle);
  }
}

// 计算两点距离
  calculateDistance(touch1, touch2) {
    const dx = touch2.clientX - touch1.clientX;
    const dy = touch2.clientY - touch1.clientY;
    return Math.sqrt(dx * dx + dy * dy);
  }

  // 计算两点的中心点
  calculateCenter(touch1, touch2) {
    return {
      x: (touch1.clientX + touch2.clientX) / 2,
      y: (touch1.clientY + touch2.clientY) / 2
    };
  }

  handleTouchStart(e) {
    e.preventDefault();

    if (e.touches.length === 1) {
      // 单指触摸 - 开始拖拽
      this.setState({
        isDragging: true,
        startPos: {
          x: e.touches[0].clientX - this.state.position.x,
          y: e.touches[0].clientY - this.state.position.y
        }
      });
    } else if (e.touches.length === 2) {
      // 双指触摸 - 开始缩放
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      
      this.setState({
        touchStartDistance: this.calculateDistance(touch1, touch2),
        touchStartScale: this.state.scale,
        touchStartPosition: { ...this.state.position },
        startCenter: this.calculateCenter(touch1, touch2)
      });
    }
  }

  handleTouchMove(e) {
    e.preventDefault();

    if (e.touches.length === 1 && this.state.isDragging) {
      // 单指移动 - 拖拽
      const newX = e.touches[0].clientX - this.state.startPos.x;
      const newY = e.touches[0].clientY - this.state.startPos.y;
      
      this.setState({
        position: { x: newX, y: newY }
      }, this.updateImageStyle);
    } else if (e.touches.length === 2) {
      // 双指移动 - 缩放
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      const currentDistance = this.calculateDistance(touch1, touch2);
      const currentMidpoint = this.calculateCenter(touch1, touch2);
      if (this.state.touchStartDistance > 0) {
        // 计算缩放比例
        const distanceRatio = currentDistance / this.state.touchStartDistance;
        const newScale = Math.min(Math.max(this.state.touchStartScale * distanceRatio, 0.5), 2);


        const image = this.imageRef.current;
        const rect = image.getBoundingClientRect();
        const offsetX = this.state.startCenter.x - (rect.left + rect.width / 2);
        const offsetY = this.state.startCenter.y - (rect.top + rect.height / 2);
        
        // 缩放补偿，保持触点为视觉缩放中心
        const newX = this.state.position.x + offsetX * (1 - distanceRatio);;
        const newY = this.state.position.y + offsetY * (1 - distanceRatio);
        
        this.setState({
          scale: newScale,
          position: { x: newX, y: newY }
        });
      }
    }
  }
  
  handleTouchEnd(e) {
    if (e.touches.length === 0) {
      this.setState({ 
        isDragging: false,
        touchStartDistance: 0
      });
    } else if (e.touches.length === 1) {
      // 当双指变为单指时，更新拖拽起始点
      this.setState({
        isDragging: true,
        startPos: {
          x: e.touches[0].clientX - this.state.position.x,
          y: e.touches[0].clientY - this.state.position.y
        }
      });
    }
  }
  render() {
    const { position, scale, } = this.state;
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
      }}>
        <img 
        height="100%"
        ref={this.imageRef}
        src={dxImg}
        style={{
          cursor: this.state.isDragging ? 'grabbing' : 'grab',
          transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
          transformOrigin: 'center center'
        }}
        onMouseDown={this.handleMouseDown}
        onMouseMove={this.handleMouseMove}
        onTouchStart={this.handleTouchStart}
        onTouchMove={this.handleTouchMove}
        onTouchEnd={this.handleTouchEnd}
        draggable="false" // 防止默认拖拽行为
        />
      </div>
    )
  }
}