「VexFlow test content」の版間の差分
(→概要) |
(→概要) |
||
| 11行目: | 11行目: | ||
var VF = Vex.Flow; | var VF = Vex.Flow; | ||
var allUniqueIds = []; | var allUniqueIds = []; | ||
var allFlagUniqueIds = []; | |||
(function(){ | (function(){ | ||
var UniqueIds; | var UniqueIds; | ||
| 125行目: | 126行目: | ||
return Array.from(uniqueIds); | return Array.from(uniqueIds); | ||
} | } | ||
function updateAllUniqueIds(UniqueIds) { | function updateAllUniqueIds(UniqueIds) { | ||
// allUniqueIdsにUniqueIdsを追加または結合 | // allUniqueIdsにUniqueIdsを追加または結合 | ||
| 140行目: | 140行目: | ||
// 更新されたallUniqueIdsを戻り値として返す | // 更新されたallUniqueIdsを戻り値として返す | ||
return allUniqueIds; | return allUniqueIds; | ||
} | |||
function updateAllFlagUniqueIds(UniqueIds) { | |||
// allUniqueIdsにUniqueIdsを追加または結合 | |||
if (allFlagUniqueIds.length === 0) { | |||
// allUniqueIdsが空の場合、UniqueIdsをそのままコピー | |||
allFlagUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。 | |||
} else { | |||
UniqueIds.forEach(id => { | |||
if (!allFlagUniqueIds.includes(id)) { | |||
allFlagUniqueIds.push(id); | |||
} | |||
}); | |||
} | |||
// 更新されたallUniqueIdsを戻り値として返す | |||
return allFlagUniqueIds; | |||
} | } | ||
SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0, 1, 2, 3, 4, 5, 6, 7]); | SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [0, 1, 2, 3, 4, 5, 6, 7]); | ||
allFlagUniqueIds = updateAllUniqueIds(SteveNoteUniqueIds); | |||
UniqueIds = getUniqueNoteheadIds(notes1[0]); | UniqueIds = getUniqueNoteheadIds(notes1[0]); | ||
allUniqueIds = updateAllUniqueIds(UniqueIds); | allUniqueIds = updateAllUniqueIds(UniqueIds); | ||
| 160行目: | 178行目: | ||
// 透明にするIDの配列 | // 透明にするIDの配列 | ||
// 例としてここでIDを指定 | // 例としてここでIDを指定 | ||
let autoUniqueIds = allUniqueIds.map(id => "vf-" + id); | let autoUniqueIds = allUniqueIds.map(id => "vf-" + id); | ||
| 172行目: | 191行目: | ||
path.setAttribute("fill", "none"); | path.setAttribute("fill", "none"); | ||
path.setAttribute("stroke", "none"); | path.setAttribute("stroke", "none"); | ||
}); | |||
} | |||
}); | |||
let autoFlagUniqueIds = allFlagUniqueIds.map(id => "vf-" + id); | |||
autoFlagUniqueIds.forEach(id => { | |||
// 該当するIDの要素を取得 | |||
let element = svgElement.getElementById(id); | |||
if (element) { | |||
// 該当する要素があれば、描画内容を透明にする | |||
let paths = element.querySelectorAll("> path"); | |||
paths.forEach(path => { | |||
var dAttribute = path.getAttribute('d'); | |||
// カンマで区切られた数値の数を数えます | |||
var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数 | |||
// 数値の数が23であれば、このpath要素は求めるものです | |||
if (numberOfValues === 23) { | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
} | |||
}); | }); | ||
} | } | ||
2024年4月5日 (金) 00:42時点における版
概要