[Open Sheet Music Display] 三：小节高亮以及和弦信息

介绍

在之前第一篇里写了区域高亮，但是效果并不是特别好，这次用官方提供的方式来实现高亮，并增加获取曲谱和弦的信息（吉他谱）

需求一：小节高亮

官方提供的实现方式如下：

let boundingbox = osmd.graphic.measureList[0][1].PositionAndShape
let node = osmd.drawer.drawBoundingBox(boundingbox, "#34cfeb")

效果如下：

image-20210614224421049.png

去除方式也很简单，因为之前调用 drawBoundingBox 返回了 node ，实现方式如下：

osmd.drawer.backend.removeNode(node)

当然在此基础上既可以继续扩展，看接下来的需求

需求二：为左右手设置遮罩，模拟只显示左/右手的效果

通过结合小节高亮以及之前的区分左右手的方法，可以实现聚焦左右手的效果。当然分成两种，以只显示右手为例：一种是对左手区域覆盖斑半透明白色，以达到突出右手部分；还有一种就是用亮色高亮右手，以达到突出右手部分。这两种实现方式都是一样的，只不过出来的效果不一样，这里以第一种方式为例：

// hand
// 0 无
// 1 右手
// 2 左手
let nodeList = []
function drawLeftRightHandMusicScore(hand, shadeColor = '#FFFFFF') {
    if (hand == 0) {
        return
    }
    // 清空节点
    nodeList.forEach(node => {
        osmd.drawer.backend.removeNode(node)
    })
    nodeList = []
    // index 0 右手 1 左手
    osmd.graphic.measureList.forEach((measureList) => {
        measureList.forEach((e, index) => {
            if (index == 0 && hand == 2 || index == 1 && hand == 1) {
                let boundingbox = e.PositionAndShape
                let node = osmd.drawer.drawBoundingBox(boundingbox, shadeColor)
                nodeList.push(node)
            }
        })
    })
}

效果如下：

image-20210614230530116.png

但是仔细看会发现实际生成的高亮部分会有边框，官方并没有提供设置的方法，通过分析生成的 html 得出以下解决办法：

document.querySelectorAll('g > rect').forEach(e => {
    e.setAttribute('stroke-width', 0)
})

通过选择器手动去除边框，效果如下：

image-20210614230728192.png

最后完整代码如下：

// hand
// 0 无
// 1 右手
// 2 左手
let nodeList = []
function drawLeftRightHandMusicScore(hand, shadeColor = '#FFFFFF') {
    if (hand == 0) {
        return
    }
    // 清空节点
    nodeList.forEach(node => {
        osmd.drawer.backend.removeNode(node)
    })
    nodeList = []
    // index 0 右手 1 左手
    osmd.graphic.measureList.forEach((measureList) => {
        measureList.forEach((e, index) => {
            if (index == 0 && hand == 2 || index == 1 && hand == 1) {
                let boundingbox = e.PositionAndShape
                let node = osmd.drawer.drawBoundingBox(boundingbox, shadeColor)
                nodeList.push(node)
            }
        })
    })
    // 去除默认生成的边框线
    document.querySelectorAll('g > rect').forEach(e => {
    e.setAttribute('stroke-width', 0)
})
}

需求三：获得和弦信息（针对吉他谱）

通过解析 measureList 来获取和弦信息，方法如下：

function getChordSymbolByMeasureList() {
    let chordResults = []
    let index = 0
    osmd.graphic.measureList.forEach(measureList => {
        measureList.forEach(e => {
            e.staffEntries.forEach(staffEntry => {
                staffEntry.graphicalChordContainers.forEach(chordContainer => {
                    let chordText = chordContainer.graphicalLabel.label.text
                    chordResults.push({ index: index, chordText: chordText })
                })
                index++
            })
        })
    })
    // 返回格式，可自行调整
    return {chordSymbols: chordResults}
}

结尾

后面应该不会再更了吧，感觉常用的都差不多了，后来如果真的又要搞一定更新！

（走过路过点个赞哈哈哈）