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ù)一個(gè)個(gè)坐標(biāo)點(diǎn)指定文字位置,drawTextOnPath ()是根據(jù)路徑繪制。但drawText()的x,y參數(shù)是干嘛的呢?
先來測(cè)試下
Paint paint=new Paint(); paint.setStyle(Paint.Style.FILL); paint.setStrokeWidth(12); paint.setTextSize(100); String text="測(cè)試: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);
左對(duì)齊-left
可以看到,x,y并不是指定文字的中點(diǎn)位置,并且x,y與文字對(duì)齊方式有關(guān)(通過setTextAlign()指定,默認(rèn)為left)
居中對(duì)齊-center
右對(duì)齊-right
(為了使文字完整,上面調(diào)整了下x,y的值)
從上面三種情況得出結(jié)論,x所對(duì)應(yīng)的豎線:
- 左對(duì)齊 — 文字的左邊界
- 居中對(duì)齊 — 文字的中心位置
- 右對(duì)齊 — 文字的左邊界
y對(duì)應(yīng)的橫線并不是文字的下邊界,而是基準(zhǔn)線Baseline
看下面這張圖
紅色的Baseline是基準(zhǔn)線,紫色的Top是文字的最頂部,也就是在drawText()中指定的x所對(duì)應(yīng),橙色的Bottom是文字的底部。
拿這些值如何獲取呢?
Paint.FontMetrics fontMetrics=paint.getFontMetrics(); fontMetrics.top fontMetrics.ascent fontMetrics.descent fontMetrics.bottom
記得要在設(shè)置完P(guān)aint的文字大小,寬度之類屬性后再獲取FontMetrics,
baseline對(duì)應(yīng)對(duì)應(yīng)值為0,在它下面的descent和bottom值為正,top和ascent為負(fù)。那文字的高度為bottom - top
所以,實(shí)際繪制的時(shí)候取決于基線上一個(gè)點(diǎn)來繪制文字,而這個(gè)點(diǎn)有三種分別對(duì)應(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="測(cè)試: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);
效果
將對(duì)齊方式設(shè)置為center,那要讓文字居中顯示,x值就為矩形中心x值,y值也就是baseline的計(jì)算看下圖
y = 矩形中心y值 + 矩形中心與基線的距離
距離 = 文字高度的一半 - 基線到文字底部的距離(也就是bottom) = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
React Native 實(shí)現(xiàn)熱更新并自動(dòng)簽名打包功能
這篇文章主要介紹了React Native 實(shí)現(xiàn)熱更新并自動(dòng)簽名打包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Android通過JNI實(shí)現(xiàn)守護(hù)進(jìn)程
這篇文章主要為大家詳細(xì)介紹了Android通過JNI實(shí)現(xiàn)守護(hù)進(jìn)程的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-09-09Android 性能優(yōu)化系列之bitmap圖片優(yōu)化
在日常開發(fā)的APP,大部分時(shí)候需要想用戶展示圖片信息,圖片最終對(duì)應(yīng)Android中的Bitmap對(duì)象。而對(duì)于APP端來說Bitmap又是一個(gè)比較麻煩的問題,主要表現(xiàn)在Bitmap是非常占用內(nèi)存的對(duì)象,處理不當(dāng)將導(dǎo)致APP運(yùn)行卡頓甚至出現(xiàn)OOM2021-11-11android view實(shí)現(xiàn)橫向滑動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了android view實(shí)現(xiàn)橫向滑動(dòng)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-072014值得推薦的10個(gè)移動(dòng) Web 應(yīng)用程序開發(fā)框架
今天這篇文章向大家推薦10大優(yōu)秀的移動(dòng) Web 開發(fā)框架,幫助開發(fā)者更加高效的開發(fā)移動(dòng)Web應(yīng)用。2014-08-08淺析Android企業(yè)級(jí)開發(fā)數(shù)據(jù)綁定技術(shù)
這篇文章通過代碼實(shí)例分析了Android企業(yè)級(jí)開發(fā)數(shù)據(jù)綁定技術(shù)的應(yīng)用以及相關(guān)的原理知識(shí),跟著小編一起學(xué)習(xí)參考下吧。2017-12-12Android Studio 多層級(jí) Module 對(duì) aar 引用問題解決方法
這篇文章主要介紹了Android Studio 多層級(jí) Module 對(duì) aar 引用問題的解決方法,需要的朋友參考下2017-12-12