1215 views
# Android在任意位置绘制文本 ###### tags: `blog` [toc] ## 基础 通常情况下,在屏幕的特定位置上显示文字是个很简单的事情。使用`TextView`,结合各种`XxxLayout`,基本上想在哪显示文字都可以。但当显示的文字需要频繁更新的时候,使用`TextView`可能就不是那么明智了。 前段时间遇到这样一个需求,如图: ![](https://i.imgur.com/StixskJ.png) 外围圈圈旋转填充的过程中,中间的数字(指代百分比)从0到100变化,动画在几百毫秒内完成。文字在圈圈的正中显示。看到需求,首先想到的自然是使用`TextView`来显示中间的数字,通过不断`setText`来更新文本显示。然而,运行起来后发现`TextView`的更新有很严重的卡顿,打开`TextView#onDraw`方法,发现这个方法里做了很多事情,`onDraw`如此频繁地被调用,卡顿是自然的。如果直接继承`View`,`onDraw`时使用`Canvas#drawText`实现文本绘制,省去`TextView`的大量额外计算,效率则会提升很多。 `Canvas#drawText`的原型如下: ```clike= public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) ``` 绘制文本的时候,我们需要传入(x,y)坐标参数让`Canvas`知道我们期望在哪个位置绘制文本。那么问题来了,**(x,y)到底是哪个点呢?x、y分别传入多少才能让文字在圈圈的中间显示呢?本文将通过这个例子,来讲述Android中如何灵活地在想要的位置绘制文本。** 上述需求中,如果我们能找到文本的中心点和(x, y)的关系,然后把这个中心点和圈圈的中心点对齐,算出相应的(x, y),文本就能显示在圈圈的中心了。 首先通过如下实例代码来观察文本位置和(x,y)坐标的关系: ```clike= String text = "afp8"; canvas.drawText(text, x, y, paint); // 画两条垂直相交的直线直观地展示点(x,y)的位置 drawHorizontalLine(canvas, y, Color.BLUE); // 自定义方法,画一条水平线 drawVerticalLine(canvas, x, Color.BLUE); // 自定义方法,画一条垂直线 ``` 运行结果如下: ![](https://i.imgur.com/0hHnzqj.png) 由此看到,(x,y)是文本区域左下角的一个点,x值是文本区域的左边沿,y水平线对齐"a" "f" "8" 的底部,但"p"有一部分超出了y水平线。实际上,y水平线就是字体排印学中的**“基线(baseline)”**,大部分英文字母和阿拉伯数字都绘制在基线之上,例外的如上述实例中的“p”等,下半部分会超出基线。基线以下的部分叫做**“降部(descent)”**,相应地,在基线之上的部分称为**“升部(ascent)”**。`Paint`类提供了`Paint#descent`和`Paint#ascent`方法获取文本的降部和升部。以下实例代码结合降部和升部,画出两条水平线: ```clike= drawHorizontalLine(canvas, y + paint.descent(), Color.GREEN); drawHorizontalLine(canvas, y + paint.ascent(), Color.RED); // paint.ascent()返回负数,因此是"+" ``` 运行结果如下: ![](https://i.imgur.com/FfKfELd.png) 通过升部降部,**我们计算出了文本绘制区域的上下边沿,上下边沿y坐标的中值就是文本中心点的y坐标**。中心点的y坐标已经可以计算出来,那x坐标呢?我们可以想到,既然已经知道文本区域左边沿,只要知道文本区域的宽度,左边向右平移半个宽度,就能得出中心点的x坐标。试一下: ```clike= float textWidth = paint.measureText("afp8"); drawVerticalLine(canvas, x + textWidth / 2, Color.BLACK); ``` 运行结果如下: ![](https://i.imgur.com/il4J7Ed.png) 利用文本宽度,**我们也顺利计算出文本区域中心点的x坐标**。因此,上述需求也就可以轻松实现了。 ## 扩展 ### Paint#setTextAlign 上述实例中,要找到文本区域中心点的x坐标,实际上还有更简单的实现方式,就是设置画笔的对齐方式为`Paint.Align.Center`。`Paint#setTextAlign`作用是设置画笔绘制文本时(x,y)参考点的水平对齐方式,可以是`Paint.Align.LEFT`或`Paint.Align.CENTER`或`Paint.Align.Right`(默认是LEFT),三者的区别可通过以下实例代码来体现: ```clike= drawHorizontalLine(canvas, y, Color.BLUE); paint.setTextAlign(Paint.Align.LEFT); canvas.drawText("left", x, y, paint); drawVerticalLine(canvas, x, Color.BLUE); paint.setTextAlign(Paint.Align.CENTER); canvas.drawText("center", x + 550, y, paint); drawVerticalLine(canvas, x + 550, Color.RED); paint.setTextAlign(Paint.Align.RIGHT); canvas.drawText("right", x + 1200, y, paint); drawVerticalLine(canvas, x + 1200, Color.GREEN); ``` 运行结果如下: ![](https://i.imgur.com/JkoL1EG.png) ### Paint#getTextBounds VS. Paint#measureText 根据文档,`Paint#getTextBounds`可以获取一个能包裹住文本的最小的矩形,矩形原点默认是(0,0)。参考以下实例代码,并将`Paint#getTextBounds`和`Paint#measureText`获取的文本宽度进行比较: ```clike= paint.getTextBounds(text, 0, text.length(), rect); // 获取的矩形的原点是(0,0),加100和加300是为了让矩形的左上角和文本的左上角对齐 canvas.drawRect(rect.left + 100, rect.top + 300, rect.right + 100, rect.bottom + 300, paint); float textWidth = paint.measureText(text); drawVerticalLine(canvas, x + textWidth, Color.GREEN); ``` 运行结果如下: ![](https://i.imgur.com/hl7vp7X.png) 如文档所说,`Paint#getTextBounds`得到的矩形是能包裹文本的最小的矩形,对齐后矩形的四边都紧贴着文本。而`Paint#measureText`获取的文本宽度实际上比`Paint#getTextBounds`得到的矩形宽度要大。而且标注文本区域的升部和降部的两条水平线间的距离比`Paint#getTextBounds`得到的矩形的高度也要大一些。 ### 中文字符 [维基百科中](https://zh.wikipedia.org/wiki/%E5%9F%BA%E7%B7%9A)说东亚字体无基线,也无升部和降部,那Android里中文的绘制是怎样的一种情况呢?先看一个中文字符绘制的实例: ```clike= canvas.drawText("中文", x, y, paint); drawHorizontalLine(canvas, y + paint.descent(), Color.GREEN); drawHorizontalLine(canvas, y + paint.ascent(), Color.BLACK); ``` 运行结果如下: ![](https://i.imgur.com/KLJg1l1.png) 从运行结果看,似乎和英文字符的绘制并无两样,好像也是有“基线”和“升部”“降部”的。那怎么理解“东亚字体无基线”呢?这里直接贴[一个来自知乎用户的解释](https://www.zhihu.com/question/22183501/answer/20566238)。 ## 总结 - 使用`Canvas#drawText`进行文本绘制时,参考点(x,y)的x坐标根据画笔的对齐方式而定,可以通过`Paint#setTextAlign`设置左、中、右对齐。而y坐标是基线的y坐标。 - 使用`Paint#ascent`和`Paint#descent`获取文本区域的升部和降部,进而可以定位文本区域的上下边沿。 - `Paint#getTextBounds`获取一个能包裹住文本的最小矩形,矩形原点默认为(0,0)。 - 中文字符的绘制和英文字符并无区别,也可使用类似的基线和升部、降部。 (完)