自定義View是繪制文本有三類方法
// 第一類
public void drawText (String text, float x, float y, Paint paint)
public void drawText (String text, int start, int end, float x, float y, Paint paint)
public void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
public void drawText (char[] text, int index, int count, float x, float y, Paint paint)
// 第二類
public void drawPosText (String text, float[] pos, Paint paint)
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)
// 第三類
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)
其中drawText()最常用流纹,drawPosText ()是根據(jù)一個個坐標(biāo)點(diǎn)指定文字位置,drawTextOnPath ()是根據(jù)路徑繪制。但drawText()的x,y參數(shù)是干嘛的呢秧廉?
先來測試下
Paint paint=new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(12);
paint.setTextSize(100);
String text="測試:my text";
canvas.drawText(text, 200, 400, paint);
//畫兩條線標(biāo)記位置
paint.setStrokeWidth(4);
paint.setColor(Color.RED);
canvas.drawLine(0, 400, 2000, 400, paint);
paint.setColor(Color.BLUE);
canvas.drawLine(200, 0, 200, 2000, paint);
可以看到柜砾,x,y并不是指定文字的中點(diǎn)位置稳其,并且x,y與文字對齊方式有關(guān)(通過setTextAlign()指定,默認(rèn)為left)
(為了使文字完整耕驰,上面調(diào)整了下x,y的值)
從上面三種情況得出結(jié)論爷辱,x所對應(yīng)的豎線:
- 左對齊 — 文字的左邊界
- 居中對齊 — 文字的中心位置
- 右對齊 — 文字的左邊界
y對應(yīng)的橫線并不是文字的下邊界,而是基準(zhǔn)線Baseline
看下面這張圖
紅色的Baseline是基準(zhǔn)線,紫色的Top是文字的最頂部饭弓,也就是在drawText()中指定的x所對應(yīng)双饥,橙色的Bottom是文字的底部。
拿這些值如何獲取呢示启?
Paint.FontMetrics fontMetrics=paint.getFontMetrics();
fontMetrics.top
fontMetrics.ascent
fontMetrics.descent
fontMetrics.bottom
記得要在設(shè)置完P(guān)aint的文字大小兢哭,寬度之類屬性后再獲取FontMetrics,
baseline對應(yīng)對應(yīng)值為0夫嗓,在它下面的descent和bottom值為正迟螺,top和ascent為負(fù)。那文字的高度為bottom - top
所以舍咖,實(shí)際繪制的時候取決于基線上一個點(diǎn)來繪制文字,而這個點(diǎn)有三種分別對應(yīng)為left,center,right
好啦矩父,把drawText()中x,y參數(shù)講清楚后實(shí)現(xiàn)文字居中就很容易了
直接上代碼
//矩形背景
Paint bgRect=new Paint();
bgRect.setStyle(Paint.Style.FILL);
bgRect.setColor(Color.YELLOW);
RectF rectF=new RectF(200, 200, 800, 600);
canvas.drawRect(rectF, bgRect);
Paint textPaint=new Paint();
textPaint.setStyle(Paint.Style.FILL);
textPaint.setStrokeWidth(8);
textPaint.setTextSize(50);
textPaint.setTextAlign(Paint.Align.CENTER);
String text="測試:my text";
//計(jì)算baseline
Paint.FontMetrics fontMetrics=textPaint.getFontMetrics();
float distance=(fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;
float baseline=rectF.centerY()+distance;
canvas.drawText(text, rectF.centerX(), baseline, textPaint);
效果
將對齊方式設(shè)置為center,那要讓文字居中顯示排霉,x值就為矩形中心x值窍株,y值也就是baseline的計(jì)算看下圖
y = 矩形中心y值 + 矩形中心與基線的距離
距離 = 文字高度的一半 - 基線到文字底部的距離(也就是bottom)
= (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom