Как разместить заметки на нотном стане?

Question

Я показываю заметки на нотном стане, но на смартфоне они не помещаются в нотный стан, хотя я установил размер для контекста, и сам нотный стан помещается на экране устройства.

private vexflowRenderSoundtrack(name: string, screenWidth: number, soundtrack: Soundtrack): void {
  // The sheet width must fit within the screen
  const sheetWidth = screenWidth * SHEET_WIDTH_RATIO;

  const context = this.renderVexflowContext(name, sheetWidth, this.vexflowHeight(soundtrack));

  const voices: Array<vexflow.Flow.Voice> = new Array<vexflow.Flow.Voice>();
  if (soundtrack.hasTracks()) {
    let staveIndex: number = 0;
    for (const track of soundtrack.tracks) {
      if (track.hasMeasures()) {
        for (const measure of track.measures) {
          if (measure.hasChords()) {
            const stave = new vexflow.Flow.Stave(0, staveIndex * (VEXFLOW_STAVE_HEIGHT + VEXFLOW_STAVE_MARGIN), sheetWidth);
            staveIndex++;
            stave.setContext(context);
            stave.addClef(Clef.TREBLE);
            stave.addTimeSignature(this.renderTimeSignature(measure));
            stave.draw();

            const staveNotes = new Array<vexflow.Flow.StaveNote>();

            const voice: vexflow.Flow.Voice = new vexflow.Flow.Voice({
              num_beats: measure.timeSignature.numerator,
              beat_value: measure.timeSignature.denominator,
              resolution: vexflow.Flow.RESOLUTION
            });
            voice.setStrict(false);
            voice.setStave(stave);
            for (const placedChord of measure.placedChords!) {
              const chordDuration: string = this.renderDuration(placedChord);
              const staveNote: vexflow.Flow.StaveNote = new vexflow.Flow.StaveNote({
                keys: this.renderNotesSortedByFrequency(placedChord.notes),
                duration: chordDuration,
                auto_stem: true,
                clef: Clef.TREBLE
              });

              // Store the stave note for later access
              placedChord.staveNote = staveNote;

              this.addAccidentalOnNotes(placedChord);
              this.addDotOnNotes(placedChord);

              staveNote.setStyle({
                fillStyle: VEXFLOW_NOTE_COLOR,
                strokeStyle: VEXFLOW_NOTE_COLOR
              });

              staveNote.addAnnotation(0, this.renderAnnotation(placedChord.renderAbc()));    
              staveNotes.push(staveNote);
            }
            voice.addTickables(staveNotes);
            voices.push(voice);
          }
        }
        const formatter = new vexflow.Flow.Formatter();
        if (voices.length > 0) {
          formatter.joinVoices(voices).format(voices, sheetWidth);
          for (const voice of voices) {
            console.log('Min voice width: ' + formatter.getMinTotalWidth());
            voice.draw(context);
          }
        }
      }
    }
  }
}

Вот как выглядят заметки:

ОБНОВЛЕНИЕ: Как Vexflow и musi c noob Я попробовал несколько вещей, и это выглядит Я достиг некоторой работы вокруг. Форматируя голос в каждом нотном станке, вместо того, чтобы форматировать все голоса одновременно в секунду l oop, я мог видеть все ноты, отображаемые в каждом нотном стане.

Что я сделал, так это удалил второе l oop:

if (voices.length > 0) {
  formatter.joinVoices(voices).format(voices, sheetWidth);
  for (const voice of voices) {
    voice.draw(context);
  }
}

и добавили форматирование в первом l oop:

voice.addTickables(staveNotes);
formatter.joinVoices([ voice ]);
formatter.formatToStave([ voice ], stave);
voice.draw(context);
voices.push(voice);

Отображение тогда было приемлемым: