vexflow - 为什么我的 Vexflow 注释会飘到底部？

Question

我的应用程序在五线谱下显示文本注释，但在每个五线谱之后，这些注释越来越多地飘到底部。单击音乐选项卡中的新建按钮可创建五线谱。

我正在创建这样的注释：

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

它是从循环中调用的：

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