旋律线线性化 优化

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

@@ -187,7 +187,7 @@ export function moveSmoothAnimation(progress: number, activeIndex: number, isMov
  */
 function move_osmd(nowPointsPos: pointsPosType[0]) {
    // 评测移动太快看不到前面小节的分数，评测改成0.5倍速移动谱面
-   const speed = (state.modeType === 'evaluating' ? smoothAnimationState.aveSpeed * 0.5 : smoothAnimationState.aveSpeed) * (state.speed / 60)
+   const speed = (state.modeType === "evaluating" ? smoothAnimationState.aveSpeed * 0.5 : smoothAnimationState.aveSpeed) * (state.speed / 60)
    // 视口宽度
    const clientWidth = smoothAnimationState.osdmScrollDomWith
    const clientMidWidth = clientWidth / 2
@@ -316,27 +316,20 @@ function createSmoothAnimation() {
  * 根据音符获取坐标
  */
 function getPointsPosByBatePos(): pointsPosType {
-   let totalAvInde = 0
-   // 取平均值
-   const totalAv =
-      state.times.reduce((total, item) => {
-         if (item.frequency !== -1) {
-            // -1 为休止符
-            total += item.frequency
-            totalAvInde++
-         }
-         return total
-      }, 0) / totalAvInde
-   const pointsPos = state.times.reduce((posArr: any[], item) => {
+   // 得到音符频率数据
+   const frequencyData = state.times.map(item => {
+      return !item.frequency || item.frequency === -1 ? 0 : item.frequency
+   })
+   console.log(frequencyData,"没线性化之前的数据")
+   // 线性频率数据
+   const frequencyLineData = quantileScale(frequencyData, 4, 76)
+   const pointsPos = state.times.reduce((posArr: any[], item, index) => {
       // 当休止小节，可能当前音符在谱面上没有实际的音符（没有bbox），所以往后找谱面上有的音符
       if (item.bbox) {
          posArr.push({
             MeasureNumberXML: item.MeasureNumberXML,
             x: item.bbox.x,
-            // 当为休止符的时候 取最下面的位置*0.9，确保能显示完整
-            y:
-               smoothAnimationState.canvasDomHeight / 2 -
-               ((((item.frequency === -1 ? 2 * totalAv * 0.1 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2
+            y: 80 - frequencyLineData[index]
          })
       }
       return posArr
@@ -352,6 +345,16 @@ function getPointsPosByBatePos(): pointsPosType {
    return pointsPos
 }
 
+// 数据平滑算法
+function quantileScale(data: number[], minRange = 0, maxRange = 80) {
+   const sortedData = [...data].sort((a, b) => a - b)
+   return data.map(value => {
+      const rank = sortedData.indexOf(value) / (sortedData.length - 1)
+      const scaledValue = rank * (maxRange - minRange) + minRange
+      return Math.max(minRange, Math.min(scaledValue, maxRange))
+   })
+}
+
 /**
  * 使用传入的曲线的顶点坐标创建平滑曲线的顶点。
  * @param  {Array}   points  曲线顶点坐标数组，