「VexFlow タイ」の版間の差分

提供:yonewiki
 
(同じ利用者による、間の3版が非表示)
24行目: 24行目:
     Accidental,
     Accidental,
     Beam,
     Beam,
    StaveTie,
   } = Vex.Flow;
   } = Vex.Flow;


43行目: 44行目:
     new StaveTie({
     new StaveTie({
         first_note: notes1[1],
         first_note: notes1[1],
        last_note: notes1[2],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes1[2],
         last_note: notes1[3],
         last_note: notes1[3],
         first_indices: [0],
         first_indices: [0],
55行目: 62行目:
})();
})();
</yjavascript>
</yjavascript>
 コードは以下のとおりです。
<syntaxhighlight lang="javascript" line start="1">
<div id="yonet202303Mid_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote,
    GhostNote,
    Formatter,
    Voice,
    Barline,
    Accidental,
    Beam,
    StaveTie,
  } = Vex.Flow;
  const f = new Factory({ renderer: { elementId: 'yonet202303Mid_Output01', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addTimeSignature('C').setContext(ctx).draw();
  const notes1 = [
    new StaveNote({ keys: ["d/5"], duration: "8" }),
    new StaveNote({ keys: ["d/5"], duration: "8" }),
    new StaveNote({ keys: ["d/5"], duration: "4" }),
    new StaveNote({ keys: ["d/5"], duration: "2" }),
  ];
  Formatter.FormatAndDraw(ctx, stave1, notes1);
const ties1 = [
    new StaveTie({
        first_note: notes1[1],
        last_note: notes1[2],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes1[2],
        last_note: notes1[3],
        first_indices: [0],
        last_indices: [0],
    }),
];
ties1.forEach((t) => {
    t.setContext(ctx).draw();
});
})();
</script>
</syntaxhighlight>
 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 使い方]]に戻る。
[[VexFlow 使い方]]に戻る。

2023年3月17日 (金) 23:07時点における最新版

VexFlow 使い方に戻る。

概要

 タイは同じ高さの音同士を区切らずに演奏する奏法に使います。

 

タイ

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

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

  const f = new Factory({ renderer: { elementId: 'yonet202303Mid_Output01', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addTimeSignature('C').setContext(ctx).draw();

  const notes1 = [
    new StaveNote({ keys: ["d/5"], duration: "8" }),
    new StaveNote({ keys: ["d/5"], duration: "8" }),
    new StaveNote({ keys: ["d/5"], duration: "4" }),
    new StaveNote({ keys: ["d/5"], duration: "2" }),
  ];
  Formatter.FormatAndDraw(ctx, stave1, notes1);

const ties1 = [
    new StaveTie({
        first_note: notes1[1],
        last_note: notes1[2],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes1[2],
        last_note: notes1[3],
        first_indices: [0],
        last_indices: [0],
    }),
];

ties1.forEach((t) => {
    t.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 使い方に戻る。