Custom View's drawing chapter (iv): Baseline and FontMetrics

Optimism is a passionate and graceful march that inspires you to march bravely towards the road of your career. --Alexandre Dumas

Related articles:

Custom View's Drawing chapter (i): Drawing of the base drawing

Custom View's Drawing chapter (ii): Paths (Path)

Customize the view's drawing chapter (three): type (text)

Understand baseLine and FontMetrics help us understand drawText() the principle of drawing text, let's look at it together.

First, BaseLine baseline

Remember when you used to practice the alphabet is four-line, the letter in the four-line lattice, as follows:

Then canvas drawText there are rules when drawing text in, and this rule is baseLine (baseline). What is the baseline, and plainly is a straight line, what we understand here is to determine its location. Let's look at the baseline first:

From the point of see: The baseline is equal to four lines of the third line, the position of the Android baseline is fixed, then the position of the text will be fixed.

1, Canvas.drawtext ()

Method preview:

textfloatfloat y, Paint paint)

Parameters:

textText that needs to be drawn
xDraw text Origin x coordinate
yDraw Text Origin y coordinate
paintBrush

Let's take a look at a picture:

Note that it is x,y not the coordinate point of the upper-left corner of the text, it is more special, it y represents the coordinates of the baseline coordinates y .

We look at the drawText() method in detail, which is understood in the form of an example:

Mpaint. Setantialias(true);Mpaint. SetColor(Color. RED);Mpaint. SetStyle(Paint. Style. FILL);Mpaint. Settextsize( -);Canvas. DrawText("Abcdefghijk", $, $, Mpaint);Mpaint. SetColor(Color. Parsecolor("#23AC3B"));Canvas. DrawLine( $, $, GetWidth (), $, Mpaint);

：

Confirms y that it is y the coordinate point of the baseline.

Conclusion:

1, the canvas.drawText() middle parameter y is y the coordinates of the baseline
2, x coordinates, baseline position, text size determination, the position of the text is determined.

2, Mpaint.settextalign (Paint.Align.XXX);

We can see from the above example that x it represents the place where the text begins to be drawn. That's what I thought when I first used it, but I wrote a couple of examples and found out I was wrong. So what is the right understanding?

xRepresents the relative position of the rectangle where the text is to be drawn. The relative position is the （x,y） position of the point where you want to draw the rectangle. We know that the ordinate of the drawn rectangle is determined by the Y value, and the x position of the relative coordinates is only three positions left, middle, and right. That is, the drawn rectangle may be x drawn in coordinates relative to the left, middle, or right of the text, while the function defined in the x coordinates relative to the drawn rectangle is:

setTextAlign(Paint.Align align)

Paint.Alignis an enumeration type with values of: Paint.Align.LEFT , Paint.Align.CENTER and Paint.Align.RIGHT .

Let's take a look at how the results are plotted when different values are set.

(1), Paint.Align.LEFT

Mpaint. SetTextAlign(Paint. Align. Left);//The main value is different here.Mpaint. Setantialias(true);Mpaint. SetColor(Color. RED);Mpaint. SetStyle(Paint. Style. FILL);Mpaint. Settextsize( -);Canvas. DrawText("Abcdefghijk", $, $, Mpaint);Mpaint. SetColor(Color. Parsecolor("#23AC3B"));Canvas. DrawLine(0, $, GetWidth (), $, Mpaint);Canvas. DrawLine( $,0, $, GetHeight (), Mpaint);

As follows:

Can be seen （x,y） on 文字矩形 the left side below.

(2), Paint.Align.CENTER

Mpaint. SetTextAlign(Paint. Align. CENTER);Mpaint. Setantialias(true);Mpaint. SetColor(Color. RED);Mpaint. SetStyle(Paint. Style. FILL);Mpaint. Settextsize( -);Canvas. DrawText("Abcdefghijk", $, $, Mpaint);Mpaint. SetColor(Color. Parsecolor("#23AC3B"));Canvas. DrawLine(0, $, GetWidth (), $, Mpaint);Canvas. DrawLine( $,0, $, GetHeight (), Mpaint);

：

Can be seen （x,y） in 文字矩形 the middle of the bottom, in other words, the system will be based on (x,y) the location and 文字矩形 size, will calculate the current beginning to draw the point. So that the origin is (x,y) exactly in the middle of the rectangle below which you want to draw.

(3), Paint.Align.RIGHT

Mpaint. SetTextAlign(Paint. Align. Right);Mpaint. Setantialias(true);Mpaint. SetColor(Color. RED);Mpaint. SetStyle(Paint. Style. FILL);Mpaint. Settextsize( -);Canvas. DrawText("Abcdefghijk", $, $, Mpaint);Mpaint. SetColor(Color. Parsecolor("#23AC3B"));Canvas. DrawLine(0, $, GetWidth (), $, Mpaint);Canvas. DrawLine( $,0, $, GetHeight (), Mpaint);

