Forráskód Böngészése

feat: 一行谱增加平移模式字段moveType

TIANYONG 1 éve
szülő
commit
98442abccc

+ 2 - 1
src/page-instrument/view-detail/index.tsx

@@ -135,7 +135,8 @@ export default defineComponent({
       if (state.isPreView) {
         state.zoom = 0.65
       }
-      state.isSingleLine = query.isSingleLine
+      state.isSingleLine = query.isSingleLine; // 一行谱模式
+      state.moveType = query.moveType == '2' ? 'uniform' : 'smooth'; // 一行谱平移模式
       // Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
       //   getMusicInfo(values[0]);
       // });

+ 18 - 1
src/state.ts

@@ -453,6 +453,8 @@ const state = reactive({
   isSingleLine: false,
   /** 首尾音符的间距 */
   noteDistance: 0,
+  /** 一行谱运动模式,平滑移动、匀速移动 */
+  moveType: "smooth" as "smooth" | "uniform",
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -601,7 +603,11 @@ const handlePlaying = () => {
   metronomeData.metro?.sound(currentTime);
   // 一行谱,需要滚动小节
   if (state.isSingleLine) {
-    smoothMoveSvgDom();
+    if (state.moveType === 'smooth') {
+      smoothMoveSvgDom();
+    } else {
+      uniformMoveSvgDom();
+    }
   }
   
 };
@@ -1299,6 +1305,7 @@ export const createFixedCursor = () => {
     // }
     copyCursor.style.left = state.times[0]?.bbox?.x + state.times[0]?.bbox?.width / 2 - 1 + 'px';
     copyCursor.style.height = parseFloat(copyCursor.style.height) * 3 + 'px';
+    copyCursor.style.opacity = state.moveType === 'uniform' ? 0 : 1;
     // copyCursor.style.background = 'red';
     copyCursor && scrollDom?.appendChild(copyCursor);
 
@@ -1401,4 +1408,14 @@ export const smoothMoveSvgDom = () => {
     const distance = state.noteDistance * playProgress;
     state.osdmScrollDom.scrollLeft = distance;
   }
+}
+
+// 匀速平移
+export const uniformMoveSvgDom = () => {
+  const currentTime = getAudioCurrentTime();
+  if (currentTime <= state.fixtime) return;
+  if (currentTime > state.times.last()?.time) return; 
+  const playProgress = (currentTime - state.fixtime) / state.times.last()?.time;
+  const distance = playProgress * state.noteDistance || 0;
+  state.osdmScrollDom.scrollLeft = distance;
 }

+ 2 - 1
src/view/music-score/index.tsx

@@ -104,6 +104,7 @@ export default defineComponent({
 				drawComposer: false, // 渲染作者
 				defaultColorMusic: props.musicColor, // 颜色
 				renderSingleHorizontalStaffline: state.isSingleLine ? true : false,
+				autoGenerateMultipleRestMeasuresFromRestMeasures: state.isSingleLine ? false : true, // 连续休止小节是否合并显示
 				// pageFormat: 'A4_P',
 				// autoBeam: true,
 				// drawMetronomeMarks: false,
@@ -113,7 +114,7 @@ export default defineComponent({
 			});
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
 			osmd.EngravingRules.PageRightMargin = state.isSingleLine ? (window.innerWidth+200)/10 : 2;
-			osmd.EngravingRules.FixedMeasureWidth = true;
+			osmd.EngravingRules.FixedMeasureWidth = state.isSingleLine ? true : false; // 是否固定小节的宽度(小节同一宽度渲染)
 			osmd.EngravingRules.PageTopMargin = 10;
 			osmd.EngravingRules.PageTopMarginNarrow = 3;
 			osmd.EngravingRules.PageLeftMargin = 2;