`react-zoom-pan-pinch` 教程与使用指南

1. 项目介绍

react-zoom-pan-pinch 是一个React组件库，用于实现图片和内容的平移、缩放以及旋转功能，尤其适用于创建交互式的图像查看器或地图应用。它提供了流畅的触摸和鼠标操作支持，以及多种预设行为模式，以满足不同应用场景的需求。

2. 项目快速启动

安装依赖

在你的项目中安装react-zoom-pan-pinch：

npm install react-zoom-pan-pinch
# 或者使用Yarn
yarn add react-zoom-pan-pinch

基础用法

在你的React组件中引入并使用ZoomPanPinch组件：

import React from 'react';
import { ZoomPanPinch } from 'react-zoom-pan-pinch';

function MyApp() {
  return (
    <ZoomPanPinch>
      {/* 在这里放置你要进行交互的内容 */}
      <img src="your-image-source.png" alt="Example Image" />
    </ZoomPanPinch>
  );
}

export default MyApp;

控制状态

如果你想控制缩放、平移等状态，你可以使用props来传递这些值：

import React, { useState } from 'react';
import { ZoomPanPinch, useZoomPanPinch } from 'react-zoom-pan-pinch';

function MyApp() {
  const [state, api] = useZoomPanPinch();

  // 更新状态的例子
  const handleReset = () => {
    api.resetState();
  };

  return (
    <ZoomPanPinch {...state} onWheel={api.handleOnWheel}>
      <img src="your-image-source.png" alt="Example Image" />
      <button onClick={handleReset}>重置</button>
    </ZoomPanPinch>
  );
}

export default MyApp;

3. 应用案例和最佳实践

保持比例（KeepScale）

要使子元素在缩放时保持其原始比例，可以包裹它们在一个KeepScale组件内：

import React from 'react';
import { TransformWrapper, TransformComponent, KeepScale } from 'react-zoom-pan-pinch';

function MyApp() {
  return (
    <TransformWrapper>
      {({ zoomIn, zoomOut }) => (
        <TransformComponent>
          <div style={{ position: 'relative', width: '100%', height: '100%' }}>
            <KeepScale>
              <img src="your-image-source.png" alt="Example Image" />
            </KeepScale>
          </div>
        </TransformComponent>
      )}
    </TransformWrapper>
  );
}

export default MyApp;

自定义事件处理

可以通过传递函数给特定的props来监听和处理如onWheel, onClick等事件：

const MyCustomHandler = (event) => {
  console.log('Event:', event);
};

...

<ZoomPanPinch onWheel={MyCustomHandler}>
  ...
</ZoomPanPinch>

4. 典型生态项目

react-zoom-pan-pinch常与其他React库一起使用，例如：

• React-Leaflet: 结合使用来构建可交互的地图应用。
• Material UI: 添加平移缩放功能到基于Material Design的组件。
• React-Canvas: 与画布元素结合，打造高性能的图像编辑工具。

请确保查阅相关库的文档，以便正确集成和实现你需要的功能。