绘制基础（四）- 绘制字体

平时项目里会涉及到一些文字绘制，这里记录下自己学的的。

先来一张网上找的图，简单介绍下android是按啥规则绘制字体的：

FontMetrics

这个需要结合Paint.FontMetrics这个类来看：

    /**
     * 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().
     */
    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，像canvas.drawText()里头的y，就是baseLine的位置，所以，有时候虽然我们绘制时参数y在居中位置，但是实际体现的效果确不居中，这就是因为文字时基于baseLine来绘制的。这个时候的y，就需要根据文字来特地计算：

public class SportsView extends View {

    private final static float RING_WIDTH = UiUtils.dpToPixel(20);
    private final static float RADIUS = UiUtils.dpToPixel(150);
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Rect rect = new Rect();
    private Paint.FontMetrics fontMetrics = new Paint.FontMetrics();

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

    {
        paint.setTextSize(UiUtils.dpToPixel(100));
        paint.setTextAlign(Paint.Align.CENTER);
    }

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

        // 绘制环
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(RING_WIDTH);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, RADIUS, paint);

        // 绘制进度条
        paint.setColor(Color.RED);
        paint.setStrokeCap(Paint.Cap.ROUND);
        canvas.drawArc(getWidth() / 2 - RADIUS, getHeight() / 2 - RADIUS,
                getWidth() / 2 + RADIUS, getHeight() / 2 + RADIUS,
                -90, 225, false, paint);

        paint.setStyle(Paint.Style.FILL);
//        // 读取文字的实时绘制范围，以用于后面如何对baseline进行偏移
//        paint.getTextBounds("123", 0, "123".length(), rect);
//        int offset = (rect.top + rect.bottom) / 2;
//        // 会在baseLine上画，baseline是一个稳定线，因为文字的y轴难以确定
//        // 文字横向居中很容易，使用Center即可，但是纵向居中就比较麻烦了
//        // 虽然该方法会让文字非常居中，但是，当文字变化是，可能会跳动，因为绘制范围是根据文字内容来计算的
//        canvas.drawText("123", getWidth() / 2, getHeight() / 2 - offset, paint);

          // 左对齐情况，如果希望文字完全贴边，即去除文字访问的左边部分
//        canvas.drawText("123", - rect.left, 200, paint);

        paint.getFontMetrics(fontMetrics);
        // 这样标准比较统一，不会让文字跳动，适用于变动场景
        float offset = (fontMetrics.ascent + fontMetrics.descent) / 2;
        canvas.drawText("123", getWidth() / 2, getHeight() / 2 - offset, paint);
    }
}

效果图

总结：文字绘制主要是BaseLine的应用。