【Android 應用開發】Canvas 繪製文字 ( 文字尺寸測量 | 基線繪製 )

I . 文字尺寸測量

---

1 . 精準繪製需求 : Canvas 繪製文字時 , 有時需要精準的控制文字的繪製 , 如繪製到指定的區域 , 居中 , 或者位於某個精準的座標 ;

2 . 精準測量 : 要實現精準繪製 , 必須對字符串繪製的區域有詳細的測量 , 如字符串繪製的 寬度 , 高度 等信息時必須知道的 ;

3 . 測量文字寬度 ( 粗略 ) : 調用 Paint 的 measureText ( ) 方法 , 可以測量整體寬度 ;

//1 . 創建畫筆
Paint paint = new Paint();
//2 . 要繪製的字符串
String text = "ABCD";

//3 . 測量寬度
float textWidth = paint.measureText(text);

//4 . 打印測量結果 : textWidth : 32.0
Log.i(TAG, "textWidth : " + textWidth);

4 . 測量文字每個字符的寬度 ( 精確 ) : 調用 Paint 的 getTextWidths ( ) 方法 , 可以測量每個字符的寬度 ;

//1 . 創建畫筆
Paint paint = new Paint();
//2 . 要繪製的字符串
String text = "ABCD";

//3 . 獲取 從第 0 個開始 , text.length() 個字符 , 每個字符的寬度 , 將其存儲到 widths 數組中
float[] widths = new float[text.length()];
paint.getTextWidths(text, 0, text.length(), widths);

//4 . 打印測量結果 : widths[0] : 8.0 , widths[1] : 8.0 , widths[2] : 8.0 , widths[3] : 8.0
Log.i(TAG, "widths[0] : " + widths[0] +
        " , widths[1] : " + widths[1] +
        " , widths[2] : " + widths[2] +
        " , widths[3] : " + widths[3]);

5 . 測量文字矩形區域 ( 推薦 ) : 調用 Paint 的 getTextBounds ( ) 方法 , 可以測量字符串繪製的矩形區域 , 可以獲取其寬度 , 高度 , 左上右下 等信息 ;

//1 . 創建畫筆
Paint paint = new Paint();

//2 . 要繪製的字符串
String text = "ABCD";

//3 . 測量結果載體
Rect rect = new Rect();

//4 . 測量繪製字符串的矩形區域 , 將測量結果放入 rect 對象中
paint.getTextBounds(text,0, text.length(), rect);

//5 . 打印結果 : rect : Rect(0, -9 - 31, 0)
Log.i(TAG, "rect : " + rect);

II . 基線繪製

---

1 . 隱含的五條線 : 使用 Canvas 繪製的字符串 , 每個繪製的字符串 , 都隱含五條線 :

① Top 線 : 字符串繪製最頂部 , 不會超過該線 ;

② Asent 線 : 字母的最高點 ;

③ Baseline 線 : 文字繪製的基線 ;

④ Descent 線 : 字母的最低點 ;

⑤ Bottom 線 : 字符串繪製最頂部 , 不會低於該線 ;

2 . 獲取上述除基線外的四個值 : 注意這幾個值的加減關係 , 每條線的值減去基線的值 , 有正數 , 有負數 ;

FontMetrics fontMetrics = mPaint.getFontMetrics();

//Top - Baseline : top : -12.673828
fontMetrics.top;

//Ascent - Baseline : ascent : -11.1328125
fontMetrics.ascent;

//Descent - Baseline : descent : 2.9296875
fontMetrics.descent;

//Bottom - Baseline : bottom : 3.2519531
fontMetrics.bottom;

4 . 相關數的正負值 :

基線的位置是 0 : Baseline = 0 ;

每個值的正負 : 高於基線的大於 0 , 小於基線的小於 0 ; 即 Top 和 Asent 是小於 0 的數 ; Descent 和 Bottom 是大於 0 的數 ;

5 . 已知頂端位置繪製字符串 :

Baseline + Top = 繪製字符串最頂端值 ;

Baseline = 繪製字符串最頂端值 - Top ;

此時 , 如果已知繪製的最頂端的值 , 調用 drawText 方法 , 需要傳入一個基線值 , 此時就需要用到 “Baseline = 繪製字符串最頂端值 - Top” 公式了 ;

下面是在 ( 0 , 100 ) 座標系位置繪製字符串 , 字符串的左上角是 ( 0 , 100 ) 座標 ;

//創建畫筆
Paint paint = new Paint();
//要繪製的字符串
String text = "ABCD";

//打印四個值 : 
//top : -12.673828 , leading : 0.0 , ascent : -11.1328125 , descent : 2.9296875 , bottom : 3.2519531
L.i(TAG, "top : " + paint.getFontMetrics().top +
        " , leading : " + paint.getFontMetrics().leading +
        " , ascent : " + paint.getFontMetrics().ascent +
        " , descent : " + paint.getFontMetrics().descent +
        " , bottom : " + paint.getFontMetrics().bottom);

//計算出文字基線的值
float baseline = 100 - paint.getFontMetrics().top;

//在 ( 0 , 100 ) 座標系位置繪製字符 , 字符串的左上角是 ( 0 , 100)
canvas.drawText(text , 0, baseline , paint);

下面的圖片僅供參考 :