「VexFlow 連符」の版間の差分

提供:yonewiki
220行目: 220行目:
(function(){
(function(){
// This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag).
// 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 { Factory, Stave, StaveNote, Beam, Formatter, Renderer, Tuplet, Voice, Stem } = Vex;
 
const set = (key) => (value) => (object) => {
    object[key] = value;
    return object;
};
const setStemDirection = set('stem_direction');
const setStemUp = setStemDirection(Stem.UP);
const setStemDown = setStemDirection(Stem.DOWN);


const f = new Factory({ renderer: { elementId: 'output3', width: 1280, height: 300 } });
const f = new Factory({ renderer: { elementId: 'output3', width: 1280, height: 300 } });
233行目: 241行目:
         { keys: ['b/4'], duration: '8' },
         { keys: ['b/4'], duration: '8' },
     ]
     ]
         .map( (object) => { object['stem_direction']= -1; return object;} )
         .map(setStemDown);
         .map(f.StaveNote.bind(f));
         .map(f.StaveNote.bind(f));
     f.Beam({
     f.Beam({

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

概要

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

3連符

 

12連符

 

テスト