目标:

把中文字符绘制到目标矩形的居中位置。

问题:

Android的Canvas绘图,drawText里的origin是以baseline为基准的,直接以目标矩形的bottom传进drawText,字符位置会偏下。这样写代码:

  1. @Override
  2. public void onDraw (Canvas canvas) {
  3. Rect targetRect = new Rect(50, 50, 1000, 200);
  4. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  5. paint.setStrokeWidth(3);
  6. paint.setTextSize(80);
  7. String testString = "测试:ijkJQKA:1234";
  8. paint.setColor(Color.CYAN);
  9. canvas.drawRect(targetRect, paint);
  10. paint.setColor(Color.RED);
  11. canvas.drawText(testString, targetRect.left, targetRect.bottom, paint);
  12. }

会得到难看的结果:

找方案:

首先自己动手做实验,自己定一个baseline,然后把文字画上去,再画上FontMetrics的几条线。FontMetrics里是字体图样的信息,有float型int型的版本,都可以从Paint中获取。它的每个成员数值都是以baseline为基准计算的,所以负值表示在baseline之上。实验代码:

  1. @Override
  2. public void onDraw (Canvas canvas) {
  3. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  4. paint.setStrokeWidth(3);
  5. paint.setTextSize(80);
  6. FontMetricsInt fmi = paint.getFontMetricsInt();
  7. String testString = "测试:ijkJQKA:1234";
  8. Rect bounds1 = new Rect();
  9. paint.getTextBounds("测", 0, 1, bounds1);
  10. Rect bounds2 = new Rect();
  11. paint.getTextBounds("测试:ijk", 0, 6, bounds2);
  12. // 随意设一个位置作为baseline
  13. int x = 200;
  14. int y = 400;
  15. // 把testString画在baseline上
  16. canvas.drawText(testString, x, y, paint);
  17. // bounds1
  18. paint.setStyle(Style.STROKE);  // 画空心矩形
  19. canvas.save();
  20. canvas.translate(x, y);  // 注意这里有translate。getTextBounds得到的矩形也是以baseline为基准的
  21. paint.setColor(Color.GREEN);
  22. canvas.drawRect(bounds1, paint);
  23. canvas.restore();
  24. // bounds2
  25. canvas.save();
  26. paint.setColor(Color.MAGENTA);
  27. canvas.translate(x, y);
  28. canvas.drawRect(bounds2, paint);
  29. canvas.restore();
  30. // baseline
  31. paint.setColor(Color.RED);
  32. canvas.drawLine(x, y, 1024, y, paint);
  33. // ascent
  34. paint.setColor(Color.YELLOW);
  35. canvas.drawLine(x, y+fmi.ascent, 1024, y+fmi.ascent, paint);
  36. // descent
  37. paint.setColor(Color.BLUE);
  38. canvas.drawLine(x, y+fmi.descent, 1024, y+fmi.descent, paint);
  39. // top
  40. paint.setColor(Color.DKGRAY);
  41. canvas.drawLine(x, y+fmi.top, 1024, y+fmi.top, paint);
  42. // bottom
  43. paint.setColor(Color.GREEN);
  44. canvas.drawLine(x, y+fmi.bottom, 1024, y+fmi.bottom, paint);
  45. }

获得结果:

红线是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

解决:

所以最开始的代码应该改成(顺便加入水平居中):

  1. @Override
  2. public void onDraw (Canvas canvas) {
  3. Rect targetRect = new Rect(50, 50, 1000, 200);
  4. Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  5. paint.setStrokeWidth(3);
  6. paint.setTextSize(80);
  7. String testString = "测试:ijkJQKA:1234";
  8. paint.setColor(Color.CYAN);
  9. canvas.drawRect(targetRect, paint);
  10. paint.setColor(Color.RED);
  11. FontMetricsInt fontMetrics = paint.getFontMetricsInt();
  12. // 转载请注明出处:http://blog.csdn.net/hursing
  13. int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
  14. // 下面这行是实现水平居中,drawText对应改为传入targetRect.centerX()
  15. paint.setTextAlign(Paint.Align.CENTER);
  16. canvas.drawText(testString, targetRect.centerX(), baseline, paint);
  17. }

效果(点击查看大图):

还可以去看看android sdk源码,

$android4.2/frameworks/base/corej/ava/android/text/BoringLayout.java是TextView画文字的算法

转载请注明出处:http://blog.csdn.net/hursing

