自定义控件之绘图篇（ 五）：drawText()详解

大家好，欢迎来到IT知识分享网。

前言：但行好事，莫问前程。只需努力每一天。

相关文章：

《Android自定义控件三部曲文章索引》:  自定义控件之绘图篇（ 五）：drawText()详解

long long ago，有讲过有关Canvas绘图的系列知识，当时着重在基本绘图要领和canvas的保存与回退上，对drawText没有细讲，但DrawText这个函数，确是相当复杂，这里开一篇重新讲解一下。

一、概述

1、四线格与基线

2、canvas.drawText()

（1）、canvas.drawText()与基线

下面我们来重新看看canvas.drawText（）这个函数，有关drawText的所有drawText()函数的基本用法，在文章《android Graphics（二）：路径及文字》中已经讲过，这里就不再一一讲解，只拿出一个来讲解下drawText与基线的关系：

/ * text:要绘制的文字 * x：绘制原点x坐标 * y：绘制原点y坐标 * paint:用来做画的画笔 */ public void drawText(String text, float x, float y, Paint paint)

上面这个构造函数是最常用的drawText方法，传进去一个String对象就能画出对应的文字。
但这里有两个参数需要非常注意，表示原点坐标的x和y.很多同学可能会认为，这里传进去的原点参数(x,y)是所在绘制文字所在矩形的左上角的点。但实际上并不是！比如，我们上面如果要画”harvic’s blog”这几个字，这个原点坐标应当是下图中绿色小点的位置

在(x,y)中最让人捉急的是y坐标，一般而言，(x，y)所代表的位置是所画图形对应的矩形的左上角点。但在drawText中是非常例外的，y所代表的是基线的位置！

（2）实例

public class MyView extends View{ public MyView(Context context, AttributeSet attrs) { super(context, attrs); } }

protected void onDraw(Canvas canvas) { super.onDraw(canvas); int baseLineX = 0 ; int baseLineY = 200; //画基线 Paint paint = new Paint(); paint.setColor(Color.RED); canvas.drawLine(baseLineX, baseLineY, 3000, baseLineY, paint); //写文字 paint.setColor(Color.GREEN); paint.setTextSize(120); //以px为单位 canvas.drawText("harvic\'s blog", baseLineX, baseLineY, paint); }

在这里，先定义drawText原点的位置：（0，200）
首先，我们把(0,200)所在的这条横线画出来，所以我先画了一条线从点坐标为(0,200)到点坐标为(3000,200)的一条直线
然后利用canvas.drawText以（0，200）为原点画出文字
3、在main.xml中添加使用代码：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.example.blogDrawText.MyView android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>

效果图如下：

结论：

• 1、drawText是中的参数y是基线的位置。
• 2、一定要清楚的是，只要x坐标、基线位置、文字大小确定以后，文字的位置就是确定的了。

3、paint.setTextAlign(Paint.Align.XXX);

/ * 其中Align的取值为：Panit.Align.LEFT,Paint.Align.CENTER,Paint.Align.RIGHT */ Paint::setTextAlign(Align align);

我们再来重新看一下上面的例子，当我们设置为不同的值时，绘制结果是怎样的。
同样的代码，我们加上paint.setTextAlign()来设置相对位置来看看结果。
（1）、setTextAlign(Paint.Align.LEFT)
在原来代码上加上paint.setTextAlign(Paint.Align.LEFT)

protected void onDraw(Canvas canvas) { super.onDraw(canvas); int baseLineY = 200; int baseLineX = 0 ; //画基线 Paint paint = new Paint(); paint.setColor(Color.RED); canvas.drawLine(baseLineX, baseLineY, 3000, baseLineY, paint);