Android Canvas DrawText for vertical centering in Chinese

Source: Internet
Author: User
Tags drawtext
<span id="Label3"></p><span style="font-size: 15px;"><span style="font-size: 15px;"><strong>target:</strong></span></span><p><p>Draws the Chinese character to the center of the target Rectangle.</p></p><span style="font-size: 15px;"><span style="font-size: 15px;"><strong>questions:</strong></span></span><p><p>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:</p></p><pre><span style="color: #000000;"><span style="color: #000000;">@Override</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> public</span> <span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">onDraw (canvas canvas) {Rect targetrect</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span>Rect (<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> +</span>,<span style="color: #800080;"><span style="color: #800080;"></span> $</span><span style="color: #000000;"><span style="color: #000000;">); Paint Paint</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">Paint (paint.anti_alias_flag); Paint.setstrokewidth (</span></span><span style="color: #800080;"><span style="color: #800080;">3</span></span><span style="color: #000000;"><span style="color: #000000;">); Paint.settextsize (</span></span><span style="color: #800080;"><span style="color: #800080;"></span> the</span><span style="color: #000000;"><span style="color: #000000;">); String teststring</span></span>=<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">test: ijkjqka:1234</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">; Paint.setcolor (color.cyan); Canvas.drawrect (targetrect, paint); Paint.setcolor (color.red); Canvas.drawtext (teststring, targetrect.left, targetrect.bottom, paint);}</span></span></pre><p><p>Will get ugly results:</p></p><p><p></p></p><span style="font-size: 15px;"><span style="font-size: 15px;"><strong>Find a solution:</strong></span></span><p><p>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:</p></p><pre><span style="color: #000000;"><span style="color: #000000;">@Override</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> public</span> <span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">onDraw (canvas canvas) {paint paint</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">Paint (paint.anti_alias_flag); Paint.setstrokewidth (</span></span><span style="color: #800080;"><span style="color: #800080;">3</span></span><span style="color: #000000;"><span style="color: #000000;">); Paint.settextsize (</span></span><span style="color: #800080;"><span style="color: #800080;"></span> the</span><span style="color: #000000;"><span style="color: #000000;">); Fontmetricsint FMI</span></span>=<span style="color: #000000;"><span style="color: #000000;">Paint.getfontmetricsint (); String teststring</span></span>=<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">test: ijkjqka:1234</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">; Rect bounds1</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">Rect (); Paint.gettextbounds (</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">Measurement</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">1</span></span><span style="color: #000000;"><span style="color: #000000;">, bounds1); Rect Bounds2</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">Rect (); Paint.gettextbounds (</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">test: Ijk</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">6</span></span><span style="color: #000000;"><span style="color: #000000;">, bounds2); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">feel free to set a position as a baseline</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">int</span></span>x =<span style="color: #800080;"><span style="color: #800080;"></span> $</span><span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">int</span></span>y =<span style="color: #800080;"><span style="color: #800080;"></span> -</span><span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Draw teststring on the Baseline.</span></span><span style="color: #000000;"><span style="color: #000000;">canvas.drawtext (teststring, x, y, paint); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">bounds1</span></span>Paint.setstyle (style.stroke);<span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">draw a hollow rectangle</span></span><span style="color: #000000;"><span style="color: #000000;">Canvas.save (); Canvas.translate (x, y); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Note that there are translate here. Gettextbounds The resulting rectangle is also based on the baseline</span></span><span style="color: #000000;"><span style="color: #000000;">Paint.setcolor (color.green); Canvas.drawrect (bounds1, paint); Canvas.restore (); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Bounds2</span></span><span style="color: #000000;"><span style="color: #000000;">Canvas.save (); Paint.setcolor (color.magenta); Canvas.translate (x, y); Canvas.drawrect (bounds2, paint); Canvas.restore (); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Baseline</span></span><span style="color: #000000;"><span style="color: #000000;">Paint.setcolor (color.red); Canvas.drawline (x, y,</span></span><span style="color: #800080;"><span style="color: #800080;">1024x768</span></span><span style="color: #000000;"><span style="color: #000000;">, y, paint); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Ascent</span></span><span style="color: #000000;"><span style="color: #000000;">Paint.setcolor (color.yellow); Canvas.drawline (x, y</span></span>+fmi.ascent,<span style="color: #800080;"><span style="color: #800080;">1024x768</span></span>, y+<span style="color: #000000;"><span style="color: #000000;">fmi.ascent, paint); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Descent</span></span><span style="color: #000000;"><span style="color: #000000;">Paint.setcolor (color.blue); Canvas.drawline (x, y</span></span>+fmi.descent,<span style="color: #800080;"><span style="color: #800080;">1024x768</span></span>, y+<span style="color: #000000;"><span style="color: #000000;">fmi.descent, paint); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Top</span></span><span style="color: #000000;"><span style="color: #000000;">Paint.setcolor (color.dkgray); Canvas.drawline (x, y</span></span>+fmi.top,<span style="color: #800080;"><span style="color: #800080;">1024x768</span></span>, y+<span style="color: #000000;"><span style="color: #000000;">fmi.top, paint); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Bottom</span></span><span style="color: #000000;"><span style="color: #000000;">Paint.setcolor (color.green); Canvas.drawline (x, y</span></span>+fmi.bottom,<span style="color: #800080;"><span style="color: #800080;">1024x768</span></span>, y+<span style="color: #000000;"><span style="color: #000000;">fmi.bottom, paint);}</span></span></pre><p><p>Get Results:</p></p><p><p></p></p><p><p>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)</p></p><p><p>The <strong>character itself is centered between the Gray line and the Green Line</strong> , 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.</p></p><p><p>The Fontmetrics.top value is a negative number whose absolute value is the distance the font draws the boundary to Baseline.<br>So if the text is drawn in a rectangle with a fontmetrics height, the DrawText should pass in The-fontmetrics.top.<br>To draw the center position of the targetrect, the baseline formula Is:</p></p><p><p><span style="color: #ff0000;"><strong>Targetrect.top + (targetrect.bottom-targetrect.top)/2-(fontmetrics.bottom-fontmetrics.top)/2-fontmetrics.top</strong></span></p></p><p><p></p></p><span style="font-size: 15px;"><span style="font-size: 15px;"><strong>solution:</strong></span></span><p><p></p></p><p><p>So the initial code should be changed (by adding the horizontal center):</p></p><pre><span style="color: #000000;"><span style="color: #000000;">@Override</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></span> public</span> <span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">onDraw (canvas canvas) {Rect targetrect</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span>Rect (<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> +</span>,<span style="color: #800080;"><span style="color: #800080;"></span> $</span><span style="color: #000000;"><span style="color: #000000;">); Paint Paint</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">Paint (paint.anti_alias_flag); Paint.setstrokewidth (</span></span><span style="color: #800080;"><span style="color: #800080;">3</span></span><span style="color: #000000;"><span style="color: #000000;">); Paint.settextsize (</span></span><span style="color: #800080;"><span style="color: #800080;"></span> the</span><span style="color: #000000;"><span style="color: #000000;">); String teststring</span></span>=<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">test: ijkjqka:1234</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">; Paint.setcolor (color.cyan); Canvas.drawrect (targetrect, paint); Paint.setcolor (color.red); Fontmetricsint FontMetrics</span></span>=<span style="color: #000000;"><span style="color: #000000;">Paint.getfontmetricsint (); </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Reprint Please specify the source:</span></span><span style="color: #008000; text-decoration: underline;"><span style="color: #008000; text-decoration: underline;">http://blog.csdn.net/hursing</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">int</span></span>Baseline = targetrect.top + (targetrect.bottom-targetrect.top-fontmetrics.bottom + fontmetrics.top)/<span style="color: #800080;"><span style="color: #800080;">2</span></span>-<span style="color: #000000;"><span style="color: #000000;">fontmetrics.top; </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">the following line is to achieve horizontal centering, DrawText corresponding to the incoming Targetrect.centerx ()</span></span><span style="color: #000000;"><span style="color: #000000;">paint.settextalign (Paint.Align.CENTER); Canvas.drawtext (teststring, Targetrect.centerx (), baseline, paint);}</span></span></pre><p><p>Effect (click to view larger image):</p></p><p><p></p></p><p><p></p></p><p><p>Android Canvas DrawText for vertical centering in Chinese</p></p></span>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.