性能优化

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

@@ -28,7 +28,7 @@ type smoothAnimationType = {
    aveSpeed: number
 }
 
-const _numberOfSegments = 60 // 中间切割线的个数
+let _numberOfSegments = 56 // 中间切割线的个数
 const _canvasDomHeight = 60 // canvans 高度
 
 export const smoothAnimationState = {
@@ -71,6 +71,9 @@ export function initSmoothAnimation() {
    smoothAnimationState.batePos = batePos
    const batePos1 = dataFilter([...batePos])
    console.log(batePos1, "排序之后的数据")
+   // 这里性能优化，对于超级长的曲子，_numberOfSegments值 动态变化
+   const numberOfSegments = parseInt(16000 / batePos1.length + "")
+   _numberOfSegments = Math.max(18, Math.min(_numberOfSegments, numberOfSegments))
    const batePos2 = createSmoothCurvePoints(batePos1, _numberOfSegments)
    smoothAnimationState.pointsPos = batePos2
    // 初始化旋律线
@@ -403,7 +406,7 @@ function quantileScale(data: number[], minRange = 0, maxRange = _canvasDomHeight
 /**
  * 使用传入的曲线的顶点坐标创建平滑曲线的顶点。
  * @param  {Array}   points  曲线顶点坐标数组，
- * @param  {Int}     numberOfSegments 平滑曲线 2 个顶点间的线段数，默认为 20
+ * @param  {Int}     numberOfSegments 平滑曲线 2 个顶点间的线段数
  * @return {Array}   平滑曲线的顶点坐标数组
  */
 function createSmoothCurvePoints(points: pointsPosType, numSegments: number) {

src/state.ts

@@ -1000,11 +1000,12 @@ export const gotoNext = (note: any, skipNote?: boolean) => {
   const num = note.i;
 
   if (state.activeNoteIndex === note.i) {
-    try {
-      setCursorPosition(note, state.osmd.cursor, 'init');
-    } catch (error) {
-      console.log(error);
-    }
+    /* 没有光标了  这里就算加上光标也要性能优化 */
+    // try {
+    //   setCursorPosition(note, state.osmd.cursor, 'init');
+    // } catch (error) {
+    //   console.log(error);
+    // }
     // 重置 或者切换演奏演唱的时候 可能出现 state.activeNoteIndex === note.i的情况 执行
     if(state.playState === "paused"){
       fillWordColor();
@@ -1037,11 +1038,12 @@ export const gotoNext = (note: any, skipNote?: boolean) => {
   } else {
     gotoCustomNote(num);
   }
-  try {
-    setCursorPosition(note, state.osmd.cursor, 'refresh');
-  } catch (error) {
-    console.log(error);
-  }
+  /* 取消光标了 */
+  // try {
+  //   setCursorPosition(note, state.osmd.cursor, 'refresh');
+  // } catch (error) {
+  //   console.log(error);
+  // }
   fillWordColor();
   // 一行谱，需要滚动小节
   if (state.isSingleLine) {

src/view/selection/index.tsx

@@ -308,7 +308,7 @@ export default defineComponent({
 							<>
 								{item.staveBox && (
 									<div
-										key={index}
+										key={item.id}
 										class={[
 											styles.position,
 											// scoreItem ? `scoreItemLeve${scoreItem.leve}` : "", // 去掉评测小节得分的背景色