数据结构整理

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

@@ -27,7 +27,7 @@ type smoothAnimationType = {
 }
 
 const _numberOfSegments = 58 // 中间切割线的个数
-const _canvasDomHeight = 60
+const _canvasDomHeight = 60  // canvans 高度
 
 export const smoothAnimationState = {
    isShow: ref(false), // 是否显示
@@ -113,6 +113,7 @@ function dataFilter2(batePos1: pointsPosType, batePos2: pointsPosType) {
       return arr
    }, [])
 }
+
 /**
  * 销毁
  */
@@ -192,11 +193,10 @@ export function moveSmoothAnimation(progress: number, activeIndex: number, isMov
       console.error(nowPointsPos?.x, "nowPointsPos", nowIndex, activeIndex)
       return
    }
-   smoothAnimationState.canvasCtx?.clearRect(0, 0, smoothAnimationState.canvasDomWith, smoothAnimationState.canvasDomHeight)
    // 移动
    smoothAnimationMove(
       {
-         x: nowPointsPos.x - 18,
+         x: nowPointsPos.x - 18, //鸟的大小
          y: nowPointsPos.y - 23
       },
       smoothAnimationState.pointsPos,
@@ -292,13 +292,7 @@ function smoothAnimationMove(pos: { x: number; y: number }, pointsPos: pointsPos
    smoothAnimationState.smoothBotDom && (smoothAnimationState.smoothBotDom.style.transform = `translate(${pos.x}px, ${pos.y}px)`)
    smoothAnimationState.canvasCtx && drawSmoothCurve(smoothAnimationState.canvasCtx, pointsPos, progresspointsPos)
 }
-/**
- * 计算视口宽度
- */
-export function calcClientWidth() {
-   smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
-   smoothAnimationState.osdmScrollDomOffsetLeft = smoothAnimationState.osdmScrollDom?.getBoundingClientRect().left || 0
-}
+
 /**
  * 创建dom
  */
@@ -343,6 +337,14 @@ function createSmoothAnimation() {
 }
 
 /**
+ * 计算视口宽度
+ */
+export function calcClientWidth() {
+   smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom?.offsetWidth || 0
+   smoothAnimationState.osdmScrollDomOffsetLeft = smoothAnimationState.osdmScrollDom?.getBoundingClientRect().left || 0
+}
+
+/**
  * 根据音符获取坐标
  */
 function getPointsPosByBatePos(): pointsPosType {
@@ -351,7 +353,7 @@ function getPointsPosByBatePos(): pointsPosType {
       return !item.frequency || item.frequency === -1 ? 0 : item.frequency
    })
    // 线性频率数据
-   const frequencyLineData = quantileScale(frequencyData, 8, _canvasDomHeight - 8)
+   const frequencyLineData = quantileScale(frequencyData, 8, _canvasDomHeight - 8) // 最小值和最大值
    const pointsPos = state.times.reduce((posArr: any[], item, index) => {
       // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox)
       if (item.bbox?.x != null && item.noteId != null) {
@@ -520,6 +522,8 @@ function createSmoothCurvePoints(pointsPos: pointsPosType, tension?: number, clo
  * 根据坐标划线
  */
 function drawSmoothCurve(context: CanvasRenderingContext2D, pointsPos: pointsPosType, progresspointsPos?: pointsPosType) {
+   /* 清空 */
+   context.clearRect(0, 0, smoothAnimationState.canvasDomWith, smoothAnimationState.canvasDomHeight)
    context.lineWidth = 2
    context.lineJoin = "round" // 优化锯齿
    context.lineCap = "round" // 优化锯齿