【Android自定義View】繪圖之文字篇（三）

題外話

最近有大佬說，大部分寫博客的都是至關網紅，想火，嚇得咱們這些不想火、不想當網紅的人都不敢寫博客了

前言

上一篇，咱們說了繪製路徑和簡單的文字繪製，這一篇詳細說說文字繪製。

• 【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);
複製代碼

好像跟咱們想象的不同，並非從 (300,300)這個點左上角開始，並且還有部分字符超出了這個範圍。

開個玩笑，咱們繼續分析

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

CENTER

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);
複製代碼