|
@@ -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' // 小节的高度
|
|
|
}
|