Przeglądaj źródła

feat: 节拍指针位置优化

TIANYONG 2 miesięcy temu
rodzic
commit
441314bf41
3 zmienionych plików z 10 dodań i 6 usunięć
  1. 4 2
      src/helpers/metronome.ts
  2. 1 0
      src/state.ts
  3. 5 4
      src/view/selection/index.tsx

+ 4 - 2
src/helpers/metronome.ts

@@ -208,7 +208,8 @@ class Metronome {
 			return;
 		}
 		metronomeData.isClick = false;
-		if (currentTime === 0) {
+		// 非选段状态,没播放时,不显示节拍指针
+		if (currentTime === 0 && !state.sectionStatus) {
 			metronomeData.activeMetro = {}
 		}
 	};
@@ -460,7 +461,8 @@ class Metronome {
 						left: left?.indexOf("%") > -1 ? `calc(${left})` : left,
 						measureNumberXML: measure.measureNumberXML,
 						isRestFlag: measure.isRestFlag,
-						stepList: measure.stepList
+						stepList: measure.stepList,
+						isPercent: left?.indexOf("%") > -1, // 是否是根据小节宽度等分
 					});
 				}
 			}

+ 1 - 0
src/state.ts

@@ -1359,6 +1359,7 @@ export const setSection = (start: number, end: number, userSpeed?: number) => {
 export const hanldeDirectSelection = (list: any[]) => {
   if (!Array.isArray(list) || list.length !== 2) return;
   state.sectionStatus = true;
+  metronomeData.activeIndex = null;
   setTimeout(() => {
     state.section = formateSelectMearure(list);
     // 选段完成后,需要根据预报小节的速度,设置右下角显示的速度

+ 5 - 4
src/view/selection/index.tsx

@@ -137,8 +137,9 @@ export default defineComponent({
 							} catch (error) {}
 		
 							const staveBbox = staveEle?.getBoundingClientRect?.() || { x: 0, width: 0, y: 0, height: 0 };
-							const timesignatureDom = staveEle?.querySelector('.vf-timesignature')
-							if (timesignatureDom) {
+							const timesignatureDom = staveEle?.querySelector('.vf-timesignature') || staveEle?.querySelector('.vf-keysignature')
+							// 休止符才是根据小节宽度等分
+							if (timesignatureDom && item.measures.length == 1) {
 								const timesignatureBbox = timesignatureDom.getBoundingClientRect()
 								const leftWidth = timesignatureBbox.x + timesignatureBbox.width - staveBbox.x
 								beatLeft = leftWidth
@@ -330,7 +331,7 @@ export default defineComponent({
 							metronomeData.cursorMode === 2 &&
 							item.MeasureNumberXML === metronomeData.activeMetro?.measureNumberXML &&
 							state.times[state.activeNoteIndex].MeasureNumberXML === item.MeasureNumberXML;
-							//console.log('显示节拍指针',lineShow,state.times[state.activeNoteIndex].MeasureNumberXML,item.MeasureNumberXML,metronomeData.activeMetro?.measureNumberXML)
+							// console.log('显示节拍指针',lineShow,state.times[state.activeNoteIndex].MeasureNumberXML,item.MeasureNumberXML,metronomeData.activeMetro?.measureNumberXML)
 						return (
 							<>
 								{item.staveBox && (
@@ -353,7 +354,7 @@ export default defineComponent({
 										}}
 									>
 										{lineShow && (
-											<div style={{height: selectData.measureHeight + 'px', position: 'relative', width: beatMeasureWidths[item.MeasureNumberXML].beatWidth, left: beatMeasureWidths[item.MeasureNumberXML].beatLeft + 'px'}}>
+											<div style={{height: selectData.measureHeight + 'px', position: 'relative', width: metronomeData.activeMetro.isPercent ? beatMeasureWidths[item.MeasureNumberXML].beatWidth : '100%', left: metronomeData.activeMetro.isPercent ? beatMeasureWidths[item.MeasureNumberXML].beatLeft + 'px' : 0}}>
 												<div 
 												class={[
 													styles.line,