android学习16#--学习canvas.drawText

本来这篇文章是要写写我在设计高级跑马灯程序的心得的，但是编写过程中花了近一天多的时间搞明白canvas.drawText中的第三个参数[float y]代表的真实含义。学习本文应该能帮助大家掌握FontMetrics类和Rect类成员变量值具体含义。

drawText引出问题

先来看看api中是如何定义drawText的参数。

    /**
     * Draw the text, with origin at (x,y), using the specified paint. The
     * origin is interpreted based on the Align setting in the paint.
     *
     * @param text  The text to be drawn
     * @param x     The x-coordinate of the origin of the text being drawn
     * @param y     The y-coordinate of the baseline of the text being drawn
     * @param paint The paint used for the text (e.g. color, size, style)
     */
    public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
        native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags,
                paint.getNativeInstance(), paint.mNativeTypeface);
    }

简单解释下各参数：
@param text：要显示的文本内容，这个不难理解。
@param x：文本相对屏幕原点x方向距离，没有更深的含义，也比较好理解
@param y：文本的baseline相对屏幕原点y方向距离。好，问题来了，baseline是个什么鬼东东
@param paint：画笔

baseline的来龙去脉

先看看baseline在文字区域的位置。通过一个实例来分析，这里只贴主要的code。

    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);

        mRect = new Rect();
        mPaint = new Paint();
        mPaint.setTextSize(64);
        mPaint.setColor(Color.RED);

        Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
        mPaint.getTextBounds(textStr, 0, textStr.length(), mRect);

        int w = mRect.width();
        int h = mRect.height();

        mRect = new Rect(mRectLeft, mRectTop, mRectLeft+w, mRectTop+(-fontMetrics.top)+fontMetrics.bottom);

        canvas.drawRect(mRect, mPaint);

        mBaseLine = (mRect.bottom+mRect.top)/2
                - (fontMetrics.bottom+fontMetrics.top)/2;

        mBaseLine = -fontMetrics.top;

        /*其中y == mBaseLine的值*/
        mPaint.setColor(Color.WHITE);
        canvas.drawText(textStr, mRectLeft, mBaseLine, mPaint);

        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(3);
        /*将mBaseLine所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine, mRectLeft+w, mBaseLine, mPaint);
    }

效果图：

分析

从上图可以看出来，baseline并不是文字区域的底部，但是这根线的位置相信大家都熟悉，除非你没有学过英语。

FontMetrics

FontMetrics是Paint静态内部类，主要定义了Paint绘制文本时的关键坐标。API中这么描述：

Class that describes the various metrics for a font at a given text size. Remember, Y values increase going down, so those values will be positive, and values that measure distances going up will be negative. This class is returned by getFontMetrics(). 

主要意思：根据设定的fontsize来获得字体的各种变量值。通过getFontMetrics()方法来获取。
FontMetrics类含有5个成员变量：

    public static class FontMetrics {
        /**
         * The maximum distance above the baseline for the tallest glyph in
         * the font at a given text size.
         */
        public float   top;
        /**
         * The recommended distance above the baseline for singled spaced text.
         */
        public float   ascent;
        /**
         * The recommended distance below the baseline for singled spaced text.
         */
        public float   descent;
        /**
         * The maximum distance below the baseline for the lowest glyph in
         * the font at a given text size.
         */
        public float   bottom;
        /**
         * The recommended additional space to add between lines of text.
         */
        public float   leading;
    }

很明显所有的值都是基于baseline来算的。这里我主要关注top这个值的定义。
top：api的注释翻译过来意思是字体可绘制区域最高位置与baseline的距离。但是它是个负数，所以-top就是我们的baseline坐标值。
ascent：字体下单个字符最高位置与baseline的距离
descent：字体下单个字符最低位置与baseline的距离，与ascent镜像对应
bottom：字体可绘制区域最低位置与baseline的距离。
leading：字面翻译是文本线额外的空间。一般都为0，不知道有何用处。

Rect

