「VexFlow test content」の版間の差分
編集の要約なし |
編集の要約なし |
||
| 10行目: | 10行目: | ||
(function(){ | (function(){ | ||
var VF = Vex.Flow; | var VF = Vex.Flow; | ||
var UniqueIds; | |||
(function(){ | (function(){ | ||
let nscale = 0.68 | let nscale = 0.68 | ||
| 81行目: | 82行目: | ||
function getUniqueNoteheadIds(notes) { | function getUniqueNoteheadIds(notes) { | ||
// すべてのidを格納するためのセットを作成 | // すべてのidを格納するためのセットを作成 | ||
uniqueIds = new Set(); | |||
// notesのchildrenの各要素について処理 | // notesのchildrenの各要素について処理 | ||
| 96行目: | 97行目: | ||
return Array.from(uniqueIds); | return Array.from(uniqueIds); | ||
} | } | ||
UniqueIds = getUniqueNoteheadIds(notes1[0]); | |||
var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | var stave1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | ||
| 105行目: | 106行目: | ||
stave1Voice.draw(ctx, stave1); | stave1Voice.draw(ctx, stave1); | ||
})(); | })(); | ||
var svgContainer = document.getElementById('yonet202403Mid_Output01'); | |||
var svgElement = svgContainer.querySelector('svg'); | |||
// 透明にするIDの配列 | |||
// 例としてここでIDを指定 | |||
let autoUniqueIds = UniqueIds.map(id => "vf-auto" + id); | |||
// 各IDに対して処理 | |||
uniqueIds.forEach(id => { | |||
// 該当するIDの要素を取得 | |||
let element = svgElement.getElementById(id); | |||
if (element) { | |||
// 該当する要素があれば、描画内容を透明にする | |||
let paths = element.querySelectorAll("path"); | |||
paths.forEach(path => { | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
}); | |||
} | |||
}); | |||
// 変更を加えたSVGを取得 | |||
let modifiedSvgString = svgElement.outerHTML; | |||
})(); | })(); | ||
</yjavascript> | </yjavascript> | ||
2024年3月29日 (金) 01:03時点における版
概要