android canvas drawText()文字居中

近期也是在學習自己定義控件,曾經僅僅自己隨便玩了下,一直認為比較難,正好如今工作輕松,每天閑着就看看書看看帖子學習自己定義控件,你還別說自己定義控件學起來還是蠻有趣的!!

這里也跟大家分享下我關於drawText()文字居中的方法.

先附上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. 

到此相信大家應該明確了吧,有什么疑問不正確的地方歡迎提出.