Android Canvas drawText实现中文垂直居中
目标:
把中文字符绘制到目标矩形的居中位置。
问题:
Android的Canvas绘图,drawText里的origin是以baseline为基准的,直接以目标矩形的bottom传进drawText,字符位置会偏下。这样写代码:
- @Override
- public void onDraw (Canvas canvas) {
- Rect targetRect = new Rect(50, 50, 1000, 200);
- Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
- paint.setStrokeWidth(3);
- paint.setTextSize(80);
- String testString = "测试:ijkJQKA:1234";
- paint.setColor(Color.CYAN);
- canvas.drawRect(targetRect, paint);
- paint.setColor(Color.RED);
- canvas.drawText(testString, targetRect.left, targetRect.bottom, paint);
- }
会得到难看的结果:
找方案:
首先自己动手做实验,自己定一个baseline,然后把文字画上去,再画上FontMetrics的几条线。FontMetrics里是字体图样的信息,有float型和int型的版本,都可以从Paint中获取。它的每个成员数值都是以baseline为基准计算的,所以负值表示在baseline之上。实验代码:
- @Override
- public void onDraw (Canvas canvas) {
- Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
- paint.setStrokeWidth(3);
- paint.setTextSize(80);
- FontMetricsInt fmi = paint.getFontMetricsInt();
- String testString = "测试:ijkJQKA:1234";
- Rect bounds1 = new Rect();
- paint.getTextBounds("测", 0, 1, bounds1);
- Rect bounds2 = new Rect();
- paint.getTextBounds("测试:ijk", 0, 6, bounds2);
- // 随意设一个位置作为baseline
- int x = 200;
- int y = 400;
- // 把testString画在baseline上
- canvas.drawText(testString, x, y, paint);
- // bounds1
- paint.setStyle(Style.STROKE); // 画空心矩形
- canvas.save();
- canvas.translate(x, y); // 注意这里有translate。getTextBounds得到的矩形也是以baseline为基准的
- paint.setColor(Color.GREEN);
- canvas.drawRect(bounds1, paint);
- canvas.restore();
- // bounds2
- canvas.save();
- paint.setColor(Color.MAGENTA);
- canvas.translate(x, y);
- canvas.drawRect(bounds2, paint);
- canvas.restore();
- // baseline
- paint.setColor(Color.RED);
- canvas.drawLine(x, y, 1024, y, paint);
- // ascent
- paint.setColor(Color.YELLOW);
- canvas.drawLine(x, y+fmi.ascent, 1024, y+fmi.ascent, paint);
- // descent
- paint.setColor(Color.BLUE);
- canvas.drawLine(x, y+fmi.descent, 1024, y+fmi.descent, paint);
- // top
- paint.setColor(Color.DKGRAY);
- canvas.drawLine(x, y+fmi.top, 1024, y+fmi.top, paint);
- // bottom
- paint.setColor(Color.GREEN);
- canvas.drawLine(x, y+fmi.bottom, 1024, y+fmi.bottom, paint);
- }
获得结果:
红线是baseline,最上面的灰线是FontMetrics.top,最下面的绿线是FontMetrics.bottom。(绿色的bottom和蓝色的descent非常接近)
从图中可知,字符本身是在灰线和绿线之间居中的,知道这个就好办了。网上说的使用paint.getTextBounds的方法都不靠谱,可以看到对一个“测”字和6个字得到的bounds是不同的,图中的矩形能很好地表示这个函数得到的是字符的边界,而不是字体的边界。
FontMetrics.top的数值是个负数,其绝对值就是字体绘制边界到baseline的距离。 所以如果是把文字画在 FontMetrics高度的矩形中, drawText就应该传入 -FontMetrics.top。 要画在targetRect的居中位置,baseline的计算公式就是: targetRect.centerY() - (FontMetrics.bottom - FontMetrics.top) / 2 - FontMetrics.top 优化后即:
(targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2
解决:
所以最开始的代码应该改成(顺便加入水平居中):
- @Override
- public void onDraw (Canvas canvas) {
- Rect targetRect = new Rect(50, 50, 1000, 200);
- Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
- paint.setStrokeWidth(3);
- paint.setTextSize(80);
- String testString = "测试:ijkJQKA:1234";
- paint.setColor(Color.CYAN);
- canvas.drawRect(targetRect, paint);
- paint.setColor(Color.RED);
- FontMetricsInt fontMetrics = paint.getFontMetricsInt();
- // 转载请注明出处:http://blog.csdn.net/hursing
- int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
- // 下面这行是实现水平居中,drawText对应改为传入targetRect.centerX()
- paint.setTextAlign(Paint.Align.CENTER);
- canvas.drawText(testString, targetRect.centerX(), baseline, paint);
- }
效果(点击查看大图):
还可以去看看android sdk源码,
转载请注明出处:http://blog.csdn.net/hursing
Android Canvas drawText实现中文垂直居中的更多相关文章
- 关于Android Canvas.drawText方法中的坐标参数的正确解释
canvas.drawText("www.jcodecraeer.com", x, y, paint); x和y参数是指定字符串中心的坐标吗?还是左上角的坐标?这个问题的直观印象 ...
- Android Canvas.drawText方法中的坐标参数的正确解释
摘要 canvas.drawText(www.jcodecraeer.com, x, y, paint); x和y参数是指定字符串中心的坐标吗?还是左上角的坐标?这个问题的直观印象应该是左上角的坐标, ...
- android Canvas drawText 文字居中
1首先利用canvas获取画布的宽高, //获取屏幕的宽和高int width = canvas.getWidth();int height = canvas.getHeight(); 2获取文字的宽 ...
- android canvas drawtext 字高
Paint pFont = new Paint(); Rect rect = new Rect(); pFont.getTextBounds("豆", 0, 1, rect); L ...
- android中画文字的换行 办法(对于遇到canvas.drawText(String s )无法实现换行问题的解决)
在使用canvas.drawText()绘制文字的时候,发现,如果需要绘制的文字较长,需要换行,通过在文字中加上“\n"或者”\r\n"都无法实现换行,如果非要使用canvas.d ...
- android Canvas 和 Paint用法
自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...
- 如何“任性”使用Android的drawText()
Android的canvas上可以画很多基本形状,诸如:圆,矩形,线条等等,其中当属文字即drawText()较难理解和使用(额,这只是就个人感受),下面将慢慢介绍下如何简单使用drawText(). ...
- Android Canvas绘图详解(图文)
编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...
- 【转】Android Canvas绘图详解(图文)
转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...
随机推荐
- python消息队列snakemq使用总结
Python 消息队列snakemq总结 最近学习消息总线zeromq,在网上搜了python实现的消息总线模块,意外发现有个消息队列snakemq,于是拿来研究一下,感觉还是很不错的,入手简单使用也 ...
- 《C和指针》章节后编程练习解答参考——第5章
5.1 题目: 略 解答代码: #include <stdio.h> int main(void) { char ch; while (((ch = getchar()) != EOF) ...
- Apriori算法在购物篮分析中的运用
购物篮分析是一个很经典的数据挖掘案例,运用到了Apriori算法.下面从网上下载的一超市某月份的数据库,利用Apriori算法进行管理分析.例子使用Python+MongoDB 处理过程1 数据建模( ...
- 浅谈C# .Net技术面试 , 正在找工作的人一定要看看
1.引子 最近一直在负责.net(B/S方向)技术面试相关的工作,前前后后面试了不少人,但是通过率较低,大概只有20%左右:有颇多感慨. 最近也一直比较困惑,原因究竟是什么? 是我们要求太高,应聘者本 ...
- struts2不能通过ONGL方式取出request中的Atrribute
请看下面一个很简单的Action package com.ahgw.main.action; import org.springframework.stereotype.Controller; /** ...
- [topcoder]CoinReversing
http://community.topcoder.com/stat?c=problem_statement&pm=11473&rd=14543 简单的概率题.那道题想了想就出来了.每 ...
- JqueryUI 为什么TypeError: $(...).slides is not a function
单独写一个html发现一切没有问题,但放在自己的网页中作为一部分却出现了问题,最后发现是那些js文件引入顺序出现了问题,
- KeilC51常用功能模块使用说明
本文档包括单片机系统中常用到的时钟中断.通讯及键盘扫描等模块(见所附源程序)的说明.这些模块使用前后台系统模型.为达到最大的灵活性, 需要在用户工程中定义config.h文件, 在其中定义各模块可选参 ...
- (转)Mono for Android 优势与劣势
最近有兴趣了解一下Mono for Andriod,也就是使用.NET平台来开发Andriod程序.Mono for Android API 几乎映射标准的Andriod API.例如,两边API几乎 ...
- jinfo命令(Java Configuration Info)
jinfo可以输出并修改运行时的java 进程的opts.用处比较简单,用于输出JAVA系统参数及命令行参数.用法是jinfo -opt pid 如:查看2788的MaxPerm大小可以用 jin ...