Мое приложение отображает текстовые аннотации под посохами, но они все больше и больше смещаются вниз после каждого посоха. При нажатии на кнопку «Создать» на вкладке «Музыка» 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);
}
Вот как это выглядит:
ОБНОВЛЕНИЕ: В качестве временной меры я мог бы найти обходной путь для чего-то, вероятно, приемлемого к моему концу пользователь, с отображением текстовых заметок по центру по вертикали.
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);
}