介绍
在之前第一篇里写了区域高亮，但是效果并不是特别好，这次用官方提供的方式来实现高亮，并增加获取曲谱和弦的信息（吉他谱）
需求一：小节高亮
官方提供的实现方式如下：
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}
}
结尾
后面应该不会再更了吧，感觉常用的都差不多了，后来如果真的又要搞一定更新！
（走过路过点个赞哈哈哈）
