「VexFlow スラー」の版間の差分
(→スラー) |
(→スラー) |
||
116行目: | 116行目: | ||
<syntaxhighlight lang="javascript" line start="1"> | <syntaxhighlight lang="javascript" line start="1"> | ||
<div id=" | <div id="yonet202403Mid_Output01"></div> | ||
<script> | <script> | ||
(function(){ | (function(){ | ||
128行目: | 128行目: | ||
} = Vex.Flow; | } = Vex.Flow; | ||
const f = new Factory({ renderer: { elementId: ' | const f = new Factory({ renderer: { elementId: 'yonet202403Mid_Output01', width: 1500, height: 400 } }); | ||
const ctx = f.getContext(); | const ctx = f.getContext(); | ||
// 小節をまたぐパターン | // 小節をまたぐパターン | ||
const stave1 = new Stave(10, 50, 350).setContext(ctx | const stave1 = new Stave(10, 50, 350).setContext(ctx); | ||
stave1.addClef("treble").setContext(ctx | stave1.addClef("treble").setContext(ctx); | ||
stave1.addTimeSignature('4/4').setContext(ctx). | stave1.addTimeSignature('4/4').setContext(ctx); | ||
const stave2 = new Stave(stave1.width + stave1.x, stave1.y, 350).setContext(ctx); | |||
const notes1 = [ | const notes1 = [ | ||
162行目: | 164行目: | ||
tie2.setContext(ctx).draw(); | tie2.setContext(ctx).draw(); | ||
// | // 描画エリアが縦に長くなるように変更 | ||
stave1.draw(); | |||
stave2 | stave2.draw(); | ||
const notes2 = [ | const notes2 = [ | ||
new StaveNote({ keys: ["a/4"], duration: "q" }), | |||
new StaveNote({ keys: ["b/4"], duration: "q" }), | |||
new StaveNote({ keys: ["c/5"], duration: "q" }), | |||
new StaveNote({ keys: ["d/5"], duration: "q" }), | new StaveNote({ keys: ["d/5"], duration: "q" }), | ||
]; | ]; | ||
193行目: | 194行目: | ||
tie4.setContext(ctx).draw(); | tie4.setContext(ctx).draw(); | ||
// 小節をまたがないパターン (新しい stave3) | |||
const stave3 = new Stave(stave2.width + stave2.x, stave2.y, 350).setContext(ctx); | |||
const notes3 = [ | |||
new StaveNote({ keys: ["e/5"], duration: "q" }), | |||
new StaveNote({ keys: ["f/5"], duration: "q" }), | |||
new StaveNote({ keys: ["g/5"], duration: "q" }), | |||
new StaveNote({ keys: ["a/5"], duration: "q" }), | |||
]; | |||
Formatter.FormatAndDraw(ctx, stave3, notes3); | |||
const tie5 = new StaveTie({ | |||
first_note: notes2[3], | |||
last_note: notes3[0], | |||
first_indices: [0], | |||
last_indices: [0], | |||
}); | |||
tie5.setContext(ctx).draw(); | |||
stave3.draw(); | |||
})(); | })(); | ||
</script> | </script> |
2024年3月10日 (日) 00:29時点における版
VexFlow 使い方に戻る。
概要
タイは同じ高さの音同士を区切らずに演奏する奏法に使います。
スラー
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
(function(){
const {
Factory,
Stave,
StaveNote,
Formatter,
Voice,
StaveTie,
} = Vex.Flow;
const f = new Factory({ renderer: { elementId: 'yonet202403Mid_Output01', width: 1500, height: 400 } });
const ctx = f.getContext();
// 小節をまたぐパターン
const stave1 = new Stave(10, 50, 350).setContext(ctx);
stave1.addClef("treble").setContext(ctx);
stave1.addTimeSignature('4/4').setContext(ctx);
const stave2 = new Stave(stave1.width + stave1.x, stave1.y, 350).setContext(ctx);
const notes1 = [
new StaveNote({ keys: ["d/5"], duration: "q" }),
new StaveNote({ keys: ["e/5"], duration: "q" }),
new StaveNote({ keys: ["f/5"], duration: "q" }),
new StaveNote({ keys: ["g/5"], duration: "q" }),
];
Formatter.FormatAndDraw(ctx, stave1, notes1);
const tie1 = new StaveTie({
first_note: notes1[1],
last_note: notes1[2],
first_indices: [0],
last_indices: [0],
});
const tie2 = new StaveTie({
first_note: notes1[2],
last_note: notes1[3],
first_indices: [0],
last_indices: [0],
});
tie1.setContext(ctx).draw();
tie2.setContext(ctx).draw();
// 描画エリアが縦に長くなるように変更
stave1.draw();
stave2.draw();
const notes2 = [
new StaveNote({ keys: ["a/4"], duration: "q" }),
new StaveNote({ keys: ["b/4"], duration: "q" }),
new StaveNote({ keys: ["c/5"], duration: "q" }),
new StaveNote({ keys: ["d/5"], duration: "q" }),
];
Formatter.FormatAndDraw(ctx, stave2, notes2);
const tie3 = new StaveTie({
first_note: notes2[1],
last_note: notes2[2],
first_indices: [0],
last_indices: [0],
});
const tie4 = new StaveTie({
first_note: notes2[2],
last_note: notes2[3],
first_indices: [0],
last_indices: [0],
});
tie3.setContext(ctx).draw();
tie4.setContext(ctx).draw();
// 小節をまたがないパターン (新しい stave3)
const stave3 = new Stave(stave2.width + stave2.x, stave2.y, 350).setContext(ctx);
const notes3 = [
new StaveNote({ keys: ["e/5"], duration: "q" }),
new StaveNote({ keys: ["f/5"], duration: "q" }),
new StaveNote({ keys: ["g/5"], duration: "q" }),
new StaveNote({ keys: ["a/5"], duration: "q" }),
];
Formatter.FormatAndDraw(ctx, stave3, notes3);
const tie5 = new StaveTie({
first_note: notes2[3],
last_note: notes3[0],
first_indices: [0],
last_indices: [0],
});
tie5.setContext(ctx).draw();
stave3.draw();
})();
</script>
StaveTie というオブジェクトを利用します。
配列で [new StaveTie({オブジェクト}), …] という構造のものを用意し、配列を代入した変数を作ります。
const Ties1 = [new StaveTie({オブジェクト}), new StaveTie({オブジェクト})]; のような形式です。オブジェクトには以下のようなキーと値を設定します。
- first_note: タイの始まりの音符を設定します。例:notes1[2]
- last_note: タイの終わりの音符を設定します。例:notes1[3]
- first_indices: タイの始まりの音符の和音の番号を設定します。和音になっていない場合は配列番号 0 を指定します。例:[0]
- last_indices: タイの終わりの音符の和音の番号を設定します。和音になっていない場合は配列番号 0 を指定します。例:[0]
VexFlow 使い方に戻る。