Canvas文本绘制
看到标题，有同学要问了，绘制字符串我们刚开始在基础图形绘制就讲了啊，怎么又来？不可否认，我们是讲了绘制文本的drawText(@NonNull String text, float x, float y, @NonNull Paint paint),那么需求来了，在一个圆的中心点绘制文本，要求文本在圆的中心位置.
这里我们需要引入一种新的画笔工具类-TextPaint，其是Paint的直接子类，内部为文本绘制工作添加了许多额外的数据和方法。关于TextPaint其内部的方法我们部一一罗列，在后续内容中用到时再逐一做说明。
我们继续文章开头的问题，要绘制到中心该怎么做呢？很简单啊，让文本的中心点和圆的圆点重合就好了啊。
首先看下drawText(@NonNull String text, float x, float y, @NonNull Paint paint)的官方说明：
Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted based on the Align setting in the paint.
x The x-coordinate of the origin of the text being drawn
y The y-coordinate of the baseline of the text being drawn
这段话的大致意思是，drawText函数是基于坐标(x,y)绘制文本，坐标(x,y)与文本参照关系随文本的对齐方式可能发生变化，其中x代表的是所绘制文本的X轴起点坐标，y代表所绘制文本基线的X坐标。
哇，什么意思呢？同学们迷茫了，我也迷茫了，但咱是退缩的人儿吗？当然不是，这里既然说了和文本对齐方式所关，那我们直接在同一个位置用不同的对齐方式绘制下同一个文本看看效果不就好。
假设要绘制的字符串为Hello，选取的(x,y)绘制点是(500，300),在onDraw()函数中编写如下代码：
String s = "Hello";
TextPaint textPaint = new TextPaint();
textPaint.setColor(Color.BLUE);
textPaint.setTextSize(100);
//在(500,300)的坐标点，左对齐方式绘制文本Hello
textPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawText(s,500,300,textPaint);
//在(500,300)的坐标点，居中对齐方式绘制文本Hello
textPaint.setColor(Color.GREEN);
//设置文本居中对齐
textPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(s,500,300,textPaint);
//在(500,300)的坐标点，右对齐方式绘制文本Hello
textPaint.setColor(Color.BLACK);
//设置文本右对齐
textPaint.setTextAlign(Paint.Align.RIGHT);
canvas.drawText(s,500,300,textPaint);
为了更好的比对绘制结果和坐标点(x,y)的关系，我们同时绘制出(500,300)坐标点，代码如下：
//绘制点(500,300)
Paint pointPaint = new Paint();
pointPaint.setColor(Color.RED);
pointPaint.setStrokeWidth(20);
canvas.drawPoint(500,300,pointPaint);
上述代码的运行效果：
上图中蓝色的Hello文本是左对齐方式，绿色的Hello文本是居中对齐方式，黑色的Hello文本是右对齐方式，红色点为我们的(500,300)坐标点，即drawText方法原型中的(x,y)坐标点，从上图我们可以看出：
-
y坐标点指定的是绘制文本的底部对齐基线 -
x坐标点随对齐方式不同，在文本中所处的位置不同。当对齐方式是左对齐时，x坐标点是文本的左下顶点。当对齐方式为居中对齐时，x坐标为文本的下边宽度中心点。当对齐方式为右对齐时，x坐标为文本的右下顶点。
至此，我们就清楚了在drawText()方法中，(x,y)点的具体含义。
那么要使得绘制的文本在圆的内部水平居中，就只需要x坐标和圆心的x坐标重合即可，那么竖直方向呢？貌似没得玩了？实现不了？
我们换个思路，再次回忆刚开始我们在View简介中是如何介绍View的？View是一块矩形区域，那么TextView呢？当然是一块矩形区域，TextView绘制文本的本质也是调用Canvas方法，进而我们有一个大胆的猜想，我们调用drawText方法绘制的文本也在一个矩形区域内，只要找到这个矩形，我们不就得到文本宽高了吗？文本迎刃而解。
非常幸运的是，确实有这种功能的函数，函数原型是getTextBounds(String text, int start, int end, Rect bounds)，其中：
-
text:所要绘制的文本内容 -
start，end：矩形开始和结束处的字符索引，要获取整个文本所在矩形，这里start传0，end传文本的length即可 -
bounds：装载文本所在矩形的Rect对象
接下来我们使用该函数获取所要绘制的文本Hello其所在矩形吧。代码如下：
String s = "Hello";
TextPaint textPaint1 = new TextPaint();
textPaint1.setColor(Color.BLACK);
textPaint1.setTextSize(100);
Rect rect = new Rect();
//获取文本所在的矩形Rect对象
textPaint.getTextBounds(s,0,s.length(),rect);
//获取文本宽度
int width = rect.width();
//获取文本高度
int height = rect.height();
随后添加圆的绘制代码：
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.GRAY);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
canvas.drawCircle(700,1400,600,paint);
结合上文描述的drawText函数说明绘制字符串，当不指定对齐方式时，默认为左对齐，drawText中的x坐标为圆心x坐标-width/2，drawText中的y坐标为圆心y坐标+height/2：
canvas.drawText(s,700-width/2,1400+height/2,textPaint1);
最后绘制下圆心作为参考点：
canvas.drawPoint(700,1400,pointPaint);
运行后效果如下：
本节完整代码参见附录_Canvas文本绘制
原文始发于微信公众号（小海编码日记）：View绘制系列(11)-Canvas文本绘制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/67913.html
