声轨 播放位置 调整

src/view/music-score/combineAudio/index.module.less

@@ -1,4 +1,8 @@
 .combineAudio {
+   position: absolute;
+   left: 0;
+   top: 0;
+   z-index: 1;
    .combineAudioImg {
       position: absolute;
       z-index: 119;

src/view/music-score/combineAudio/index.tsx

@@ -12,6 +12,10 @@ export default defineComponent({
       onMounted(() => {
          const parent = document.querySelector("#osmdCanvasPage1")
          const elements = document.querySelectorAll("g[data-trackIdx]")
+         const musicContainerPos = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
+            top: 0,
+            left: 0
+         }
          const combineMusicsIndexs = Object.keys(audioData.combineMusics)
          elements.forEach(element => {
             const dataTrackIdx = element.getAttribute("data-trackIdx")
@@ -19,8 +23,8 @@ export default defineComponent({
             if (dataTrackIdx && combineMusicsIndexs.includes(dataTrackIdx)) {
                const elementRect = element.getBoundingClientRect()
                const height = elementRect.height
-               let top = elementRect.top + height / 2 - 11
-               let left = elementRect.left - 22 - 10
+               let top = elementRect.top + height / 2 - 11 - musicContainerPos.top
+               let left = elementRect.left - 22 - 10 - musicContainerPos.left
                elementsData.value.push({
                   index: parseInt(dataTrackIdx),
                   top: top,
@@ -50,7 +54,7 @@ export default defineComponent({
                         }}
                         style={{
                            top: item.top + "px",
-                           left: item.left - ((combineZoom.value - 1) * 22) + "px",
+                           left: item.left - (combineZoom.value - 1) * 22 + "px",
                            "--combineZoom": combineZoom.value
                         }}
                         src={audioData.combineIndex === item.index ? openImg : lockImg}