「VexFlow 連符」の版間の差分

2022年12月17日 (土) 11:44時点における版

概要

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

3連符

12連符

@@ 208行目: / 208行目: @@
 tuplet4.setContext(context).draw();
+})();
+</yjavascript>
+=== '''テスト''' ===
+<div id="output3"></div>
+<yjavascript></script>
+<script>
+(function(){
+// This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag).
+const { Factory, Stave, StaveNote, Beam, Formatter, Renderer, Tuplet, Voice } = Vex;
+const f = new Factory({ renderer: { elementId: 'output3', width: 1290, height: 300 } }
+// Create an SVG renderer and attach it to the DIV element with id="output".
+    const stave = f.Stave({ x: 10, y: 10 }).addTimeSignature('5/8');
+    const notes = [
+        { keys: ['f/4'], duration: '4' },
+        { keys: ['c/4'], duration: '4' },
+        { keys: ['d/4'], duration: '4' },
+        { keys: ['d/5'], duration: '8' },
+        { keys: ['g/5'], duration: '8' },
+        { keys: ['b/4'], duration: '8' },
+    ]
+        .map(setStemDown)
+        .map(f.StaveNote.bind(f));
+    f.Beam({
+        notes: notes.slice(3, 6),
+    });
+    f.Tuplet({
+        notes: notes.slice(0, 3),
+        options: {
+            location: Tuplet.LOCATION_BOTTOM,
+            ratioed: true,
+        },
+    });
+    f.Tuplet({
+        notes: notes.slice(3, 6),
+        options: {
+            location: Tuplet.LOCATION_BOTTOM,
+            notes_occupied: 1,
+        },
+    });
+    const voice = f
+        .Voice({ time: { num_beats: 5, beat_value: 8 } })
+        .setStrict(true)
+        .addTickables(notes);
+    new Formatter().joinVoices([voice]).formatToStave([voice], stave);
+    f.draw();
 })();
 </yjavascript>