歡迎到我的博客 一杯劉 觀看哦~愛你比心(* ￣3)(ε￣ *)

drawText的參數

我們通常在自定義 view 的時候，在 onDraw 函數中免不了要寫點文字，怎么寫？就用 drawText 啊，不然呢

canvas.drawText(String text, float x, float y, Paint paint)

然而用了就發現...

x，y 是啥玩意...

哈哈哈，小菊花課堂開課啦~~

x 的值分兩種：

1. 當你的 Paint 設置為myPaint.setTextAlign(Paint.Align.LEFT);
   x 就是文字最左側到當前 view 左邊距的距離

2. 當你的 Paint 設置為myPaint.setTextAlign(Paint.Align.CENTER);
   x 就是文字中央到當前 view 左邊距的距離

那 y 呢？

y 是基線到當前 view 頂部的距離

各種線

這里面涉及的坐標都是相對坐標

翠花，上圖！建議放大觀看

drawText各個位置線

基線，就是 BaseLine，文字就好像是坐在基線上一樣~
至于其他的線，看圖吧，文字是無力的。

這些線都是通過 Paint 的內部類 FontMetrics 來獲得的，如下：

FontMetrics myMetrics = myPaint.getFontMetrics();
float ascent = myMetrics.ascent;    // 負值
float descent = myMetrics.descent;
float bottom = myMetrics.bottom;
float leading = myMetrics.leading;
float top = myMetrics.top;     // 負值

需要注意的是，這些值之間的關系

ascentY - baseY = ascent

其中后綴Y代表該線的 Y 坐標

由此可以看到，ascent 和 top 在 baseLine 上方，所以是負值，另外 leading 的值通常是 0 哦(也就是和基線重合)。

知道了這些線，drawText 的參數就不是沒頭腦和不高興了吧，算算就出來了。

這回任督二脈通了吧。

還需注意的

從圖上可以看出來，漢字，英文，數字，他們的高度是不一樣的，如果你想獲取文字的高度，通常來講，用 descent - ascent 就可以了，但是對于 “g” 這種字母來講，高度也許正確，但是(descent - ascent)/2 并不是它的中心點...你問我怎么求？自己想去吧，我好累呀...

talk is cheap,show me the code

上圖截屏的代碼在這里...

/**
 * Created by LiuPeiyi on 2017/04/19.
 */

public class MyView extends View {
    private Paint myPaint;
    private Paint myLinePaint;
    private Paint.FontMetrics myMetrics;

    public MyView(Context context) {
        super(context);
        initPaint();
    }

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

    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }


    private void initPaint() {
        myPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        myPaint.setTextAlign(Paint.Align.LEFT);
        myPaint.setColor(Color.BLACK);
        myPaint.setTextSize(200);   // px

        myLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        myLinePaint.setStrokeWidth(2);

        myMetrics = myPaint.getFontMetrics();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int screenWidth = getResources().getDisplayMetrics().widthPixels;
        int screenHeight = getResources().getDisplayMetrics().heightPixels;

        int BaseY = screenHeight / 2;

        float ascent = myMetrics.ascent;    // -
        float descent = myMetrics.descent;
        float bottom = myMetrics.bottom;
        float leading = myMetrics.leading;
        float top = myMetrics.top;          // -

        Log.d("asdf", "ascent " + ascent);
        Log.d("asdf", "descent " + descent);
        Log.d("asdf", "bottom " + bottom);
        Log.d("asdf", "leading " + leading);
        Log.d("asdf", "top " + top);

        canvas.drawText("國 Agjb 123", screenWidth / 4, BaseY, myPaint);
        canvas.drawLine(0, BaseY, screenWidth, BaseY, myLinePaint);  // baseLine black

        myLinePaint.setColor(Color.RED);
        canvas.drawLine(0, ascent + BaseY, screenWidth, ascent + BaseY, myLinePaint);  //ascent red

        myLinePaint.setColor(Color.YELLOW);
        canvas.drawLine(0, descent + BaseY, screenWidth, descent + BaseY, myLinePaint);  //descent YELLOW

        myLinePaint.setColor(Color.BLUE);
        canvas.drawLine(0, bottom + BaseY, screenWidth, bottom + BaseY, myLinePaint);  //bottom BLUE

        myLinePaint.setColor(Color.GREEN);
        canvas.drawLine(0, top + BaseY, screenWidth, top + BaseY, myLinePaint);  //top GREEN

        myLinePaint.setColor(Color.MAGENTA);
        canvas.drawLine(0, leading + BaseY, screenWidth, leading + BaseY, myLinePaint);  //leading MAGENTA
    }
}