Is there a way to put an annotation on a note head?

111 views
Skip to first unread message

fun...@gmail.com

unread,
Apr 24, 2019, 7:25:01 PM4/24/19
to vexflow
Before I write my own I thought I'd ask. I'd like to put letter names on note heads for an educational app I'm writing. I'm wondering if there's some combination of justification and textline that would allow me to do this. I've looked at the annotation class but none of the justifications settings do what I want. setTextLine looked like it might have promise but I couldn't figure out the magic combination. I'm looking at just subclassing annotation to give it this ability but wanted to ask before I do work that already exists and I just haven't understood yet.

Thanks for any tips! 

simon.sc...@gmail.com

unread,
Apr 28, 2019, 9:19:25 AM4/28/19
to vexflow

You might be able to use StaveText, which is a StaveModifier. see stavetext.js.

in OSMD, for labels, we calculate the position we want to draw something and draw it using filltext:
(Typescript)

public renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string,
heightInPixel: number, screenPosition: PointF2D, color: string = undefined): void {
this.ctx.save();
if (color) {
this.ctx.attributes.fill = color;
this.ctx.attributes.stroke = color;
}
this.ctx.setFont("Times New Roman", fontHeight, VexFlowConverter.fontStyle(fontStyle));
// font size is set by VexFlow in `pt`. This overwrites the font so it's set to px instead
this.ctx.attributes["font-size"] = `${fontHeight}px`;
this.ctx.state["font-size"] = `${fontHeight}px`;
this.ctx.fillText(text, screenPosition.x, screenPosition.y + heightInPixel);
this.ctx.restore();
}

For the position, there's stavenote. getNoteHeadBeginX(), endX,
and stavenote.getBoundingBox().getX, getY, getW, getY()
Reply all
Reply to author
Forward
0 new messages