缩放倍率处理

src/page-gym/detail/index.tsx

@@ -247,13 +247,9 @@ export default defineComponent({
 			() => state.setting.displayFingering,
 			() => {
 				if (state.fingeringInfo.direction === "vertical") {
-					if (state.setting.displayFingering) {
-						document.getElementById("musicAndSelection")?.style.removeProperty("--music-zoom");
-					} else {
-						nextTick(() => {
-							resetMusicScore();
-						});
-					}
+					nextTick(() => {
+						resetMusicScore();
+					});
 				}
 			}
 		);

src/state.ts

@@ -145,6 +145,8 @@ const state = reactive({
 	multitrack: 0,
 	/** 缩放 */
 	zoom: 0.8,
+	/** 渲染曲谱比例 */
+	musicZoom: 1,
 	/** 练习,评测是否是选段模式 */
 	isSelectMeasureMode: false,
 	/** 是否是评分显示 */
@@ -470,9 +472,9 @@ export const scrollViewNote = () => {
 	const musicAndSelection = document.getElementById(state.scrollContainer)!;
 	if (!cursorElement || !musicAndSelection || offsetTop === cursorElement.offsetTop) return;
 	offsetTop = cursorElement.offsetTop;
-	if (cursorElement.offsetTop > 50) {
+	if (offsetTop > 50) {
 		musicAndSelection.scrollTo({
-			top: cursorElement.offsetTop - 25,
+			top: offsetTop * state.musicZoom - 25,
 			behavior: "smooth",
 		});
 	} else {

src/view/music-score/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, nextTick, onBeforeMount, reactive, ref } from "vue";
+import { computed, defineComponent, onMounted, reactive, ref } from "vue";
 import { formatXML, onlyVisible } from "../../helpers/formateMusic";
 // // @ts-ignore
 import { OpenSheetMusicDisplay } from "/osmd-extended/src";
@@ -14,20 +14,13 @@ const musicData = reactive({
 	showSelection: false, // 可以加载点击浮层
 	isRenderLoading: true,
 	score: "",
+	containerWidth: 0
 });
 
 /** 重新计算曲谱渲染比例 */
 export const resetMusicScore = () => {
-	const svgEL = document.querySelector("#osmdSvgPage1");
-	const svgContainer = document.getElementById("osmdCanvasPage1");
-	if (svgEL && svgContainer) {
-		let width: any = svgEL?.getAttribute("width");
-		width = isNaN(Number(width)) ? 0 : Number(width);
-		if (width) {
-			const zoom = svgContainer.offsetWidth / width;
-			document.getElementById("musicAndSelection")?.style.setProperty("--music-zoom", zoom + "");
-		}
-	}
+	const contaienrWidth = document.getElementById('musicAndSelection')?.offsetWidth || 625
+	state.musicZoom = contaienrWidth / musicData.containerWidth
 };
 
 /** 重新渲染曲谱 */
@@ -59,7 +52,7 @@ export default defineComponent({
 		};
 		const init = async () => {
 			const container = document.getElementById("musicAndSelection");
-			// console.log("🚀 ~ container:", container);
+			console.log("🚀 ~ container:", container);
 			if (!container || !musicData.score) return;
 			const osmd = new OpenSheetMusicDisplay(container, {
 				drawTitle: false,
@@ -94,7 +87,13 @@ export default defineComponent({
 			emit("rendered", osmd);
 			musicData.showSelection = true;
 		};
-		onBeforeMount(async () => {
+		/** 获取渲染容器的宽度 */
+		const getContainerWidth = () => {
+			musicData.containerWidth = document.getElementById('musicAndSelection')?.offsetWidth || 625
+			// console.log(musicData.containerWidth)
+		}
+		onMounted(async () => {
+			getContainerWidth()
 			setRenderType();
 			await getXML();
 			await init();
@@ -115,7 +114,7 @@ export default defineComponent({
 			return result;
 		});
 		return () => (
-			<div id="musicAndSelection" class={[isInTheGradualRange.value && styles.inGradualRange]}>
+			<div id="musicAndSelection" style={{"--music-zoom" : state.musicZoom}} class={[isInTheGradualRange.value && styles.inGradualRange]}>
 				{musicData.showSelection && <Selection />}
 			</div>
 		);

vite.config.ts

@@ -52,8 +52,8 @@ export default defineConfig({
 		port: 3000,
 		proxy: {
 			"^/gym/.*": {
-				// target: "https://mstutest.dayaedu.com",
-				target: "https://online.dayaedu.com",
+				target: "https://mstutest.dayaedu.com",
+				// target: "https://online.dayaedu.com",
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/gym/, ""),
 			},