Rect类表示的一块矩形区域。Paint类中getTextBounds()方法可以获取对应font size下文本所占用矩形区域。记住这个矩形区域的坐标值也是相对baseline来计算的。
Rect类成员变量有4个，分别是left、top、right、bottom。由于文本的rect区域是相对baseline来计算的，因此真实的top跟bottom都要加上baseline的值。

借助一个实例来理解FontMetrics和Rect

主要源码：

    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);

        mRect = new Rect();
        mPaint = new Paint();
        mPaint.getTextBounds(textStr, 0, 1, mRect);
        mPaint.setTextSize(textSize);
        mPaint.setColor(0xffF4A460);

        Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
        mPaint.getTextBounds(textStr, 0, textStr.length(), mRect);

        int w = mRect.width();
        int h = mRect.height();

        /*给fontMetrics区域填充0xffF4A460色*/
        mRect = new Rect(mRectLeft, mRectTop, mRectLeft+w, mRectTop+(-fontMetrics.top)+fontMetrics.bottom);
        canvas.drawRect(mRect, mPaint);

        /*计算baseline，其中mRectTop是控件顶部到父view的距离*/
        mBaseLine = -fontMetrics.top + mRectTop;

        /*其中y == mBaseLine的值*/
        mPaint.setColor(Color.WHITE);
        canvas.drawText(textStr, mRectLeft, mBaseLine, mPaint);

        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(4);
        /*蓝色线：将mBaseLine所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine, mRectLeft+w, mBaseLine, mPaint);

        mPaint.setColor(Color.GREEN);
        /*绿色线：将文字区域的bottom所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine+fontMetrics.bottom, mRectLeft+2*w
                , mBaseLine+fontMetrics.bottom, mPaint);

        mPaint.setColor(Color.RED);
        /*红色线：将文字区域的top所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine+fontMetrics.top, mRectLeft+2*w
                , mBaseLine+fontMetrics.top, mPaint);

        mPaint.setColor(Color.GRAY);
        /*灰色线：将文字区域的ascent所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine+fontMetrics.ascent, mRectLeft+w+50
                , mBaseLine+fontMetrics.ascent, mPaint);

        mPaint.setColor(Color.WHITE);
        /*白色线：将文字区域的descent所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine+fontMetrics.descent, mRectLeft+w+50
                , mBaseLine+fontMetrics.descent, mPaint);

        mPaint.setColor(Color.YELLOW);
        /*黄色线：将文字区域的leading所在的位置画出来*/
        canvas.drawLine(mRectLeft, mBaseLine+fontMetrics.leading, mRectLeft+w/2
                , mBaseLine+fontMetrics.leading, mPaint);

        /*将“测”字的rect用矩形绘出来*/
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.getTextBounds(textStr, 0, 1, mRect);
        mRect.top+=mBaseLine;
        mRect.bottom+=mBaseLine;
        canvas.drawRect(mRect, mPaint);

        /*将“测试:12hg”字的rect用矩形绘出来*/
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.getTextBounds(textStr, 0, 7, mRect);
        mRect.top+=mBaseLine;
        mRect.bottom+=mBaseLine;
        canvas.drawRect(mRect, mPaint);
    }

效果图：

FontMetrics：
1. 浅黄色区域就是文字的FontMetrics区域，可以看出来文字实在此区域垂直居中绘制
2. 红色线：为FontMetrics的top
3. 灰色线：为FontMetrics的ascent
4. 黄色线：为FontMetrics的leading
5. 蓝色线：为baseline线
6. 白色线：为FontMetrics的descent
7. 绿色线：为FontMetrics的bottom
Rect：
1. 第一个小黑矩形为“测”字的rect区域
2. 第二个长黑矩形为“测试:12hg”字的rect区域

总结

只要彻底弄明白baseline才能轻松掌握drawText接口，才不至于开发的时候总是搞不明白绘制的文字要么偏上要么偏下。

参考

http://blog.csdn.net/hursing/article/details/18703599
http://892848153.iteye.com/blog/2205002
http://blog.csdn.net/linghu_java/article/details/46404081
http://blog.csdn.net/sirnuo/article/details/21165665
http://gundumw100.iteye.com/blog/1025185