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

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

 

相关文章：

《Android自定义控件三部曲文章索引》:  http://blog.csdn.net/harvic880925/article/details/50995268

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

一、概述

 

1、四线格与基线

小时候，我们在刚开始学习写字母时，用的本子是四线格的，我们必须把字母按照规则写在四线格内。
比如：

 

那么问题来了，在canvas在利用drawText绘制文字时，也是有规则的，这个规则就是基线！
我们先来看一下什么是基线：

可见基线就是四线格中的第三条线！
也就是说，只要基线的位置定了，那文字的位置必然是定了的！

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）实例

下面我们就举个例子来看一下drawText中，原点坐标(x,y)的位置。
1、首先，新建一个工程blogDrawText,然后自定义一个View:MyView

 

 

public class MyView extends View{

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

2、重写onDraw函数：
我们重写MyView的onDraw函数，自定义一个基线，然后利用drawText画出来：

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);

在上面我们讲了，drawText()函数中的Y坐标表示所要绘制文字的基线所在位置。从上面的例子，我们可以看到，我们绘图结果是在X坐标的右边开始绘制的，但这并不是必然的结果。
我们来看一张图：

 

我们知道，我们在drawText(text, x, y, paint)中传进去的源点坐标(x,y);其中，y表示的基线的位置。那x代表什么呢？从上面的例子运行结果来看，应当是文字开始绘制的地方。
并不是！x代表所要绘制文字所在矩形的相对位置。相对位置就是指指定点（x,y）在在所要绘制矩形的位置。我们知道所绘制矩形的纵坐标是由Y值来确定的，而相对x坐标的位置，只有左、中、右三个位置了。也就是所绘制矩形可能是在x坐标的左侧绘制，也有可能在x坐标的中间，也有可能在x坐标的右侧。而定义在x坐标在所绘制矩形相对位置的函数是：

 

/**
* 其中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);