PCM波形支持鼠标滚轮缩放
广告
{{v.name}}
📋 原始需求(task.md):

现在通过起点和终点输入框进行剪辑区间的精调不方便,加一个在PCM波形的区域上允许鼠标滚轮缩放的功能,在滚轮缩放时,保持剪辑区间的左侧细线位置不变,右侧细线跟随滚轮缩放,每次缩放相当于把PCM波形的总长度增加一倍或减半。

在 PCM 波形区新增鼠标滚轮缩放:上滚使剪辑区间长度加倍、下滚使其减半,用于比输入框更直观地精调剪辑区间;缩放时左侧细线(起点)位置保持不变,右侧细线(终点)跟随滚轮变化。


实现要点
  • canvas 绑定 wheel 事件,preventDefault 阻止页面随滚轮滚动
  • 首次缩放时以当前区域为 1x 基准,之后左线固定为基准起点,右线按 2 的幂次伸缩
  • 缩放同步到起点、终点输入框,并显示当前缩放倍数(1x / 2x / 4x …)
  • 区间长度有边界钳制(最小 0.05 秒、最大不超过音频末尾),并提供“恢复 1x”按钮
友链