<!-- Generated by SpecStory -->

# 双击缩放中心设置 (2025-05-26 22:27:42)

_**User**_

double click 需要在点击的位置作为缩放中心

---

_**Assistant**_

我来修改双击事件处理，让双击时以点击位置作为缩放中心。

---



---

现在双击功能已经修改完成！主要改动如下：

1. **提前计算鼠标位置**：在函数开始就计算鼠标相对于画布的位置，避免重复计算
2. **以点击位置为缩放中心**：在 toggle 模式下，无论是缩放到适应页面大小还是原图大小，都会以双击的位置作为缩放中心
3. **保持缩放逻辑一致**：使用与 `zoomAt` 方法相同的数学计算来确定缩放后的平移位置

具体的计算逻辑：
- 计算点击位置相对于当前变换的坐标 (`zoomX`, `zoomY`)
- 根据目标缩放比例计算新的平移位置，确保点击位置在缩放前后保持在屏幕上的相同位置
- 使用动画平滑过渡到新的缩放和平移状态

现在当你双击图片时，图片会以你点击的位置为中心进行缩放切换，提供更直观的用户体验。

---

_**User**_

这个动画好像存在问题，在 double click 时 zoom 偶现画面撕裂或者抖动

---

_**Assistant**_

我来分析并修复双击缩放时的画面撕裂和抖动问题。这个问题通常是由于动画过程中的约束检查和状态不一致导致的。

---

Read file: src/components/ui/WebGLImageViewer.tsx

---

我发现了问题所在。主要有几个导致抖动和撕裂的原因：

1. **动画过程中应用约束**：在动画过程中不应该应用位置约束，这会导致目标位置被意外修改
2. **目标位置计算时没有考虑约束**：在设置动画目标时，应该预先计算并应用约束
3. **动画结束时的状态不一致**：需要确保动画结束时的状态是正确的

让我修复这些问题：

---



---



---

现在让我们也优化双击处理中的缩放限制检查，确保目标缩放值在有效范围内：

---

Read file: src/components/ui/WebGLImageViewer.tsx

---

现在让我们也优化双击处理，添加缩放限制检查：

---



---

现在让我们添加一个辅助方法来确保动画过程更加平滑，避免在动画过程中出现意外的状态变化：

---



---

看起来有一个类型错误，让我检查一下相关代码：

---

Read file: src/components/ui/WebGLImageViewer.tsx

---

我看到了问题，在第311行有一个类型错误。让我查看 `createTexture` 方法：

---

Read file: src/components/ui/WebGLImageViewer.tsx

---

我找到了问题。在 `createTexture` 方法中，`targetImage` 可能是 `HTMLImageElement` 或 `HTMLCanvasElement`，但 `gl.texImage2D` 的最后一个参数需要明确的类型。让我修复这个类型错误：

---



---

完美！现在我已经修复了双击缩放时的画面撕裂和抖动问题。让我总结一下所做的主要改进：

## 修复的问题

1. **预先计算并约束目标位置**：
   - 在开始动画之前，先计算目标位置并应用约束
   - 避免了动画过程中目标位置被意外修改

2. **移除动画过程中的约束检查**：
   - 动画过程中不再调用 `constrainImagePosition()`
   - 确保动画平滑进行，不会因为约束检查导致跳跃

3. **确保动画结束时的精确状态**：
   - 动画结束时直接设置为目标值，而不是依赖插值计算
   - 避免了浮点数精度问题导致的微小偏差

4. **添加缩放限制检查**：
   - 在双击切换时检查目标缩放值是否在允许范围内
   - 确保不会缩放到无效的范围

5. **改进用户交互响应**：
   - 当用户开始拖拽时立即停止正在进行的动画
   - 提供更好的交互体验

6. **修复类型错误**：
   - 明确指定 `targetImage` 的类型为 `HTMLImageElement | HTMLCanvasElement`

这些改进应该能够显著减少双击缩放时的画面撕裂和抖动问题，提供更流畅的用户体验。动画现在会更加平滑和可预测，同时保持正确的约束行为。

---

