Proper note placement with alternate clefs?

144 views
Skip to first unread message

Karl

unread,
Apr 11, 2012, 5:43:31 PM4/11/12
to vex...@googlegroups.com
I'm having issue getting Vexflow to adjust itself when a new clef is introduced.  As an example, the code below has two measures; the first in Treble clef and rendered correctly.  The second is in Alto with the same notes, yet it renders the notes in the same position they would as if it were Treble.  I'm sure I'm missing something simple here, like is there a setting for the StaveNote that I'm neglecting to set?

<body>

    <div class="description one">
   
        <div class="example a" example="a">
           
            <canvas width=525 height=120></canvas>
           
            <script>
                var canvas = $("div.one div.a canvas")[0];
                var renderer = new Vex.Flow.Renderer(canvas,
                Vex.Flow.Renderer.Backends.CANVAS);
               
                var ctx = renderer.getContext();
                var stave = new Vex.Flow.Stave(10, 0, 500);
                stave.addClef("treble").setContext(ctx).draw();

        var notes = [
          new Vex.Flow.StaveNote({ keys: ["c#/4"], duration: "8" }).addAccidental(0, new Vex.Flow.Accidental("#")),
          new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" }),
          new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" }),
          new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" })];

      var beam = new Vex.Flow.Beam(notes);

      var voice = new Vex.Flow.Voice({num_beats: 2,beat_value: 4,resolution: Vex.Flow.RESOLUTION});

      voice.addTickables(notes);

      var formatter = new Vex.Flow.Formatter().joinVoices([voice]).format([voice], 275);

      Vex.Flow.Formatter.FormatAndDraw(ctx, stave, notes);

      beam.setContext(ctx).draw();
            </script>
           
        </div>
    </div>

    <div class="description two">
 
    <div class="example b" example="b">
     
      <canvas width=525 height=120></canvas>
     
      <script>
        var canvas = $("div.two div.b canvas")[0];
        var renderer = new Vex.Flow.Renderer(canvas,
        Vex.Flow.Renderer.Backends.CANVAS);
       
        var ctx = renderer.getContext();
        var stave = new Vex.Flow.Stave(10, 0, 500);
        stave.addClef("alto").setContext(ctx).draw();

        var notes = [
          new Vex.Flow.StaveNote({ keys: ["c#/4"], duration: "8" }).addAccidental(0, new Vex.Flow.Accidental("#")),
          new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" }),
          new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" }),
          new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "8" })];

      var beam = new Vex.Flow.Beam(notes);

      var voice = new Vex.Flow.Voice({num_beats: 2,beat_value: 4,resolution: Vex.Flow.RESOLUTION});

      voice.addTickables(notes);

      var formatter = new Vex.Flow.Formatter().joinVoices([voice]).format([voice], 275);

      Vex.Flow.Formatter.FormatAndDraw(ctx, stave, notes);

      beam.setContext(ctx).draw();
      </script>
     
    </div>
  </div>

</body>

Mikael Nousiainen

unread,
Apr 12, 2012, 3:36:59 AM4/12/12
to vex...@googlegroups.com
StaveNotes assume treble clef, so you will need to add clef-property for StaveNote.

e.g.

new Vex.Flow.StaveNote({ clef: "treble", keys: ["b/4"], duration: "8" })
new Vex.Flow.StaveNote({ clef: "alto", keys: ["b/4"], duration: "8" })

Karl

unread,
Apr 12, 2012, 2:11:49 PM4/12/12
to vex...@googlegroups.com
Awesome.  Thanks a bunch.
Reply all
Reply to author
Forward
0 new messages