Android Canvas DrawText for vertical centering in Chinese

Last Update:2015-09-11 Source: Internet

Author: User

Tags drawtext

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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:<pre>@Override public voidonDraw (canvas canvas) {Rect targetrect=NewRect ( -, -, +, $); Paint Paint=NewPaint (paint.anti_alias_flag); Paint.setstrokewidth (3); Paint.settextsize ( the); String teststring="test: ijkjqka:1234"; Paint.setcolor (color.cyan); Canvas.drawrect (targetrect, paint); Paint.setcolor (color.red); Canvas.drawtext (teststring, targetrect.left, targetrect.bottom, paint);}</pre>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:<pre>@Override public voidonDraw (canvas canvas) {paint paint=NewPaint (paint.anti_alias_flag); Paint.setstrokewidth (3); Paint.settextsize ( the); Fontmetricsint FMI=Paint.getfontmetricsint (); String teststring="test: ijkjqka:1234"; Rect bounds1=NewRect (); Paint.gettextbounds ("Measurement",0,1, bounds1); Rect Bounds2=NewRect (); Paint.gettextbounds ("test: Ijk",0,6, bounds2); //feel free to set a position as a baseline intx = $; inty = -; //Draw teststring on the Baseline.canvas.drawtext (teststring, x, y, paint); //bounds1Paint.setstyle (style.stroke);//draw a hollow rectangleCanvas.save (); Canvas.translate (x, y); //Note that there are translate here. Gettextbounds The resulting rectangle is also based on the baselinePaint.setcolor (color.green); Canvas.drawrect (bounds1, paint); Canvas.restore (); //Bounds2Canvas.save (); Paint.setcolor (color.magenta); Canvas.translate (x, y); Canvas.drawrect (bounds2, paint); Canvas.restore (); //BaselinePaint.setcolor (color.red); Canvas.drawline (x, y,1024x768, y, paint); //AscentPaint.setcolor (color.yellow); Canvas.drawline (x, y+fmi.ascent,1024x768, y+fmi.ascent, paint); //DescentPaint.setcolor (color.blue); Canvas.drawline (x, y+fmi.descent,1024x768, y+fmi.descent, paint); //TopPaint.setcolor (color.dkgray); Canvas.drawline (x, y+fmi.top,1024x768, y+fmi.top, paint); //BottomPaint.setcolor (color.green); Canvas.drawline (x, y+fmi.bottom,1024x768, y+fmi.bottom, paint);}</pre>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.topsolution:So the initial code should be changed (by adding the horizontal center):<pre>@Override public voidonDraw (canvas canvas) {Rect targetrect=NewRect ( -, -, +, $); Paint Paint=NewPaint (paint.anti_alias_flag); Paint.setstrokewidth (3); Paint.settextsize ( the); String teststring="test: ijkjqka:1234"; Paint.setcolor (color.cyan); Canvas.drawrect (targetrect, paint); Paint.setcolor (color.red); Fontmetricsint FontMetrics=Paint.getfontmetricsint (); //Reprint Please specify the source:http://blog.csdn.net/hursing intBaseline = targetrect.top + (targetrect.bottom-targetrect.top-fontmetrics.bottom + fontmetrics.top)/2-fontmetrics.top; //the following line is to achieve horizontal centering, DrawText corresponding to the incoming Targetrect.centerx ()paint.settextalign (Paint.Align.CENTER); Canvas.drawtext (teststring, Targetrect.centerx (), baseline, paint);}</pre>Effect (click to view larger image):Android Canvas DrawText for vertical centering in Chinese

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More