Browse Source

feat: 音符参照点坐标居中

TIANYONG 3 months ago
parent
commit
21422ae80e
2 changed files with 12 additions and 6 deletions
  1. 10 4
      src/view/selection/index.tsx
  2. 2 2
      vite.config.ts

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

@@ -41,13 +41,14 @@ const calcNoteData = () => {
 			staveBox: null as any,
 		};
 		if (!notesList.includes(item.noteId)) {
-			let staveBbox: any = {};
+			let staveBbox: any = {}, customBgBox: any = {};
 			if (item.stave?.attrs?.id) {
 				const staveEle = document.querySelector(`#${item.stave.attrs.id}`);
 				staveBbox = staveEle?.parentElement?.parentElement?.getBoundingClientRect?.() || {
 					x: 0,
 					width: 0,
 				};
+				customBgBox = staveEle?.querySelector('.vf-custom-bg')?.getBoundingClientRect() || { y: 0, height: 0 }
 				// console.log("🚀 ~ staveBbox:", staveBbox.height)
 			}
 			if (item.svgElement) {
@@ -78,14 +79,16 @@ const calcNoteData = () => {
 						}
 						
 					} else {
+						const needTransY = -(staveBbox.height - customBgBox.height) / 2 + "px";
 						noteItem.bbox = {
 							left: noteBbox.x - parentLeft - noteBbox.width / 4 + "px",
-							top: staveBbox.y - parentTop + "px",
+							top: customBgBox.y ? customBgBox.y - parentTop + "px" : staveBbox.y - parentTop + "px",
 							width: noteBbox.width * 1.5 + "px",
 							height: staveBbox.height + "px",
 							x: item.bbox?.x,
 							y: item.bbox?.y,
-							originWidth: item.bbox?.width
+							originWidth: item.bbox?.width,
+							transform: `translateY(${needTransY})`
 						};
 					}
 					
@@ -227,8 +230,11 @@ export default defineComponent({
 						const currItem = selectData.staves.find(stave => {
 							return stave.MeasureNumberXML === item.MeasureNumberXML	
 						})
+						// 获取stave里面vf-custom-bg的位置坐标,才是准确的坐标
+						// const currBgX = document.getElementById(currItem.stave.attrs.id)?.querySelector('.vf-custom-bg')?.getBoundingClientRect()?.x || 0;
+						const currBgX = currItem.stave?.attrs && currItem.stave.attrs.id ? document.getElementById(currItem.stave.attrs.id)?.querySelector('.vf-custom-bg')?.getBBox()?.x * state.zoom || 0 : 0;
 						return currItem && {
-							left: currItem.staveBox.left,
+							left: currBgX ? currBgX + 'px' : currItem.staveBox.left,
 							top: currItem.staveBox.top,
 							height: selectData.measureHeight + 'px'  // 小节的高度
 						}

+ 2 - 2
vite.config.ts

@@ -76,8 +76,8 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         // target: "https://test.lexiaoya.cn",
         // target: "https://kt.colexiu.com",
-        // target: "https://test.resource.colexiu.com", // 内容平台开发环境,内容平台开发,需在url链接上加上isCbs=true
-        target: "https://test.kt.colexiu.com",
+        target: "https://test.resource.colexiu.com", // 内容平台开发环境,内容平台开发,需在url链接上加上isCbs=true
+        // target: "https://test.kt.colexiu.com",
         // target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),