DrawText的基线

欢迎到我的博客 一杯刘 观看哦~爱你比心(* ￣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
    }
}