旋律线大小改变

src/page-instrument/view-detail/intonationLine/index.less

@@ -2,7 +2,6 @@
     .intonationLineBox{
         display: flex;
         align-items: center;
-        height: 2.4rem;
     }
     .intonationLineCon{
         position: relative;

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

@@ -9,7 +9,6 @@
     .smoothAnimationBox{
         display: flex;
         align-items: center;
-        height: 2.4rem;
         &.smoothAnimationBoxHide{
             opacity: 0;
             visibility: hidden;
@@ -24,6 +23,9 @@
             left: 0;
             top: 0;
         }
+        .smoothCanvas{
+            display: block;
+        }
     }
     #osmdCanvasPage1{
         top: 0;

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

@@ -27,13 +27,14 @@ type smoothAnimationType = {
 }
 
 const _numberOfSegments = 58 // 中间切割线的个数
+const _canvasDomHeight = 60
 
 export const smoothAnimationState = {
    isShow: ref(false), // 是否显示
    canvasDom: null,
    canvasCtx: null,
    canvasDomWith: 0,
-   canvasDomHeight: 80,
+   canvasDomHeight: _canvasDomHeight,
    smoothAnimationBoxDom: null,
    smoothBotDom: null,
    osmdCanvasPageDom: null,
@@ -104,7 +105,7 @@ function dataFilter(batePos: pointsPosType) {
 
 //给原始数据赋值
 function dataFilter2(batePos1: pointsPosType, batePos2: pointsPosType) {
-   return batePos1.reduce((arr: pointsPosType, { noteId, MeasureNumberXML }, index) => {
+   return batePos1.reduce((arr: pointsPosType, { noteId, MeasureNumberXML }) => {
       const noteIdIndex = batePos2.findIndex(item => {
          return noteId === item.noteId && MeasureNumberXML === item.MeasureNumberXML
       })
@@ -123,7 +124,7 @@ export function destroySmoothAnimation() {
       canvasDom: null,
       canvasCtx: null,
       canvasDomWith: 0,
-      canvasDomHeight: 80,
+      canvasDomHeight: _canvasDomHeight,
       smoothAnimationBoxDom: null,
       smoothBotDom: null,
       osmdCanvasPageDom: null,
@@ -350,7 +351,7 @@ function getPointsPosByBatePos(): pointsPosType {
       return !item.frequency || item.frequency === -1 ? 0 : item.frequency
    })
    // 线性频率数据
-   const frequencyLineData = quantileScale(frequencyData, 6, 74)
+   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) {
@@ -358,7 +359,7 @@ function getPointsPosByBatePos(): pointsPosType {
             noteId: item.noteId,
             MeasureNumberXML: item.MeasureNumberXML,
             x: item.bbox.x,
-            y: 80 - frequencyLineData[index]
+            y: _canvasDomHeight - frequencyLineData[index]
          })
       } else {
          // 连续休止小节 noteId 可能为 null,所以这里取上一个音符的id
@@ -367,7 +368,7 @@ function getPointsPosByBatePos(): pointsPosType {
             noteId: item.noteId != null ? item.noteId : (posArr[posArr.length - 1]?.noteId != null ? posArr[posArr.length - 1]?.noteId : -1) + 0.01, // 这里+0.01 是制造一个假id
             MeasureNumberXML: item.MeasureNumberXML,
             x: item.bbox?.x != null ? item.bbox.x : posArr[posArr.length - 1]?.x || 10,
-            y: 80 - frequencyLineData[index]
+            y: _canvasDomHeight - frequencyLineData[index]
          })
       }
       return posArr
@@ -385,7 +386,7 @@ function getPointsPosByBatePos(): pointsPosType {
 }
 
 // 数据平滑算法
-function quantileScale(data: number[], minRange = 0, maxRange = 80) {
+function quantileScale(data: number[], minRange = 0, maxRange = _canvasDomHeight) {
    const sortedData = [...data].sort((a, b) => a - b)
    return data.map(value => {
       const rank = sortedData.indexOf(value) / (sortedData.length - 1)