Android Canvas DrawText for vertical centering in Chinese

Target:

Draws the Chinese character to the center of the target rectangle.

Questions:

Android Canvas drawing, origin in the DrawText is based on baseline, directly to the target rectangle bottom into DrawText, the character position will be lower. Write the code like this:

[Java]View Plaincopy

2. @Override
4. Public void OnDraw (canvas canvas) {
6. Rect targetrect = new rect ( 200);
8. Paint paint = new paint (Paint.anti_alias_flag);
10. Paint.setstrokewidth (3);
12. Paint.settextsize (80);
14. String teststring = "test: ijkjqka:1234";
16. Paint.setcolor (Color.cyan);
18. Canvas.drawrect (targetrect, paint);
20. Paint.setcolor (color.red);
22. Canvas.drawtext (teststring, Targetrect.left, Targetrect.bottom, paint);
24. }

Will get ugly results:

Find a solution:

First do your own experiment, set a baseline, and then put the text, and then draw a few lines on the FontMetrics. The FontMetrics is a font pattern, with a float type and an int version, which can be obtained from the paint. Each of its member values is calculated as a baseline, so a negative value is represented above the baseline. Experiment Code:

[Java]View Plaincopy

2. @Override
4. Public void OnDraw (canvas canvas) {
6. Paint paint = new paint (Paint.anti_alias_flag);
8. Paint.setstrokewidth (3);
10. Paint.settextsize (80);
12. Fontmetricsint FMI = Paint.getfontmetricsint ();
14. String teststring = "test: ijkjqka:1234";
16. Rect bounds1 = new Rect ();
18. Paint.gettextbounds ("test", 0, 1, BOUNDS1);
20. Rect bounds2 = new Rect ();
22. Paint.gettextbounds ("test: Ijk", 0, 6, BOUNDS2);
24. //Feel free to set a position as baseline
26. int x = 200;
28. int y = 400;
30. //Draw teststring on the baseline
32. Canvas.drawtext (teststring, x, y, paint);
34. //BOUNDS1
36. Paint.setstyle (Style.stroke); //Draw Hollow Rectangle
38. Canvas.save ();
40. Canvas.translate (x, y); //Note there are translate here. Gettextbounds The resulting rectangle is also based on the baseline
42. Paint.setcolor (Color.green);
44. Canvas.drawrect (BOUNDS1, paint);
46. Canvas.restore ();
48. //Bounds2
50. Canvas.save ();
52. Paint.setcolor (Color.magenta);
54. Canvas.translate (x, y);
56. Canvas.drawrect (bounds2, paint);
58. Canvas.restore ();
60. //Baseline
62. Paint.setcolor (color.red);
64. Canvas.drawline (x, Y, 1024x768, y, paint);
66. //Ascent
68. Paint.setcolor (Color.yellow);
70. Canvas.drawline (x, Y+fmi.ascent, 1024x768, y+fmi.ascent, paint);
72. //Descent
74. Paint.setcolor (Color.Blue);
76. Canvas.drawline (x, Y+fmi.descent, 1024x768, y+fmi.descent, paint);
78. //Top
80. Paint.setcolor (Color.dkgray);
82. Canvas.drawline (x, Y+fmi.top, 1024x768, y+fmi.top, paint);
84. //Bottom
86. Paint.setcolor (Color.green);
88. Canvas.drawline (x, Y+fmi.bottom, 1024x768, y+fmi.bottom, paint);
90. }

Get results:

Red Line is baseline, the top gray line is fontmetrics.top, the bottom of the Green Line is fontmetrics.bottom. (The green bottom and the blue descent are very close)

The character itself is centered between the Gray line and the Green Line , knowing that this is a good idea. Online said the use of Paint.gettextbounds methods are not reliable, you can see a "test" word and 6 words to get the bounds is different, the diagram of the rectangle can be very good to indicate that the function is the boundary of the character, not the font boundaries.

The Fontmetrics.top value is a negative number whose absolute value is the distance the font draws the boundary to baseline.
So if the text is drawn in a rectangle with a fontmetrics height, the DrawText should pass in the-fontmetrics.top.
To draw the center position of the Targetrect, the baseline formula is:

Targetrect.top + (Targetrect.bottom-targetrect.top)/2-(fontmetrics.bottom-fontmetrics.top)/2-fontmetrics.top

Solution:

So the initial code should be changed (by adding the horizontal center):

[Java]View Plaincopy

2. @Override
4. Public void OnDraw (canvas canvas) {
6. Rect targetrect = new rect ( 200);
8. Paint paint = new paint (Paint.anti_alias_flag);
10. Paint.setstrokewidth (3);
12. Paint.settextsize (80);
14. String teststring = "test: ijkjqka:1234";
16. Paint.setcolor (Color.cyan);
18. Canvas.drawrect (targetrect, paint);
20. Paint.setcolor (color.red);
22. Fontmetricsint FontMetrics = Paint.getfontmetricsint ();
24. //Reprint Please specify Source: http://blog.csdn.net/hursing
26. int baseline = Targetrect.top + (Targetrect.bottom-targetrect.top-fontmetrics.bottom + fontmetrics.top)/ 2-  Fontmetrics.top;
28. //below this line is to achieve the horizontal center, drawtext corresponding to the incoming Targetrect.centerx ()
30. Paint.settextalign (Paint.Align.CENTER);
32. Canvas.drawtext (TestString, Targetrect.centerx (), baseline, paint);
34. }

Effect (click to view larger image):

can also go to see the Android SDK source code,

$android 4.2/frameworks/base/corej/ava/android/text/boringlayout.java is an algorithm of TextView drawing text

Reprint Please specify source: http://blog.csdn.net/hursing

Android Canvas DrawText for vertical centering in Chinese