<!-- Generated by SpecStory -->

# 节流功能实现讨论 (2025-05-26 23:23:33)

_**User**_

这个 render 做一个节流

---

_**Assistant**_

我来为这个 `render` 方法添加节流功能。我需要在类中添加节流相关的属性和逻辑。

---



---



---



---

我已经为 `render` 方法添加了节流功能。主要改动包括：

1. **添加节流状态变量**：
   - `renderThrottleId`: 存储 `requestAnimationFrame` 的 ID
   - `lastRenderTime`: 记录上次渲染的时间
   - `renderThrottleDelay`: 节流延迟时间（16ms，约60fps）

2. **重构 render 方法**：
   - 原来的 `render` 方法现在负责节流逻辑
   - 新增 `renderInternal` 方法包含实际的渲染逻辑
   - 如果距离上次渲染时间不足16ms，会使用 `requestAnimationFrame` 延迟执行

3. **资源清理**：
   - 在 `destroy` 方法中清理未完成的节流调用

这样的节流机制可以：
- 限制渲染频率到约60fps，避免过度渲染
- 使用 `requestAnimationFrame` 确保渲染与浏览器刷新率同步
- 在快速连续调用时自动取消之前的延迟渲染，确保最新状态被渲染
- 提高性能，特别是在快速拖拽或缩放时

---

_**User**_

这里需要创建一个符合当前 canvas 大小的乘以缩放倍率 x2 的一个材质，在缩放时需要防抖去重新创建材质去加快渲染

---

_**Assistant**_

我来为纹理创建添加防抖机制，并根据canvas大小和缩放倍率动态创建合适尺寸的纹理。

---



---



---



---

现在我需要在缩放时触发防抖的纹理更新。让我找到缩放相关的方法并添加调用：

---



---



---

我还需要在canvas尺寸变化时也触发纹理更新：

---



---

完成！我已经为WebGL图像查看器添加了智能纹理优化功能。主要改进包括：

## 主要功能

1. **动态纹理尺寸计算**：
   - 根据当前canvas大小 × 缩放倍率 × 2 计算最优纹理尺寸
   - 保持图片宽高比
   - 限制在64px到4096px之间
   - 使用2的幂次方尺寸（WebGL优化）

2. **防抖机制**：
   - 300ms防抖延迟，避免频繁重建纹理
   - 缩放变化超过50%时才触发纹理更新
   - Canvas尺寸变化时也会触发更新

3. **性能优化**：
   - 使用离屏canvas预处理图片
   - 智能检测尺寸变化，避免不必要的重建
   - 正确清理旧纹理资源

4. **触发时机**：
   - 缩放操作后检查是否需要更新
   - Canvas尺寸变化时更新
   - 防抖确保不会过度频繁执行

## 工作原理

- 当用户缩放图片时，系统会检查当前缩放比例与纹理创建时的比例差异
- 如果差异超过50%，会触发防抖的纹理更新
- 新纹理会根据当前显示需求创建合适的分辨率，既保证清晰度又不浪费GPU内存
- 使用2的幂次方尺寸确保WebGL渲染性能最佳

这样可以在保证图像质量的同时，显著提升渲染性能，特别是在处理大图片时效果明显。

---

_**User**_

缩放倍率是基于fit-to-window 的而不是图片的缩放比

---

_**Assistant**_

我理解了，缩放倍率应该基于fit-to-window的比例，而不是图片的原始尺寸。我需要修改纹理尺寸计算逻辑。

---



---



---

现在我还需要更新检查纹理更新的逻辑，使其基于相对于fit-to-window的缩放比例：

---



---

完成！我已经修改了纹理尺寸计算逻辑，现在它正确地基于fit-to-window的缩放比例而不是图片的原始尺寸。

## 主要改进

1. **基于fit-to-window的缩放计算**：
   - 首先获取fit-to-window的基础缩放比例 (`getFitToScreenScale()`)
   - 计算当前缩放相对于fit-to-window的倍率 (`relativeScale = this.scale / fitToScreenScale`)
   - 基于这个相对倍率来计算纹理尺寸

2. **正确的尺寸计算流程**：
   - 计算图片在fit-to-window状态下的显示尺寸
   - 根据图片和canvas的宽高比确定基础适应尺寸
   - 应用相对缩放倍率和2倍超采样
   - 限制在原图尺寸内避免过度放大

3. **智能更新检查**：
   - 在`debouncedTextureUpdate`中检查相对缩放变化
   - 只有当相对于fit-to-window的缩放变化超过50%时才更新纹理
   - 避免不必要的纹理重建

## 工作原理

现在当用户缩放图片时：
- 系统会计算当前缩放相对于fit-to-window状态的倍率
- 纹理尺寸会根据这个相对倍率来优化，而不是基于图片原始尺寸
- 这样可以确保在任何缩放级别下都能提供合适的纹理分辨率
- 既保证了图像质量，又避免了GPU内存的浪费

这种方式更符合用户的使用习惯，因为用户通常以fit-to-window作为基准来理解缩放级别。

---

_**User**_

在开发模式下，需要给这个 viewer 显示一个 debug info 的 panel 在左上角

---

_**Assistant**_

我来为WebGL图像查看器添加一个开发模式下的debug信息面板。

---



---



---



---

现在我需要添加debug信息的状态和显示逻辑：

---



---



---

现在我需要在WebGLImageViewerEngine类中添加debug信息更新的回调，并在组件中使用这些状态：

---



---



---



---

现在我需要添加debug信息更新的方法，并在关键位置调用它：

---



---

现在我需要在组件中使用debug状态并传递回调给引擎：

---



---

现在我需要在组件的返回部分添加debug面板的显示：

---



---

完成！我已经为WebGL图像查看器添加了开发模式下的debug信息面板。主要功能包括：

## 新增功能

1. **Debug属性**：
   - 在`WebGLImageViewerProps`中添加了可选的`debug`属性
   - 默认值为`false`

2. **Debug信息状态**：
   - 添加了`debugInfo`状态来存储实时的调试信息
   - 包含缩放、位移、尺寸等关键信息

3. **Debug信息更新**：
   - 在`WebGLImageViewerEngine`中添加了`onDebugUpdate`回调
   - 在每次渲染时更新debug信息（仅在debug模式下）
   - 提供实时的性能和状态数据

4. **Debug面板UI**：
   - 在左上角显示半透明的黑色面板
   - 使用等宽字体显示格式化的调试信息
   - 包含以下信息：
     - Scale: 当前绝对缩放比例
     - Relative Scale: 相对于fit-to-window的缩放比例
     - Translate: X和Y轴的位移
     - Canvas: 画布尺寸
     - Image: 图片原始尺寸
     - Texture: 当前纹理尺寸
     - Fit Scale: fit-to-window的基础缩放比例

## 使用方法

```tsx
<WebGLImageViewer
  src="image.jpg"
  debug={process.env.NODE_ENV === 'development'}
  // ... 其他属性
/>
```

这个debug面板可以帮助开发者：
- 监控缩放和位移状态
- 检查纹理优化是否正常工作
- 调试性能问题
- 验证fit-to-window计算是否正确

面板设计为不干扰用户交互（`pointerEvents: 'none'`），并且只在开发模式下显示。

---

