<!-- Generated by SpecStory -->

# 双击缩放功能修改 (2025-05-26 17:19:55)

_**User**_

这里 douleclick 需要缩放到 1x 或者缩放到图片的原始大小

---

_**Assistant**_

我需要修改双击缩放的逻辑，让它能够在1x和原始大小之间切换。首先让我查看一下TransformWrapper的相关API，然后修改代码。

---

<details>
            <summary>Searched web "react-zoom-pan-pinch TransformWrapper doubleClick mode toggle scale original size" • **5** results</summary>
        
| Title | URL |
|-------|-----|
| How do I get double click to toggle zoom all-the-way out/all ... | https://github.com/prc5/react-zoom-pan-pinch/issues/125 |
| react-zoom-pan-pinch | https://www.npmjs.com/package/react-zoom-pan-pinch |
| GitHub - BetterTyped/react-zoom-pan-pinch: 🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div> | https://github.com/BetterTyped/react-zoom-pan-pinch |
| GitHub - BetterTyped/react-zoom-pan-pinch: 🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div> | https://github.com/prc5/react-zoom-pan-pinch |
| react-zoom-pan-pinch | https://www.npmjs.com/package/react-zoom-pan-pinch |

</details>

---

基于搜索结果，我了解到`react-zoom-pan-pinch`库支持`toggle`模式的双击缩放。现在我需要修改代码来实现您的需求：双击时在1x和原始大小之间切换。

我需要先了解一下图片的原始尺寸，然后实现自定义的双击逻辑。让我修改代码：

---



---



---

现在我需要添加获取图片尺寸和自定义双击逻辑的代码：

---



---

现在我需要修改TransformWrapper的配置，使用自定义的双击处理逻辑，并更新图片的onLoad事件：

---



---

看起来`react-zoom-pan-pinch`没有`onDoubleClick`属性。让我查看文档来了解正确的用法，并更新图片的onLoad事件：

---



---

现在我需要为图片添加双击事件处理器，并更新图片的onLoad事件：

---



---

现在让我修复双击逻辑中的问题。我需要检查`zoomToElement`方法是否存在，如果不存在，我们需要使用其他方法：

---



---

现在我需要重新思考这个逻辑。实际上，我们应该在1x（fit to container）和原始大小（1:1 pixel ratio）之间切换。让我修正这个逻辑：

---



---

现在让我更新TransformWrapper的初始缩放，使其默认为fit scale：

---



---

现在我需要在图片加载完成后设置合适的初始缩放：

---



---

现在让我更新重置状态的逻辑，确保在图片变化时正确重置所有状态：

---



---

现在让我检查代码是否正确工作。让我测试一下项目是否能正常运行：

---

```bash
cd /Users/innei/git/vibe-coding/photo-gallery-site && npm run dev
```

---

代码修改完成！我已经实现了您要求的双击缩放功能。以下是我所做的主要改动：

## 主要修改内容：

1. **添加了图片尺寸状态管理**：
   - 新增 `imageDimensions` 状态来存储图片的原始尺寸

2. **实现了智能双击逻辑**：
   - `calculateFitScale()` - 计算图片适合容器的缩放比例
   - `handleDoubleClick()` - 在"适合容器"和"原始大小(1x)"之间切换

3. **优化了初始化逻辑**：
   - 在图片加载完成后自动设置为"适合容器"的缩放比例
   - 确保图片一开始就能完整显示在容器中

4. **改进了状态重置**：
   - 在图片切换时正确重置所有相关状态

## 功能特点：

- **双击行为**：
  - 如果当前是"适合容器"缩放，双击后缩放到原始大小(1:1像素比例)
  - 如果当前不是"适合容器"缩放，双击后回到"适合容器"状态

- **初始状态**：图片加载后自动设置为适合容器的缩放比例

- **平滑动画**：所有缩放切换都有200ms的平滑过渡动画

- **兼容性**：保持了原有的滚轮缩放、拖拽等功能

现在您的图片查看器将支持双击在两种缩放状态之间智能切换，提供更好的用户体验！

---