Android Canvas drawText实现中文垂直居中的更多相关文章

  1. 关于Android Canvas.drawText方法中的坐标参数的正确解释

    canvas.drawText("www.jcodecraeer.com", x, y, paint);  x和y参数是指定字符串中心的坐标吗?还是左上角的坐标?这个问题的直观印象 ...

  2. Android Canvas.drawText方法中的坐标参数的正确解释

    摘要 canvas.drawText(www.jcodecraeer.com, x, y, paint); x和y参数是指定字符串中心的坐标吗?还是左上角的坐标?这个问题的直观印象应该是左上角的坐标, ...

  3. android Canvas drawText 文字居中

    1首先利用canvas获取画布的宽高, //获取屏幕的宽和高int width = canvas.getWidth();int height = canvas.getHeight(); 2获取文字的宽 ...

  4. android canvas drawtext 字高

    Paint pFont = new Paint(); Rect rect = new Rect(); pFont.getTextBounds("豆", 0, 1, rect); L ...

  5. android中画文字的换行 办法(对于遇到canvas.drawText(String s )无法实现换行问题的解决)

    在使用canvas.drawText()绘制文字的时候,发现,如果需要绘制的文字较长,需要换行,通过在文字中加上“\n"或者”\r\n"都无法实现换行,如果非要使用canvas.d ...

  6. android Canvas 和 Paint用法

    自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...

  7. 如何“任性”使用Android的drawText()

    Android的canvas上可以画很多基本形状,诸如:圆,矩形,线条等等,其中当属文字即drawText()较难理解和使用(额,这只是就个人感受),下面将慢慢介绍下如何简单使用drawText(). ...

  8. Android Canvas绘图详解(图文)

    编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! Andr ...

  9. 【转】Android Canvas绘图详解(图文)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

随机推荐

  1. linux用户管理,linux用户口令管理,linux用户组管理,linux用户权限管理详解

    linux用户管理 http://www.qq210.com/shoutu/android 用户账号的添加(新加用户需添加用户口令) :增加用户账号就是在/etc/passwd文件中为新用户增加一条记 ...

  2. 《C和指针》章节后编程练习解答参考——6.4

    <C和指针>——6.4 题目: 质数是只能被1和本身整除的整数. 在1到1000之间的质数,在数组中剔除不是质数的数. 解答代码: #include <stdio.h> #de ...

  3. 实现windows和linux的NFS交互

    说明:本文是Omni-NFS-X Windows与Linux间通讯的另一种方式和在windows中配置使用NFS客户端的杂交篇 概述 windows/winnt4.0/win2000与Linux/Fr ...

  4. VC 项目支撑文件解释

    1.解决方案文件:   a.sln 解决方案.把项目中的所有元素或者多个项目整合到一个解决方案中去. b.suo 解决方案定制项.存储用户级别对解决方案的定制,比如打开状态,断点信息.   这两个文件 ...

  5. spoj 4487. Can you answer these queries VI (gss6) splay 常数优化

    4487. Can you answer these queries VI Problem code: GSS6 Given a sequence A of N (N <= 100000) in ...

  6. ZooKeeper系列之八:ZooKeeper的简单操作

    http://blog.csdn.net/shenlan211314/article/details/6187035 1 )使用 ls 命令来查看当前 ZooKeeper 中所包含的内容: [zk: ...

  7. 使用Python实现Hadoop MapReduce程序

    转自:使用Python实现Hadoop MapReduce程序 英文原文:Writing an Hadoop MapReduce Program in Python 根据上面两篇文章,下面是我在自己的 ...

  8. Optimal Milking

    poj2112:http://poj.org/problem?id=2112 题意:K台挤奶机器,C头牛,K不超过30,C不超过200,每台挤奶机器最多可以为M台牛工作,给出这些牛和机器之间,牛和牛之 ...

  9. 【HDU4552】 怪盗基德的挑战书(后缀数组)

    怪盗基德的挑战书 Problem Description “在树最美丽的那天,当时间老人再次把大钟平均分开时,我会降临在灯火之城的金字塔前,带走那最珍贵的笑容.”这是怪盗基德盗取巴黎卢浮宫的<蒙 ...

  10. 重载VerifyRenderingInServerForm

    重载VerifyRenderingInServerForm 今天在做一个AjaxPro的应用时,VerifyRenderingInServerForm给我带来了麻烦,在网上找了找,发现大多数人的解决方 ...