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

歡子發表於2019-05-13
原文網址 : https://juejin.im/post/5cd92bcfe51d453a4d530d96
AndroidView繪圖

題外話

最近有大佬說，大部分寫部落格的都是相當網紅，想火，嚇得我們這些不想火、不想當網紅的人都不敢寫部落格了

【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);
複製程式碼

image.png
好像跟我們想象的不一樣，並不是從(300,300)這個點左上角開始，而且還有部分字元超出了這個範圍。

image.png

開個玩笑，我們繼續分析

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

image.png
CENTER
image.png

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

image.png

從上到下，依次是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

image.png

本次可繪製線都超出了物理可繪製線，可見，儘量使用官方字型

最小矩形

可以使用一下方法獲取 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);
複製程式碼

黃線範圍即為最小矩形

image.png

示例

以(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);
複製程式碼

image.png

相關文章