DrawText的基線

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

drawText的參數(shù)

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

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

然而用了就發(fā)現(xiàn)...

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 的參數(shù)就不是沒頭腦和不高興了吧,算算就出來了。

這回任督二脈通了吧。

還需注意的

從圖上可以看出來,漢字,英文,數(shù)字,他們的高度是不一樣的,如果你想獲取文字的高度,通常來講,用 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
    }
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容