「VexFlow test content」の版間の差分
編集の要約なし |
編集の要約なし |
||
| (同じ利用者による、間の4版が非表示) | |||
| 10行目: | 10行目: | ||
(function(){ | (function(){ | ||
var VF = Vex.Flow; | var VF = Vex.Flow; | ||
var UniqueIds; | |||
(function(){ | (function(){ | ||
let nscale = 0.68 | let nscale = 0.68 | ||
| 78行目: | 79行目: | ||
new VF.StaveNote({ keys: ["g/5"], duration: "q" }), | new VF.StaveNote({ keys: ["g/5"], duration: "q" }), | ||
]; | ]; | ||
function getUniqueNoteheadIds(notes) { | |||
// すべてのidを格納するためのセットを作成 | |||
uniqueIds = new Set(); | |||
// notesのchildrenの各要素について処理 | |||
notes.children.forEach(child => { | |||
// typeが"notehead"であるかチェックし、idを取得 | |||
if (child.attrs){ | |||
if(child.attrs.type === "NoteHead") { | |||
uniqueIds.add(child.attrs.id); | |||
} | |||
} | |||
}); | |||
// セットを配列に変換して戻り値として返す | |||
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 }); | ||
| 86行目: | 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-" + id); | |||
// 各IDに対して処理 | |||
autoUniqueIds.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"); | |||
}); | |||
} | |||
}); | |||
})(); | })(); | ||
</yjavascript> | </yjavascript> | ||
2024年3月29日 (金) 01:07時点における版
概要