1. 程式人生 > 實用技巧 >android: Canvas drawText()文字居中

android: Canvas drawText()文字居中

嫌麻煩可以直接看結論:

文字居中的公式:

float baseLineY = centerY + (Math.abs(fontMetrics.top) + Math.abs(fontMetrics.bottom)) /2 - fontMetrics.bottom

也可以簡化成:

float baselineY = centerY + (fontMetrics.bottom - fontMetrics.top)/2 - FontMetrics.bottom;

PS:

1. centerY就是文字所在父View的中點的Y座標。比如文字想要在一個高度為40dip的View中垂直居中,那centerY就是20dip;
2. FontMetrics.bottom

FontMetrics.top是怎麼拿到的?在繪製文字之前肯定先要給這段文字設定字型或大小這樣的程式碼,比如:

mPaint.setTextSize();
在呼叫這段程式碼之後就可以拿到FontMetrics,通過:

Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();

然後就可以通過上面的公式,計算drawText()函式中傳入的Y值了。

----------------------------------------------------------------------------------------- 華麗麗的分割線 --------------------------------------------------------------------------------------------------------

這裡面有個坑,就是drawText()方法裡傳入的x, y座標不是文字中心點的座標,而是基線的座標!為什麼是基線的座標,是為了適配不同的文字,使不同文字放在一起時看起來更美觀協調,可以用下圖很直觀的解釋這種方式:

如何理解基線,可以參考下面這幅圖:

像圖上這樣安卓的文字繪製是相對於基線繪製的,也就是圖中的紅線,而top+bottom的長度就等於字型高度.即等於|top|+|bottom|絕對值

實際繪製的時候取決於基線上一個點來繪製文字,而這個點有三種分別對應為left,center,right如下圖:

而drawText()方法中x,y座標所指的點就是上圖基線上三個點中的一個,具體是哪一個根據paint的setTextAlign()方法設定,預設為left

示例程式碼如下

        Rect rect = new Rect(100,100,500,500);//畫一個矩形
        Paint rectPaint = new Paint();
        rectPaint.setColor(Color.BLUE);
        rectPaint.setStyle(Paint.Style.FILL);
        canvas.drawRect(rect, rectPaint);
 
        Paint textPaint = new Paint();
        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(50);
        textPaint.setStyle(Paint.Style.FILL);
        //該方法即為設定基線上那個點究竟是left,center,還是right  這裡我設定為center
        textPaint.setTextAlign(Paint.Align.CENTER);
 
        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float top = fontMetrics.top;//為基線到字型上邊框的距離,即上圖中的top
        float bottom = fontMetrics.bottom;//為基線到字型下邊框的距離,即上圖中的bottom
 
        int baseLineY = (int) (rect.centerY() - top/2 - bottom/2);//基線中間點的y軸計算公式
 
        canvas.drawText("你好世界",rect.centerX(),baseLineY,textPaint);    

這裡有點要注意textPaint.getFontMetrics()這個方法一定要在設定字型大小或者樣式等等一系列會影響字型的方法後在呼叫,不然獲取到的top和bottom值不準.

效果如下:

正好是在中間的,即證明等式是沒有問題的,再來分析這個等式是如何計算的

之所以drawText()方法中x,y指的是基線中間的那個點,是因為setTextAlign(Paint.Align.Center)

那麼要想在正中間顯示文字,x只要為矩形的中點x座標即可 x = rect.centerX()

要計算的就是基線中間圖上紅色點的y座標了,看圖可以發現紅色點的y為矩形中點黑色點的y座標+圖中黑色點和紅色點之間的距離

矩形y座標為 rect.centerY()

黑色點和紅色點之間的距離為相對於基線的(top+bottom)/2 - bottom

而 top是相對於基線的所以為負數,所以公式為 (-top+bottom)/2 - bottom簡化下為-top/2 - bottom/2

所以最後計算為rect.centerY - top/2 - bottom/2 -bottom

計算方式就是用:文字的總高度的一半減去基線到bottom線的距離,算出基線到中點之間的距離,然後再用中間的Y座標加上這個距離,就是文字的基線位置。

參考連結:

1.android canvas drawText()文字居中

2.自定義控制元件之繪圖篇( 五):drawText()詳解

3.迷之 paint.getTextBounds()