Android Canvas的drawText()和文字居中方案

自定義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ù)一個個坐標點指定文字位置
  • drawTextOnPath():是根據(jù)路徑繪制。

其中drawText()的x,y參數(shù)是干嘛的呢?

先來看下下面這段代碼的運行效果:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    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);

    //畫兩條線標記位置
    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);
}
左對齊 - Left

可以看到,x,y并不是指定文字的中點位置,并且x,y與文字對齊方式有關(guān)(通過setTextAlign()指定,默認為left)

居中對齊 - Center
右對齊 - Rright

注:為了使文字完整,上面調(diào)整了下x,y的值。

從上面三種情況得出結(jié)論,x所對應的豎線:

  • 左對齊 — 文字的左邊界
  • 居中對齊 — 文字的中心位置
  • 右對齊 — 文字的左邊界

y對應的橫線并不是文字的下邊界,而是基準線Baseline

Paint.FontMetrics
  • Top:文字的最頂部
  • Baseline:基準線
  • Bottom:文字的底部

那這些值如何獲取呢?

    Paint.FontMetrics fontMetrics=paint.getFontMetrics();
    fontMetrics.top
    fontMetrics.ascent
    fontMetrics.descent
    fontMetrics.bottom

記得要在設(shè)置完P(guān)aint的文字大小,寬度之類屬性后再獲取FontMetrics,Baseline對應對應值為0,在它下面的descent和bottom值為正,top和ascent為負。

那文字的高度為: bottom - top

文字高度

所以,實際繪制的時候取決于基線上一個點來繪制文字,而這個點有三種分別對應為left,center,right。

BaseLine TextAlign

好啦,把drawText()中x,y參數(shù)講清楚后實現(xiàn)文字居中就很容易了。

直接上代碼:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //矩形背景
    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";
    //計算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的計算看下圖:

y = 矩形中心y值 + 矩形中心與基線的距離

距離 = 文字高度的一半 - 基線到文字底部的距離(也就是bottom)
     = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容