前言

筆者最近在做一款彈幕控件，里面涉及到繪制文本，以及文本邊框。而繪制文本邊框需要知道文本的左邊位置，上邊位置，以及文本的寬高。

通常來說，使用 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í)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論