「VexFlow タイ」の版間の差分
(→タイ) |
(→タイ) |
||
(同じ利用者による、間の3版が非表示) | |||
24行目: | 24行目: | ||
Accidental, | Accidental, | ||
Beam, | Beam, | ||
StaveTie, | |||
} = Vex.Flow; | } = Vex.Flow; | ||
43行目: | 44行目: | ||
new StaveTie({ | new StaveTie({ | ||
first_note: notes1[1], | first_note: notes1[1], | ||
last_note: notes1[2], | |||
first_indices: [0], | |||
last_indices: [0], | |||
}), | |||
new StaveTie({ | |||
first_note: notes1[2], | |||
last_note: notes1[3], | last_note: notes1[3], | ||
first_indices: [0], | first_indices: [0], | ||
55行目: | 62行目: | ||
})(); | })(); | ||
</yjavascript> | </yjavascript> | ||
コードは以下のとおりです。 | |||
<syntaxhighlight lang="javascript" line start="1"> | |||
<div id="yonet202303Mid_Output01"></div> | |||
<script> | |||
(function(){ | |||
const { | |||
Factory, | |||
Stave, | |||
StaveNote, | |||
GhostNote, | |||
Formatter, | |||
Voice, | |||
Barline, | |||
Accidental, | |||
Beam, | |||
StaveTie, | |||
} = Vex.Flow; | |||
const f = new Factory({ renderer: { elementId: 'yonet202303Mid_Output01', width: 1500, height: 195 } }); | |||
const ctx = f.getContext(); | |||
const stave1 = new Stave(10, 50, 350).setContext(ctx).draw(); | |||
stave1.addClef("treble").setContext(ctx).draw(); | |||
stave1.addTimeSignature('C').setContext(ctx).draw(); | |||
const notes1 = [ | |||
new StaveNote({ keys: ["d/5"], duration: "8" }), | |||
new StaveNote({ keys: ["d/5"], duration: "8" }), | |||
new StaveNote({ keys: ["d/5"], duration: "4" }), | |||
new StaveNote({ keys: ["d/5"], duration: "2" }), | |||
]; | |||
Formatter.FormatAndDraw(ctx, stave1, notes1); | |||
const ties1 = [ | |||
new StaveTie({ | |||
first_note: notes1[1], | |||
last_note: notes1[2], | |||
first_indices: [0], | |||
last_indices: [0], | |||
}), | |||
new StaveTie({ | |||
first_note: notes1[2], | |||
last_note: notes1[3], | |||
first_indices: [0], | |||
last_indices: [0], | |||
}), | |||
]; | |||
ties1.forEach((t) => { | |||
t.setContext(ctx).draw(); | |||
}); | |||
})(); | |||
</script> | |||
</syntaxhighlight> | |||
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 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 |
2023年3月17日 (金) 23:07時点における最新版
VexFlow 使い方に戻る。
概要
タイは同じ高さの音同士を区切らずに演奏する奏法に使います。
タイ
コードは以下のとおりです。
<div id="yonet202303Mid_Output01"></div>
<script>
(function(){
const {
Factory,
Stave,
StaveNote,
GhostNote,
Formatter,
Voice,
Barline,
Accidental,
Beam,
StaveTie,
} = Vex.Flow;
const f = new Factory({ renderer: { elementId: 'yonet202303Mid_Output01', width: 1500, height: 195 } });
const ctx = f.getContext();
const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
stave1.addClef("treble").setContext(ctx).draw();
stave1.addTimeSignature('C').setContext(ctx).draw();
const notes1 = [
new StaveNote({ keys: ["d/5"], duration: "8" }),
new StaveNote({ keys: ["d/5"], duration: "8" }),
new StaveNote({ keys: ["d/5"], duration: "4" }),
new StaveNote({ keys: ["d/5"], duration: "2" }),
];
Formatter.FormatAndDraw(ctx, stave1, notes1);
const ties1 = [
new StaveTie({
first_note: notes1[1],
last_note: notes1[2],
first_indices: [0],
last_indices: [0],
}),
new StaveTie({
first_note: notes1[2],
last_note: notes1[3],
first_indices: [0],
last_indices: [0],
}),
];
ties1.forEach((t) => {
t.setContext(ctx).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 使い方に戻る。