休止符 在底部显示，结束音符有延长线

src/page-instrument/view-detail/smoothAnimation/index.ts

@@ -115,7 +115,7 @@ export function destroySmoothAnimation() {
 export function moveSmoothAnimationByPlayTime() {
    const currentTime = getAudioCurrentTime()
    if (currentTime <= state.fixtime) return
-   if (currentTime > state.times.last()?.time) return
+   if (currentTime > state.times.last()?.endtime) return
    // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox），所以往后找谱面上有的音符
    let nextIndex = state.activeNoteIndex + 1
    let nextBBox = state.times[nextIndex]?.bbox
@@ -123,8 +123,10 @@ export function moveSmoothAnimationByPlayTime() {
       nextIndex += 1
       nextBBox = state.times[nextIndex]?.bbox
    }
-   // 当前的音符和下一个音符之间的时值
-   const noteDuration = state.times[nextIndex].time - state.times[state.activeNoteIndex]?.time
+   // 当前的音符和下一个音符之间的时值 (当是最后一个音符的时候，下一个音符的时间取当前音符的endtime)
+   const noteDuration =
+      (nextIndex > state.times.length - 1 ? state.times[state.activeNoteIndex]?.endtime : state.times[nextIndex].time) -
+      state.times[state.activeNoteIndex]?.time
    // 当前时值在该区间的占比
    const playProgress = (currentTime - state.times[state.activeNoteIndex]?.time) / noteDuration
    moveSmoothAnimation(playProgress, state.activeNoteIndex)
@@ -317,13 +319,22 @@ function getPointsPosByBatePos(): pointsPosType {
          posArr.push({
             MeasureNumberXML: item.MeasureNumberXML,
             x: item.bbox.x,
+            // 当为休止符的时候 取最下面的位置*0.9，确保能显示完整
             y:
-               ((((item.frequency === -1 ? totalAv : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2 +
+               ((((item.frequency === -1 ? 2 * totalAv * 0.9 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2 +
                smoothAnimationState.canvasDomHeight / 2 // cavans 高度为160 所以基准为80
          })
       }
       return posArr
    }, [])
+   // 最后一个音符延长(这里建立一个虚拟的音符延长)
+   const extendPoint = {
+      ...pointsPos[pointsPos.length - 1]
+   }
+   extendPoint.MeasureNumberXML++
+   // 当总长度减30小于最后一个音符时候，取最后一个音符加15
+   extendPoint.x = smoothAnimationState.canvasDomWith - 30 > extendPoint.x ? smoothAnimationState.canvasDomWith - 30 : extendPoint.x + 15
+   pointsPos.push(extendPoint)
    return pointsPos
 }