「VexFlow 連符」の版間の差分

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

概要

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

@@ 16行目: / 16行目: @@
 // Create an SVG renderer and attach it to the DIV element with id="output".
 const div = document.getElementById("output");
+const renderer = new Renderer(div, Renderer.Backends.SVG);
+// Configure the rendering context.
+renderer.resize(890, 130);
+const context = renderer.getContext();
+// Measure 1
+const staveMeasure1 = new Stave(10, 0, 470);
+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" })
+];
+// Helper function to justify and draw a 4/4 voice
+Formatter.FormatAndDraw(context, staveMeasure1, notesMeasure1);
+// Measure 2 - second measure is placed adjacent to first measure.
+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_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 tuplet2 = new Tuplet(notesMeasure2_part2);
+const beam3 = new Beam(notesMeasure2_part3);
+const notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2).concat(notesMeasure2_part3);
+staveMeasure2.setContext(context).draw();
+Formatter.FormatAndDraw(context, staveMeasure2, notesMeasure2);
+// Render beams
+beam1.setContext(context).draw();
+beam2.setContext(context).draw();
+tuplet2.setContext(context).draw();
+beam3.setContext(context).draw();
+})();
+</yjavascript>
+<div id="output2"></div>
+<yjavascript></script>
+<script>
+(function(){
+// This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag).
+const { Stave, StaveNote, Beam, Formatter, Renderer, Tuplet } = Vex;
+// Create an SVG renderer and attach it to the DIV element with id="output".
+const div = document.getElementById("output2");
 const renderer = new Renderer(div, Renderer.Backends.SVG);