Почему мои аннотации Vexflow уходят на дно? - PullRequest
1 голос
/ 30 марта 2020

Мое приложение отображает текстовые аннотации под посохами, но они все больше и больше смещаются вниз после каждого посоха. При нажатии на кнопку «Создать» на вкладке «Музыка» c создается нотный стан.

Я создаю аннотацию, подобную этой:

staveNote.addAnnotation(0, this.renderAnnotation(placedChord.renderAbc()));

Для чего нужен индекс первого аргумента 0? Я пытался поиграть с ним, используя разные числовые значения, но ничего не увидел.

Вот метод визуализации аннотации:

private renderAnnotation(textNote: string): vexflow.Flow.Annotation {
  return (
    new vexflow.Flow.Annotation(textNote))
    .setFont(VEXFLOW_FONT_TYPE, VEXFLOW_FONT_SIZE, VEXFLOW_FONT_WEIGHT)
    .setJustification(vexflow.Flow.Annotation.Justify.CENTER)
    .setVerticalJustification(vexflow.Flow.Annotation.VerticalJustify.BOTTOM);
}

Он вызывается из l oop:

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);
}

Вот как это выглядит: enter image description here

ОБНОВЛЕНИЕ: В качестве временной меры я мог бы найти обходной путь для чего-то, вероятно, приемлемого к моему концу пользователь, с отображением текстовых заметок по центру по вертикали.

private renderAnnotation(textNote: string): vexflow.Flow.Annotation {
  return (
    new vexflow.Flow.Annotation(textNote))
    .setFont(VEXFLOW_FONT_TYPE, VEXFLOW_FONT_SIZE, VEXFLOW_FONT_WEIGHT)
    .setJustification(vexflow.Flow.Annotation.Justify.RIGHT)
   .setVerticalJustification(vexflow.Flow.Annotation.VerticalJustify.CENTER);
}

enter image description here

...