|
@@ -207,6 +207,50 @@ export default defineComponent({
|
|
|
// if (svgBBox.y < 0) {
|
|
|
// svg.setAttribute('height', Number(svg.getAttribute('height')) - svgBBox.y + '')
|
|
|
// }
|
|
|
+ const stafflines: SVGAElement[] = Array.from((container.value as HTMLElement).querySelectorAll(".staffline"));
|
|
|
+ const musicalDistance = 28; // 音阶与第一条线谱的间距,默认设置为28
|
|
|
+ for (let i = 0, len = stafflines.length; i < len; i++) {
|
|
|
+ const staffline = stafflines[i];
|
|
|
+ const stafflineBox = staffline.getBBox();
|
|
|
+ const stafflineCenter = stafflineBox.y + stafflineBox.height / 2;
|
|
|
+ const paths: SVGAElement[] = Array.from(staffline.querySelectorAll(".vf-measure > .vf-stave path"));
|
|
|
+ // 获取第一个线谱的y轴坐标
|
|
|
+ const firstLinePathY = paths[0]?.getBBox().y || 0
|
|
|
+
|
|
|
+ let vftexts = Array.from(staffline.querySelectorAll(".vf-text > text")).filter((n: any) => n.getBBox().y < stafflineCenter);
|
|
|
+ // 修改音阶和线谱的间距
|
|
|
+ const clefList = ['C', 'G', 'D', 'A', 'E', 'B', 'F#', 'C#', 'G#', 'F', 'Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb', 'Fb', 'D#', 'A#', 'E#']
|
|
|
+ const btransList = ['Bb', 'Eb', 'Ab', 'Db', 'Gb', 'Cb', 'Fb']
|
|
|
+ const jtrsnsList = ['F#', 'C#', 'G#', 'D#', 'A#', 'E#', 'B#']
|
|
|
+ vftexts.forEach((label: any) => {
|
|
|
+ const labelText = label.textContent as string
|
|
|
+ if (clefList.includes(labelText)){
|
|
|
+ const _y = Number(label.getAttribute("y"))
|
|
|
+ const endY = firstLinePathY ? firstLinePathY - musicalDistance : _y
|
|
|
+ label.setAttribute("y", endY)
|
|
|
+ }
|
|
|
+ if (btransList.includes(labelText)) {
|
|
|
+ label.textContent = labelText.replace('b','♭')
|
|
|
+ }
|
|
|
+ if (jtrsnsList.includes(labelText)) {
|
|
|
+ label.textContent = labelText.replace('#','♯')
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(() => resetGlobalText())
|
|
|
+
|
|
|
+ }
|
|
|
+ const resetGlobalText = () => {
|
|
|
+ if (!container.value) return
|
|
|
+ // 速度dom
|
|
|
+ const vfstavetempo: SVGAElement[] = Array.from(container.value.querySelectorAll('.vf-stavetempo'))
|
|
|
+ if (detailState.isDaYaCategory) {
|
|
|
+ vfstavetempo.forEach((child: SVGAElement, i: number) => {
|
|
|
+ child.style.display = 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
/**
|
|
|
* 重新渲染曲谱方法
|