Android文字基線Baseline算法的使用講解
引言
Baseline是文字繪制時(shí)所參照的基準(zhǔn)線,只有先確定了Baseline的位置,我們才能準(zhǔn)確的將文字繪制在我們想要的位置上。Baseline的概念在我們使用TextView等系統(tǒng)控件直接設(shè)置文字內(nèi)容時(shí)是用不到的,但是如果我們想要在Canvas畫布上面繪制文字時(shí),Baseline的概念就必不可少了。
我們先了解一下Android中Canvas畫布繪制文字的方法,如下圖:

參數(shù)示意:
- text,文字內(nèi)容
- x,文字從畫布上開始繪制的x坐標(biāo)(Canvas是一個(gè)原點(diǎn)在左上角的平面坐標(biāo)系)
- y,Baseline所在的y坐標(biāo),不少人已開始以為y是繪制文字區(qū)域的底部坐標(biāo),其實(shí)是不正確的,這是兩個(gè)概念
- paint,畫筆,設(shè)置的文字的大小顏色等屬性
- 了解了文字繪制的方法,我們現(xiàn)在就了解一下這個(gè)參數(shù)y(Baseline)的計(jì)算方法。
Baseline的概念
我們先看一行文字各區(qū)域的分布示意圖

從上圖來看,Baseline不難理解,它就是E和h的下邊界線。我們還可以得出一個(gè)結(jié)論,文字的高度=Descent+Ascent。
然而,上面這個(gè)公式并不完全準(zhǔn)確,我們?cè)倏匆粋€(gè)圖:

我們看到,如果文字的上方有一些特殊的符號(hào),比如上圖中的~或者是我們漢語拼音中的聲調(diào)時(shí),文字區(qū)域又會(huì)多出一部分Leading。
因此,完整的公式應(yīng)該是
文字的高度=Descent+Ascent+Leading。
那么,為什么第一幅圖中沒有說明Leading的存在呢,原因是我們通常在繪制一行英文或者中文時(shí),Leading的高度為0。我們看一個(gè)證據(jù)圖,下圖是在繪制英文文字時(shí)調(diào)試取得的數(shù)據(jù)。

其中l(wèi)eading=0,所以我們?cè)谖淖掷L制時(shí)不需要考慮Leading,圖中的數(shù)值都是距離Baseline的距離,在Baseline上方為負(fù)值,下方為正值。
Baseline位置(y軸坐標(biāo))的計(jì)算
為了方便我們對(duì)計(jì)算過程進(jìn)行理解,我畫了一幅幫助圖,如下:

假設(shè)我們是在畫布Canvas的頂部繪制一行文字,規(guī)定一行文字的高度是y,文字區(qū)域的高度是Height(TOP和BOTTOM之間,TOP到0和BOTTOM到y(tǒng)的距離相等,這樣文字才看起來是居中)。因此,0到y(tǒng)和TOP到BOTTOM的中線是重合的,y軸坐標(biāo)都是y/2。
我們要繪制一行文字時(shí),設(shè)計(jì)必然會(huì)告訴我們0到y(tǒng)的距離,所以中線的位置也是固定的y/2,那么我們?cè)O(shè)置了Paint的文字大小后,Ascent和Descent又能直接得到,就可以算出中線到基線的距離,公式如下:
基線到中線的距離=(Descent+Ascent)/2-Descent
注意,實(shí)際獲取到的Ascent是負(fù)數(shù)。公式推導(dǎo)過程如下:
中線到BOTTOM的距離是(Descent+Ascent)/2,這個(gè)距離又等于Descent+中線到基線的距離,即(Descent+Ascent)/2=基線到中線的距離+Descent。
有了基線到中線的距離,我們只要知道任何一行文字中線的位置,就可以馬上得到基線的位置,從而得到Canvas的drawText方法中參數(shù)y的值。
附
Android獲取中線到基線距離的代碼,Paint需要設(shè)置文字大小textsize。
/**
* 計(jì)算繪制文字時(shí)的基線到中軸線的距離
*
* @param p
* @param centerY
* @return 基線和centerY的距離
*/
public static float getBaseline(Paint p) {
FontMetrics fontMetrics = p.getFontMetrics();
return (fontMetrics.descent - fontMetrics.ascent) / 2 -fontMetrics.descent;
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
房卡麻將分析系列 "牌局回放" 之 數(shù)據(jù)設(shè)計(jì)詳解及實(shí)例
這篇文章主要介紹了房卡麻將分析系列 "牌局回放" 之 數(shù)據(jù)設(shè)計(jì)詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-03-03
Android開發(fā)之Adobe flash操作工具類
這篇文章主要介紹了Android開發(fā)之Adobe flash操作工具類,可實(shí)現(xiàn)flash的安裝及判斷flash是否安裝等功能,需要的朋友可以參考下2017-12-12
Android編程布局控件之AbsoluteLayout用法實(shí)例分析
這篇文章主要介紹了Android編程布局控件之AbsoluteLayout用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Android絕對(duì)布局AbsoluteLayout的使用技巧,需要的朋友可以參考下2015-12-12
Android 中動(dòng)態(tài)加載.jar的實(shí)現(xiàn)步驟
本文介紹動(dòng)態(tài)加載 .jar的實(shí)現(xiàn)步驟,這將對(duì)你的android開發(fā)很有幫助,剛興趣的朋友可以了解下哦2013-01-01
Android中WebChromeClient和WebViewClient的區(qū)別淺析
這篇文章主要介紹了Android中WebChromeClient和WebViewClient的區(qū)別淺析,需要的朋友可以參考下2015-04-04
android SectorMenuView底部導(dǎo)航扇形菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了android SectorMenuView底部導(dǎo)航扇形菜單的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Android編程之客戶端通過socket與服務(wù)器通信的方法
這篇文章主要介紹了Android編程之客戶端通過socket與服務(wù)器通信的方法,結(jié)合實(shí)例形式分析了Android基于socket通訊的具體步驟與相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11

