「VexFlow 連符」の版間の差分

2022年12月16日 (金) 21:23時点における版

概要

　連符を描いてみたいと思います。tupletというのが連符のキーワードになります。

@@ 12行目: / 12行目: @@
 (function(){
 // This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag).
-const { Stave, StaveNote, Beam, Formatter, Renderer } = Vex;
+const { Stave, StaveNote, Beam, Formatter, Renderer, Tuplet } = Vex;
 // Create an SVG renderer and attach it to the DIV element with id="output".
@@ 26行目: / 26行目: @@
 staveMeasure1.addClef("treble").setContext(context).draw();
-const notesMeasure1 = [new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })];
+const notesMeasure1 = [
+  new StaveNote({ keys: ["c/4"], duration: "q" }),
+  new StaveNote({ keys: ["d/4"], duration: "q" }),
+  new StaveNote({ keys: ["b/4"], duration: "qr" }),
+  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
+];
 // Helper function to justify and draw a 4/4 voice
@@ 34行目: / 39行目: @@
 const staveMeasure2 = new Stave(staveMeasure1.width + staveMeasure1.x, 0, 400);
-const notesMeasure2_part1 = [new StaveNote({ keys: ["c/4"], duration: "8" }), new StaveNote({ keys: ["d/4"], duration: "8" }), new StaveNote({ keys: ["b/4"], duration: "8" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })];
+const notesMeasure2_part1 = [
+  new StaveNote({ keys: ["c/4"], duration: "8" }),
+  new StaveNote({ keys: ["d/4"], duration: "8" }),
+  new StaveNote({ keys: ["b/4"], duration: "8" }),
+  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
+];
-const notesMeasure2_part2 = [new StaveNote({ keys: ["c/4"], duration: "8" }), new StaveNote({ keys: ["d/4"], duration: "8" }), new StaveNote({ keys: ["b/4"], duration: "8" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })];
+const notesMeasure2_part2 = [
+  new StaveNote({ keys: ["c/4"], duration: "8" }),
+  new StaveNote({ keys: ["c/4"], duration: "8" }),
+  new StaveNote({ keys: ["c/4"], duration: "8" }),
+];
+const notesMeasure2_part3 = [
+  new StaveNote({ keys: ["b/4"], duration: "8" }),
+  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
+];
 // Create the beams for 8th notes in second measure.
 const beam1 = new Beam(notesMeasure2_part1);
-const beam2 = new Beam(notesMeasure2_part2);
+const tuple = new Tuple(notesMeasure2_part2);
+const beam2 = new Beam(notesMeasure2_part3);
-const notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2);
+const notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2).concat(notesMeasure2_part3);
 staveMeasure2.setContext(context).draw();