【Android自定义View】绘图之文字篇（三）

最近有大佬说，大部分写博客的都是相当网红，想火，吓得我们这些不想火、不想当网红的人都不敢写博客了

前言

上一篇，我们说了绘制路径和简单的文字绘制，这一篇详细说说文字绘制。

• 【Android自定义View】绘图之基础篇（一）
• 【Android自定义View】绘图之Path篇（二）
• 【Android自定义View】绘图之文字篇（三）

绘制文字主要由以下几个方法

drawText(String text, float x, float y,Paint paint)
drawText(String text, int start, int end, float x, float y, Paint paint)
drawText(char[] text, int index, int count, float x, float y, Paint paint)
drawText(CharSequence text, int start, int end, float x, float y, Paint paint)

其中， start 、 end 表示截取的范围，这里就主要说说第一个方法

String text = "abcdefghijk";
        paint.setTextSize(144);//px
        paint.setColor(Color.BLACK);
        canvas.drawLine(300, 300, 1000, 300, paint);

        paint.setColor(Color.RED);
        canvas.drawText(text, 300, 300, paint);
复制代码

这个点左上角开始，而且还有部分字符超出了这个范围。

开个玩笑，我们继续分析

X方向

看上去是都是从x位置的右边开始绘制文字的，其实是由 setTextAlign(Align align) 来设置的， Align 有 LEFT 、 CENTER 、 RIGHT ，默认值为 LEFT

public enum Align {
        /**
         * The text is drawn to the right of the x,y origin
         */
        LEFT    (0),
        /**
         * The text is drawn centered horizontally on the x,y origin
         */
        CENTER  (1),
        /**
         * The text is drawn to the left of the x,y origin
         */
        RIGHT   (2);

        private Align(int nativeInt) {
            this.nativeInt = nativeInt;
        }
        final int nativeInt;
    }
复制代码

RIGHT

Y方向

• 1.基线

y是基线的位置，上述实例中，文字下的黑线被称为基线。

所以，x坐标、基线位置、文字大小确定之后，就可以确定文字的位置。

• 2.安全线

参与确定位置的其实还有4条安全线： FontMetricsInt 和 FontMetrics ，可以通过 paint.getFontMetricsInt() 和 getFontMetrics 来获取，其本质是一样的，只不过一个返回值是 int ，一个是 float

String text = "abcdefghijk";
        paint.setTextSize(144);
        paint.setColor(Color.BLACK);
        canvas.drawLine(300, 300, 1000, 300, paint);
        paint.setColor(Color.RED);
        canvas.drawText(text, 300, 300, paint);

        int top = paint.getFontMetricsInt().top + 300;
        int bottom = paint.getFontMetricsInt().bottom + 300;
        int ascent = paint.getFontMetricsInt().ascent + 300;
        int descent = paint.getFontMetricsInt().descent + 300;

        Log.e("cheng", paint.getFontMetricsInt().toString());

        paint.setColor(Color.BLACK);
        canvas.drawLine(0, top, 1000, top, paint);
        canvas.drawLine(0, bottom, 1000, bottom, paint);
        paint.setColor(Color.GREEN);
        canvas.drawLine(0, ascent, 1000, ascent, paint);
        canvas.drawLine(0, descent, 1000, descent, paint);
复制代码

从上到下，依次是 top 、 ascent 、 descent 、 bottom ，其中 top 和 bottom 分别是可绘制的最高点和最低点，在这个范围内保证可以正确显示； ascent 和 descent 分别为本次绘制的最高点和最低点。

关于4条安全线位置，这个取决于使用的字体和字号.。

比如说，同样144px的字号，使用小米兰亭字体时

FontMetricsInt: top=-153 ascent=-134 descent=35 bottom=40 leading=0

使用华康圆体W7字体时，

FontMetricsInt: top=-134 ascent=-150 descent=38 bottom=36 leading=0

本次可绘制线都超出了物理可绘制线，可见， 尽量使用官方字体

最小矩形

可以使用一下方法获取 getTextBounds(String text, int start, int end, Rect bounds)

Rect rect = new Rect();
        paint.getTextBounds(text, 0, text.length(), rect);

        Log.e("cheng", "onDraw: " + rect.toString());
复制代码

onDraw: Rect(7, -110 - 741, 31) 疑问又来了，怎么是负的？这是因为没有传递基线的位置，所以需要加上基线的位置

Rect rect = new Rect();
        paint.getTextBounds(text, 0, text.length(), rect);

        Log.e("cheng", "onDraw: " + rect.toString());

        rect.left += 300;
        rect.top += 300;
        rect.right += 300;
        rect.bottom += 300;

        paint.setColor(Color.YELLOW);
        canvas.drawRect(rect, paint);
复制代码

黄线范围即为最小矩形

示例

以(500,500)位置为中心，绘制文字

String text = "ABCDEFGH";
        paint.setTextSize(72);
        paint.setTextAlign(Paint.Align.CENTER);
        Rect rect = new Rect();
        paint.getTextBounds(text, 0, text.length(), rect);
        canvas.drawText(text, 500, (500 + (rect.bottom - rect.top) / 2), paint);

        paint.setColor(Color.RED);
        canvas.drawCircle(500, 500, 400, paint);

        canvas.drawLine(500, 0, 500, 1000, paint);
        canvas.drawLine(0, 500, 1000, 500, paint);
复制代码