textdynamics.js

Table of Contents

  1. accidental.js
  2. annotation.js
  3. articulation.js
  4. barnote.js
  5. beam.js
  6. bend.js
  7. boundingbox.js
  8. canvascontext.js
  9. clef.js
  10. clefnote.js
  11. crescendo.js
  12. curve.js
  13. dot.js
  14. flow.js
  15. vexflow_font.js
  16. formatter.js
  17. fraction.js
  18. frethandfinger.js
  19. ghostnote.js
  20. glyph.js
  21. gracenote.js
  22. gracenotegroup.js
  23. keymanager.js
  24. keysignature.js
  25. modifier.js
  26. modifiercontext.js
  27. music.js
  28. note.js
  29. notehead.js
  30. ornament.js
  31. pedalmarking.js
  32. raphaelcontext.js
  33. renderer.js
  34. stave.js
  35. stavebarline.js
  36. staveconnector.js
  37. stavehairpin.js
  38. staveline.js
  39. stavemodifier.js
  40. stavenote.js
  41. staverepetition.js
  42. stavesection.js
  43. stavetempo.js
  44. stavetext.js
  45. stavetie.js
  46. stavevolta.js
  47. stem.js
  48. stemmablenote.js
  49. stringnumber.js
  50. strokes.js
  51. svgcontext.js
  52. tables.js
  53. tabnote.js
  54. tabslide.js
  55. tabstave.js
  56. tabtie.js
  57. textbracket.js
  58. textdynamics.js
  59. textnote.js
  60. tickable.js
  61. tickcontext.js
  62. timesignature.js
  63. timesignote.js
  64. tremolo.js
  65. tuning.js
  66. tuplet.js
  67. vex.js
  68. vibrato.js
  69. voice.js
  70. voicegroup.js

VexFlow - Copyright (c) Mohit Muthanna 2010.

Description

This file implements the TextDynamics which renders traditional text dynamics markings, ie: p, f, sfz, rfz, ppp

You can render any dynamics string that contains a combination of the following letters: P, M, F, Z, R, S

Vex.Flow.TextDynamics = (function(){
  function TextDynamics(text_struct) {
    if (arguments.length > 0) this.init(text_struct);
  }

To enable logging for this class. Set Vex.Flow.TextDynamics.DEBUG to true.

  function L() { if (TextDynamics.DEBUG) Vex.L("Vex.Flow.TextDynamics", arguments); }

The glyph data for each dynamics letter

  TextDynamics.GLYPHS = {
    "f": {
      code: "vba",
      width: 12
    },
    "p": {
      code: "vbf",
      width: 14
    },
    "m": {
      code: "v62",
      width: 17
    },
    "s": {
      code: "v4a",
      width: 10
    },
    "z": {
      code: "v80",
      width: 12
    },
    "r": {
      code: "vb1",
      width: 12
    }
  };

Prototype Methods

A TextDynamics object inherits from Note so that it can be formatted within a Voice.

  Vex.Inherit(TextDynamics, Vex.Flow.Note, {

Create the dynamics marking. text_struct is an object that contains a duration property and a sequence of letters that represents the letters to render

    init: function(text_struct) {
      TextDynamics.superclass.init.call(this, text_struct);

      this.sequence = text_struct.text.toLowerCase();
      this.line = text_struct.line || 0;
      this.glyphs = [];

      Vex.Merge(this.render_options, {
        glyph_font_size: 40
      });

      L("New Dynamics Text: ", this.sequence);
    },

Set the Stave line on which the note should be placed

    setLine: function(line) { this.line = line;  return this; },

Preformat the dynamics text

    preFormat: function() {
      var total_width = 0;

Iterate through each letter

      this.sequence.split('').forEach(function(letter) {

Get the glyph data for the letter

        var glyph_data = TextDynamics.GLYPHS[letter];
        if (!glyph_data) throw new Vex.RERR("Invalid dynamics character: " + letter);

        var size =  this.render_options.glyph_font_size;
        var glyph = new Vex.Flow.Glyph(glyph_data.code, size);

Add the glyph

        this.glyphs.push(glyph);

        total_width += glyph_data.width;
      }, this);

Store the width of the text

      this.setWidth(total_width);
      this.preFormatted = true;
      return this;
    },

Draw the dynamics text on the rendering context

    draw: function() {
      var x = this.getAbsoluteX();
      var y = this.stave.getYForLine(this.line + (-3));

      L("Rendering Dynamics: ", this.sequence);

      var letter_x = x;
      this.glyphs.forEach(function(glyph, index) {
        var current_letter = this.sequence[index];
        glyph.render(this.context, letter_x, y);
        letter_x += TextDynamics.GLYPHS[current_letter].width;
      }, this);
    }
  });

  return TextDynamics;
})();
h