：

Can be seen （x,y） on 文字矩形 the right below.

Second, FontMetrics

It can be known that, in addition to the baseline, there are another four lines, each of which are top , ascent descent and bottom , the meanings of which are:

1. Top: The highest height to draw online
2. Bottom: The lowest height to draw online
3. Ascent: The system suggests that when plotting a single character, the maximum height of the character should be online
4. Descent: The system suggests that when plotting a single character, the character should be the lowest height of the online

1. Get the instance

Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();Paint.FontMetricsInt fm=  mPaint.getFontMetricsInt();

The difference between the two constructor methods is that the value of the member variable that gets the object is one float type and one for the type int .

2. Member variables

FontMetrics, it has the following five member variables:

        float ascent = fontMetrics.ascent;        float descent = fontMetrics.descent;        float top = fontMetrics.top;        float bottom = fontMetrics.bottom;        float leading = fontMetrics.leading;

ascent,descent,top,bottom,leadingHow do you calculate the position of these lines? Let's take a look at the chart:

Then they are calculated as follows:

ascent = ascent线的y坐标 - baseline线的y坐标；//负数descent = descent线的y坐标 - baseline线的y坐标；//正数top = top线的y坐标 - baseline线的y坐标；//负数bottom = bottom线的y坐标 - baseline线的y坐标；//正数leading = top线的y坐标 - ascent线的y坐标；//负数

FontMetricsThe values of these variables are based on baseLine , for example, the line is ascent below the baseline ascent line, so the necessary baseline y value is greater than ascent the value of the line, so the value of the y ascent variable is negative. A few others.

Again, we can deduce:

ascent线Y坐标 = baseline线的y坐标 + fontMetric.ascent；descent线Y坐标 = baseline线的y坐标 + fontMetric.descent；top线Y坐标 = baseline线的y坐标 + fontMetric.top；bottom线Y坐标 = baseline线的y坐标 + fontMetric.bottom；

3. Draw Ascent,descent,top,bottom Line

Direct Sticker Code:

int Baseliney = $;Mpaint. Settextsize( -);Canvas. DrawText("Abcdefghijkl ' s", $, Baseliney, Mpaint);Paint. FontMetricsFontMetrics = Mpaint. Getfontmetrics();float top = FontMetrics. Top+ Baseliney;float ascent = FontMetrics. Ascent+ Baseliney;float descent = FontMetrics. Descent+ Baseliney;Float bottom = FontMetrics. Bottom+ Baseliney;Draw Baseline Mpaint. SetColor(Color. Parsecolor("#FF1493"));Canvas. DrawLine(0, Baseliney, GetWidth (), Baseliney, Mpaint);Draw Top Line Mpaint. SetColor(Color. Parsecolor("#FFB90F"));Canvas. DrawLine(0, Top, GetWidth (), Top, Mpaint);Draw Ascent Line Mpaint. SetColor(Color. Parsecolor("#b03060"));Canvas. DrawLine(0, Ascent, GetWidth (), Ascent, Mpaint);Draw Descent Line Mpaint. SetColor(Color. Parsecolor("#912cee"));Canvas. DrawLine(0, Descent, GetWidth (), descent, Mpaint);Draw Bottom Line Mpaint. SetColor(Color. Parsecolor("#1E90FF"));Canvas. DrawLine(0, Bottom, getwidth (), bottom, mpaint);

In this code, we need to note that: the canvas.drawText() middle parameter y is y the position of the baseline mPaint.setTextAlign(Paint.Align.LEFT); ; （200，200） 文字矩形 Then calculate the coordinates of each line y :

        float top = fontMetrics.top + baseLineY;        float ascent = fontMetrics.ascent + baseLineY;        float descent = fontMetrics.descent + baseLineY;        float bottom = fontMetrics.bottom + baseLineY;

：

4. Draw text minimum rectangle, text width, text height (1) Draw text Minimum rectangle

To drawRect(float left, float top, float right, float bottom, @NonNull Paint paint) draw a rectangle you need to know the upper-left coordinate point of the rectangle, the rectangle length and width. Take the example above:

left = 200
top = ascent;
right= 200+ Rectangle width;
bottom = descent;

So we can draw the smallest rectangle:

(2) Text height

        float top = fontMetrics.top + baseLineY;        float bottom = fontMetrics.bottom + baseLineY;        //文字高度        float//注意top为负数        //文字中点y坐标        float2;

Of course, you can also:float height=Math.abs(top-bottom);

(3) Text width

text="abcdefghijkl‘s"//文字宽度float width = mPaint.measureText(text);

This article to here is almost over, the source is relatively simple, need to leave a message.

Custom View's drawing chapter (iv): Baseline and FontMetrics