android canvas drawText()文字置中

標籤：計算公式   base   metrics   紅色   log   等於   技術分享   font   樣式   

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

這裡也跟大家分享下我關於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. 

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

android canvas drawText()文字置中