「VexFlow スラー」の版間の差分

2024年3月10日 (日) 01:04時点における版

概要

　スラーは異なる高さの音同士を区切らずに演奏する奏法に使います。

スラー

　コードは以下のとおりです。

<div id="yonet202403Mid_Output01"></div>
<script>
(function(){
const {
  Factory,
  Stave,
  StaveNote,
  Formatter,
  Voice,
  StaveTie,
} = Vex.Flow;

const f = new Factory({ renderer: { elementId: 'Output', 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.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();
})();
</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 使い方に戻る。

@@ 30行目: / 30行目: @@
 ctx.fillRect(0, 0, f.width, f.height);
-// 縦線
-const verticalLineSpacing = 10; // 縦の線の間隔
-const verticalLineCount = Math.floor(f.width / verticalLineSpacing);
-ctx.setStrokeStyle('#CCCCCC'); // 灰色に設定
-ctx.setLineWidth(1); // 線の太さ
-for (let i = 1; i < verticalLineCount; i++) {
-  const x = i * verticalLineSpacing;
-  ctx.beginPath();
-  ctx.moveTo(x, 0);
-  ctx.lineTo(x, f.height);
-  ctx.stroke();
-}
-// 横線
-const horizontalLineSpacing = 10; // 横の線の間隔
-const horizontalLineCount = Math.floor(f.height / horizontalLineSpacing);
-for (let i = 1; i < horizontalLineCount; i++) {
-  const y = i * horizontalLineSpacing;
-  ctx.beginPath();
-  ctx.moveTo(0, y);
-  ctx.lineTo(f.width, y);
-  ctx.stroke();
-}
 const stave1 = new Stave(10, 50, 350).setContext(ctx);
@@ 73行目: / 48行目: @@
 stave1.draw();
 const tie1 = new StaveTie({
@@ 141行目: / 115行目: @@
 tie5.setContext(ctx).draw();
+// 縦線
+const verticalLineSpacing = 10; // 縦の線の間隔
+const verticalLineCount = Math.floor(f.width / verticalLineSpacing);
+ctx.setStrokeStyle('#CCCCCC'); // 灰色に設定
+ctx.setLineWidth(1); // 線の太さ
+for (let i = 1; i < verticalLineCount; i++) {
+  const x = i * verticalLineSpacing;
+  ctx.beginPath();
+  ctx.moveTo(x, 0);
+  ctx.lineTo(x, f.height);
+  ctx.stroke();
+}
+// 横線
+const horizontalLineSpacing = 10; // 横の線の間隔
+const horizontalLineCount = Math.floor(f.height / horizontalLineSpacing);
+for (let i = 1; i < horizontalLineCount; i++) {
+  const y = i * horizontalLineSpacing;
+  ctx.beginPath();
+  ctx.moveTo(0, y);
+  ctx.lineTo(f.width, y);
+  ctx.stroke();
+}
 })();