How to draw text vertically center align

1

How do you draw multiline text vertically center aligned, using Vector font?
Also how to apply custom line height to it.
I tried using getBaselinePosition() but still always got a difference

2

Hello @netkeb1,

The current UI libraries are strongly coupled with MicroUI Fonts and does not support Vector Font.
I’ll guide you to create what you need from what exists:

  1. The function ej.widget.render.TextHelper#wrap() in the widget library allows to wraps a text into several lines using a MicroUI Font. It can be adapted to use a VectorFont. The method ej.microvg.VectorFont#measureStringWidth() must be used instead of ej.microui.display.Font#substringWidth().
  2. In the same way, the function ej.widget.render.StringPainter#drawStringInArea() is able to draw a string with a MicroUI font with different horizontal (left, center, right) or vertical (top, center, bottom) alignments. More specifically it uses ej.mwt.util.Alignment#computeTopY() to align vertically. You can use the same computation to compute the y coordinate of the first line.
  3. The height of a VectorFont with a specific size can be retrieved using ej.microvg.VectorFont#getHeight().
  4. To compute the total height of your multiline text, you can either use this height times the number of lines, or use a custom line height.
  5. Then, it is possible to compute the top y coordinate of the first line of the text by computing the difference between the height of the area where you want the text to be centered and the height of the text, then dividing the difference by 2.

Sébastien