「VexFlow 小節開始終了線」の版間の差分
63行目: | 63行目: | ||
let nwidth = 1040; | let nwidth = 1040; | ||
let nheight = 320; | let nheight = 320; | ||
let nHeadMargin = 70; | |||
let nStaveWidth = 350; | |||
const f = new Factory({ | const f = new Factory({ | ||
renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale } | renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale } | ||
107行目: | 111行目: | ||
ctx.strokeStyle = defaultStyle.strokeStyle; | ctx.strokeStyle = defaultStyle.strokeStyle; | ||
const stave1 = new Stave(10, 50, | const stave1 = new Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx); | ||
stave1.addClef("treble").setContext(ctx); | stave1.addClef("treble").setContext(ctx); | ||
stave1.addTimeSignature('4/4').setContext(ctx); | stave1.addTimeSignature('4/4').setContext(ctx); | ||
stave1.draw(); | stave1.draw(); | ||
140行目: | 143行目: | ||
const stave2 = new Stave(stave1.width + stave1.x, stave1.y, | const stave2 = new Stave(stave1.width + stave1.x, stave1.y, nStaveWidth).setContext(ctx); | ||
stave2.draw(); | |||
const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx); | |||
stave3.draw(); | |||
const stave5 = new Stave(stave1.x, stave1.y + 100, | const stave5 = new Stave(stave1.x, stave1.y + 100, nHeadMargin + nStaveWidth).setContext(ctx); | ||
stave5.addClef("treble").setContext(ctx); | stave5.addClef("treble").setContext(ctx); | ||
stave5.addTimeSignature('4/4').setContext(ctx); | stave5.addTimeSignature('4/4').setContext(ctx); | ||
177行目: | 184行目: | ||
tie4.setContext(ctx).draw(); | tie4.setContext(ctx).draw(); | ||
const stave6 = new Stave(stave5.width + stave5.x, stave5.y, | const stave6 = new Stave(stave5.width + stave5.x, stave5.y, nStaveWidth).setContext(ctx); | ||
const notes6 = [ | const notes6 = [ | ||
206行目: | 213行目: | ||
const svgElement = document.querySelector('#Output svg'); | const svgElement = document.querySelector('#Output svg'); | ||
svgElement.style.backgroundColor = '#F5F5F5'; | svgElement.style.backgroundColor = '#F5F5F5'; | ||
const svgNS = 'http://www.w3.org/2000/svg'; | |||
const lineColor = '#EEEEEE'; | |||
</yjavascript> | </yjavascript> | ||
2024年3月10日 (日) 22:43時点における版
VexFlow 使い方に戻る。
概要
小節区切りの設定をする手順を示します。
コード | 表示内容 |
Barline.type.SINGLE | 一本線 |
Barline.type.DOUBLE | 二本線 |
Barline.type.END | 二本線で右側が太線 |
Barline.type.REPEAT_BEGIN | リピート開始記号 |
Barline.type.REPEAT_END | リピート終了記号 |
Barline.type.REPEAT_BOTH | リピート両側記号 |
Barline.type.NONE | 線無し |
小節開始終了線
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
(function(){
const {
Factory,
Stave,
StaveNote,
Formatter,
Voice,
StaveTie,
Renderer
} = Vex.Flow;
let nscale = 0.5
let nwidth = 1040;
let nheight = 320;
const f = new Factory({
renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
});
const ctx = f.getContext();
ctx.scale(nscale, nscale);
const defaultStyle = {
lineWidth: ctx.lineWidth,
strokeStyle: ctx.strokeStyle,
};
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {
ctx.beginPath();
ctx.moveTo(0 + i, 0);
ctx.lineTo(0 + i, nheight);
if (i % 100 === 0){
ctx.setLineWidth(1); // 線の太さ
ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
}
else{
ctx.setLineWidth(0.5); // 線の太さ
ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
}
ctx.stroke();
}
for (let i = 0; i <= nheight; i += 10) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(nwidth * (1 / nscale), i);
if (i % 100 === 0){
ctx.setLineWidth(1); // 線の太さ
ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
}
else{
ctx.setLineWidth(0.5); // 線の太さ
ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
}
ctx.stroke();
}
ctx.lineWidth = defaultStyle.lineWidth;
ctx.strokeStyle = defaultStyle.strokeStyle;
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.x, stave1.y + 100, 350).setContext(ctx);
stave2.addClef("treble").setContext(ctx);
stave2.addTimeSignature('4/4').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" }),
];
stave1.draw();
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],
});
Formatter.FormatAndDraw(ctx, stave1, notes1);
tie1.setContext(ctx).draw();
tie2.setContext(ctx).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();
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" }),
];
stave3.draw();
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();
// 灰色の背景
ctx.setFillStyle('#F5F5F5'); // 灰色に設定
ctx.fillRect(0, 0, f.width, f.height);
})();
const svgElement = document.querySelector('#Output svg');
svgElement.style.backgroundColor = '#F5F5F5';
const svgNS = 'http://www.w3.org/2000/svg';
const lineColor = '#EEEEEE';
</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 使い方に戻る。