android Graphics（ 五）：drawText()詳解

android Graphics（ 五）：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中添加使用代碼：

<!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<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">
</com.example.blogdrawtext.myview></linearlayout>

效果圖如下：

結論：
1、drawText是中的參數y是基線的位置。2、一定要清楚的是，只要x坐標、基線位置、文字大小確定以後，文字的位置就是確定的了。