feat: 谱面编辑渐强渐弱线优化

src/view/plugins/move-music-score/index.tsx

@@ -219,6 +219,12 @@ export const filterMoveData = async () => {
 				};
 				if (n.type === "vf-lineGroup") {
 					item.dx = n.dx;
+					// 需要获取当前渐强渐弱线所对应的小节的宽度，算出相对当前宽度的比例，用于不同设备回显用
+					const measureNum = document.getElementById(n.id)?.getAttribute('data-mnum');
+					const measureWidth = measureNum ? document.querySelector(`g[data-num='${measureNum}']`)?.getBoundingClientRect()?.width : 0;
+					if (measureWidth) {
+						item.dxRate = n.dx / measureWidth;
+					}
 				}
 				if (n.id.includes('text')) {
 					// let copyDom = document.querySelector("#" + n.id)!.cloneNode(true) as SVGSVGElement
@@ -405,6 +411,7 @@ const resetMoveNote = () => {
 		moveData.modelList[i].isMove = false;
 		moveData.modelList[i].isDelete = false;
 		moveData.modelList[i].dx = 0;
+		moveData.modelList[i].dxRate = 0;
 		renderSvgItem(moveData.modelList[i]);
 		if (moveData.modelList[i].type === "vf-lineGroup") {
 			renderLineGroup(moveData.modelList[i]);
@@ -476,10 +483,22 @@ function renderLineGroup(lineGroup: any) {
 				dx2 = dx2[0] && !isNaN(Number(dx2[0])) ? Number(dx2[0]) : 0;
 
 				if (dx1 && dx2) {
+					// 根据dxRate比例转换dx
+					let targetDx = lineGroup.dx;
+					if (lineGroup.dxRate) {
+						// 需要获取当前渐强渐弱线所对应的小节的宽度，算出相对当前宽度的比例，用于不同设备回显用
+						const measureNum = document.getElementById(lineGroup.id)?.getAttribute('data-mnum');
+						const measureWidth = measureNum ? document.querySelector(`g[data-num='${measureNum}']`)?.getBoundingClientRect()?.width : 0;
+						targetDx = measureWidth ? measureWidth * lineGroup.dxRate : lineGroup.dx;
+					}
+					// targetDx = targetDx * state.zoom;
+					if (storeData.isApp) {
+						targetDx = targetDx * state.zoom;
+					}
 					if (dx1 < dx2) {
-						d = d.replace(dx2, lineGroup.d2 + lineGroup.dx + "");
+						d = d.replace(dx2, lineGroup.d2 + targetDx + "");
 					} else {
-						d = d.replace(dx1, lineGroup.d2 + lineGroup.dx + "");
+						d = d.replace(dx1, lineGroup.d2 + targetDx + "");
 					}
 					path.setAttribute("d", d);
 				}