Android精確測量文本寬高及基線位置的方法
前言
筆者最近在做一款彈幕控件,里面涉及到繪制文本,以及文本邊框。而繪制文本邊框需要知道文本的左邊位置,上邊位置,以及文本的寬高。
通常來說,使用 Canvas 繪制文本,可以通過畫筆 Paint 來設(shè)置文字的大小。但是畫筆的大小與文字的寬高并無直接關(guān)系。
大家應(yīng)該能說上幾種測量文字寬高的方法,如:
方案1. 通過 Paint 的 measureText 方法,可以測量文字的寬度
方案2. 通過獲取 Paint 的 FontMetrics, 根據(jù) FontMetrics 的 leading, ascent, 和 descent可以獲取文字的高度。
方案3. 通過 Paint 的 getTextBounds 獲取文本的邊界矩形 Rect,根據(jù) Rect 可以計算出文字的寬高。
方案4. 通過 Paint 獲取文字的 Path, 根據(jù) Path 獲取文本的邊界矩形 Rect, 根據(jù) Rect 可以計算出文字的寬高。
表面上看,我們有以上四種方案可以獲取文字的寬或高。但是不幸的,這四種方案里,有些方法獲取到的數(shù)值不是真實的文字寬高。
我們通過以下測試代碼,分別測試字母 "e" 和 "j"。
private void measureText(String str) { if (str == null) { return; } float width1 = mPaint.measureText(str); Log.i("lxc", "width1 ---> " + width1); Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); float height1 = Math.abs(fontMetrics.leading + fontMetrics.ascent) + fontMetrics.descent; Log.i("lxc", "height1 ---> " + height1); Rect rect = new Rect(); mPaint.getTextBounds(str, 0, str.length(), rect); float width2 = rect.width(); float height2 = rect.height(); Log.i("lxc", "width2 ---> " + width2); Log.i("lxc", "height2 ---> " + height2); Path textPath = new Path(); mPaint.getTextPath(str, 0, str.length(), 0.0f, 0.0f, textPath); RectF boundsPath = new RectF(); textPath.computeBounds(boundsPath, true); float width3 = boundsPath.width(); float height3 = boundsPath.height(); Log.i("lxc", "width3 ---> " + width3); Log.i("lxc", "height3 ---> " + height3); }
調(diào)用以下代碼測試
measureText("e"); Log.i("lxc", " <----分割線----> "); measureText("j");
日志輸出如下:
08-13 22:50:20.777 4977-4977/com.orzangleli.textbounddemo I/lxc: width1 ---> 21.0
08-13 22:50:20.777 4977-4977/com.orzangleli.textbounddemo I/lxc: height1 ---> 46.875
08-13 22:50:20.777 4977-4977/com.orzangleli.textbounddemo I/lxc: width2 ---> 18.0
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: height2 ---> 22.0
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: width3 ---> 17.929688
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: height3 ---> 21.914062
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: <----分割線---->
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: width1 ---> 10.0
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: height1 ---> 46.875
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: width2 ---> 8.0
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: height2 ---> 37.0
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: width3 ---> 8.046875
08-13 22:50:20.778 4977-4977/com.orzangleli.textbounddemo I/lxc: height3 ---> 37.36328
首先,我們可以確定字母 "e" 和 "j" 的顯示高度應(yīng)該不一樣,而使用第二種 FontMetrics 方案計算出的兩種情況文字高度一樣,而且從代碼的調(diào)用上看,我們也是直接根據(jù) Paint 獲取的 FontMetrics, 與文字內(nèi)容無關(guān)。所以我們需要測量文字真實高度的話,需要排除第二種方案了。
我們準備一個自定義 View,在 onDraw 方法中使用 mPaint 繪制一個文本 "e", 然后截圖測量文本寬高,得出以下結(jié)果:
可以看到,文本的寬為 18, 高為 22。 可以得出以下結(jié)論:
方案1測量結(jié)果為近似值,存在一定誤差。
方案3測量結(jié)果準確。
方案4測量結(jié)果精度更高,數(shù)值基本與方案3一致。
再多說幾句。與測量文字高度類似,我們?nèi)绾潍@取文字的基線 baseline 位置。
一般的博客上會告訴我們,如果需要計算文字的基線 baseline 位置,可以通過 FontMetrics 來計算。FontMetrics 基線上面的值為負數(shù),基線下面的值為正數(shù)。baseline 計算公式為:
baseline = ascent + leading
如果你真的使用了這個公式就會發(fā)現(xiàn)坑。這個公式計算的基線位置實際上是默認字體的基線位置,與文字內(nèi)容無關(guān)。我們可以看下面的例子:
在自定義 View 的 onDraw 方法中,繪制一個字符 "e", 繪制y坐標(biāo)為 baseline,所以文字應(yīng)該會頂著 Activity 的邊界。
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint.FontMetrics fontMetrics = mPaint.getFontMetrics(); float baseline = Math.abs(fontMetrics.leading + fontMetrics.ascent); canvas.drawText("e", 0, baseline, mPaint); }
顯示結(jié)果為:
那問題來了,究竟怎么計算才能計算出真實的文本的基線位置呢。
我們使用之前的方案3來試試。代碼如下:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); String str = "e"; Rect rect = new Rect(); mPaint.getTextBounds(str, 0, str.length(), rect); float baseline = Math.abs(rect.top); canvas.drawText(str, 0, baseline, mPaint); }
看看效果, 已經(jīng)能夠滿足我們的需求,左上都頂著 Activity 顯示了。
總結(jié)
精確測量文本寬高時,盡量不要使用 FontMetrics 去做。如果要求不精確,可以使用 Paint 的 measureText 方法計算文本寬度,如果要求精確測量,可以使用 Paint 的 getTextBounds 方法 或者 getTextPath 方法,獲取文本的邊界框矩形 Rect, 所獲的Rect 的寬高即為文本的寬高, Rect的 top 為文本上邊界距基線的距離, Rect 的 bottom 為文本下邊距距離基線的距離。
本文涉及的代碼可以在我的 GitHub 項目 AndroidBlogDemo github.com/hust2010107 (本地下載)… 。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
Android移動應(yīng)用開發(fā)指南之六種布局詳解
Android應(yīng)用界面要美觀好看,就需要運用到一定的布局技術(shù),Android布局是不可忽視的,是android應(yīng)用界面開發(fā)的重要一環(huán),這篇文章主要給大家介紹了關(guān)于Android移動應(yīng)用開發(fā)指南之六種布局的相關(guān)資料,需要的朋友可以參考下2022-09-09Android自定義View 實現(xiàn)水波紋動畫引導(dǎo)效果
在android程序開發(fā)中,我們經(jīng)常簡單通過自定義view實現(xiàn)水波紋動畫引導(dǎo)功能,下面通過本文給大家分享實現(xiàn)代碼,需要的朋友參考下2017-01-01Android使用分類型RecyclerView仿各大商城首頁
這篇文章主要為大家詳細介紹了Android使用分類型的RecyclerView仿各大商城首頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02Android直播系統(tǒng)平臺搭建之圖片實現(xiàn)陰影效果的方法小結(jié)
這篇文章主要介紹了Android直播系統(tǒng)平臺搭建, 圖片實現(xiàn)陰影效果的若干種方法,本文給大家?guī)砣N方法,每種方法通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2021-08-08Android Java調(diào)用自己C++類庫的實例講解
今天小編就為大家分享一篇關(guān)于Android Java調(diào)用自己C++類庫的實例講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-02-02