「VexFlow test content」の版間の差分
(→概要) |
(→概要) |
||
(同じ利用者による、間の11版が非表示) | |||
149行目: | 149行目: | ||
//SINGLE:1, DOUBLE:2, END:3, REPEAT_BEGIN:4, REPEAT_END:5, REPEAT_BOTH:6, NONE:7 | //SINGLE:1, DOUBLE:2, END:3, REPEAT_BEGIN:4, REPEAT_END:5, REPEAT_BOTH:6, NONE:7 | ||
const gracenotes1 = [ | const gracenotes1 = [ | ||
new VF.GraceNote({ keys: ['a/ | new VF.GraceNote({ keys: ['a/5', 'c/5', 'e/5'], duration: '8', slash: true }) | ||
.addModifier(new VF.Accidental('n'), 0) | .addModifier(new VF.Accidental('n'), 0) | ||
.addModifier(new VF.Accidental('#'), 1) | .addModifier(new VF.Accidental('#'), 1) | ||
156行目: | 156行目: | ||
const notes1 = [ | const notes1 = [ | ||
new VF.StaveNote({ keys: [" | new VF.StaveNote({ keys: ["a/5"], duration: "2" }), | ||
new VF.StaveNote({ keys: [" | new VF.StaveNote({ keys: ["a/5"], duration: "8" }), | ||
new VF.StaveNote({ keys: ["e/5"], duration: "8" }), | new VF.StaveNote({ keys: ["e/5"], duration: "8" }), | ||
new VF.StaveNote({ keys: ["f/5"], duration: "8" }), | new VF.StaveNote({ keys: ["f/5"], duration: "8" }), | ||
new VF.StaveNote({ keys: ["g/5"], duration: "8" }), | new VF.StaveNote({ keys: ["g/5"], duration: "8" }), | ||
]; | ]; | ||
notes1[ | notes1[1].addModifier(new VF.Articulation('a.').setPosition(3)); | ||
notes1[ | notes1[1].addModifier(new VF.GraceNoteGroup(gracenotes1, true), 0); | ||
SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [ | SteveNoteUniqueIds = getUniqueStaveNotesIds(notes1, [1]); | ||
allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds); | allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds); | ||
UniqueIds = getUniqueNoteheadIds(notes1[0]); | UniqueIds = getUniqueNoteheadIds(notes1[0]); | ||
allUniqueIds = updateAllUniqueIds(UniqueIds); | allUniqueIds = updateAllUniqueIds(UniqueIds); | ||
212行目: | 206行目: | ||
if (element) { | if (element) { | ||
// 該当する要素があれば、描画内容を透明にする | // 該当する要素があれば、描画内容を透明にする | ||
let | let paths = element.querySelectorAll('path'); | ||
paths.forEach(path => { | |||
var dAttribute = path.getAttribute('d'); | var dAttribute = path.getAttribute('d'); | ||
// カンマで区切られた数値の数を数えます | // カンマで区切られた数値の数を数えます | ||
var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数 | var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数 | ||
// | if (numberOfValues === 9) { | ||
if (numberOfValues === | var firstCoord = dAttribute.split(',')[0]; | ||
path.setAttribute("fill", "none"); | if (dAttribute.startsWith('M')) { | ||
path.setAttribute("stroke", "none"); | var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数 | ||
var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数 | |||
// 座標の差を計算します | |||
if(CnumberOfValues > 0){ | |||
var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat); | |||
var xdiff = coords[0] - coords[2]; // xの差を計算 | |||
var ydiff = coords[1] - coords[3]; // yの差を計算 | |||
// xが0でyが0より大きい場合、描画内容を透明にします | |||
if (xdiff !== 0) { | |||
if(ydiff === 0){ | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
else if (numberOfValues === 1) { | |||
var firstCoord = dAttribute; | |||
if (dAttribute.startsWith('M')) { | |||
var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数 | |||
// 座標の差を計算します | |||
if(LnumberOfValues > 0){ | |||
var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat); | |||
var xdiff = coords[0] - coords[2]; // xの差を計算 | |||
var ydiff = coords[1] - coords[3]; // yの差を計算 | |||
// xが0でyが0より大きい場合、描画内容を透明にします | |||
if (xdiff < -17) { | |||
if (xdiff > -18) { | |||
if(ydiff === 0){ | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
else if (numberOfValues === 35 || numberOfValues === 95 || numberOfValues === 41) { | |||
path.setAttribute("fill", "none"); | |||
path.setAttribute("stroke", "none"); | |||
} | } | ||
}); | }); |
2024年4月6日 (土) 16:44時点における版
概要