Android：Canvas中drawText的尺寸计算

最新推荐文章于 2023-03-17 15:37:10 发布

weixin_30680385

最新推荐文章于 2023-03-17 15:37:10 发布

阅读量803

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/makebetter/p/5224319.html

本文详细介绍如何在Android中利用Paint和FontMetricsInt精确控制文本的显示位置，实现文本的水平和垂直居中效果，并解释了FontMetricsInt各参数的意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要思路：根据FontMetrica计算Text的高度，根据Rect计算Text的宽度。两者与字体，字号有关系

参考文章：

http://blog.youkuaiyun.com/hursing/article/details/18703599

http://blog.youkuaiyun.com/sirnuo/article/details/21165665

1. 计算高度不应该用Rect的原因：FontMetrica与Text内容无关；Rect与Text的内容相关，用Rect计算的话会麻烦一点。paint.getTextBounds() paint.getFontMetricsInt()

2. 要正确理解FontMetrica的top，ascent，descent，bottom的含义。以上四个参数都是相对于baseLine而言的

3. 如上图：Text在Y轴的范围在：［baseLine+top，baseLine+bottom］

4. drawText(text, baseX, baseY, paint) 中对baseX，baseY的理解：baseY即为baseLine，baseX则取决于paint.setTextAlign(Align.LEFT)参数的设置。

5. 使用场景：Text水平，垂直都居中

package cc.makeblock.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.Rect;
import android.graphics.Paint.Align;
import android.view.View;

public class TestTextBounds extends View {
	private static final String TAG = "TestTextBounds";
	public TestTextBounds(Context context) {
		super(context);
		setBackgroundColor(Color.GRAY);
	}

	@Override
	public void onDraw(Canvas canvas){
		super.onDraw(canvas);
		Paint mbPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//防止锯齿
		//mbPaint.setTypeface(diodeFont);
		mbPaint.setTextSize(120); //todo:text自适应view的宽高
		mbPaint.setTextAlign(Align.LEFT);  //从右边开始draw
		String textString = "abcdefghijk";
		int textWidth = 0;
		int textHeight = 0;
		
		// 1.用FontMetrics对象计算高度
		FontMetricsInt fontMetrics = mbPaint.getFontMetricsInt(); 
		textHeight = fontMetrics.bottom-fontMetrics.top;//详细:(baseY＋bottom)-(baseY-top);

		//2.用bounds计算宽度
		Rect bounds = new Rect();  
		mbPaint.getTextBounds(textString, 0, textString.length(), bounds); 
		textWidth = bounds.right-bounds.left;

		//3.计算baseX，baseY
		int baseX = (this.getWidth()-textWidth)/2; //LEFT情况下的baseX
		//先计算top:top=baseY+fontMetrics.top
		int top = (this.getHeight()-textHeight)/2;
		int baseY = top-fontMetrics.top;

		//4.绘制白色背景
		mbPaint.setColor(Color.WHITE);
		//(int left, int top, int right, int bottom)
		Rect rect = new Rect(baseX, top, baseX+textWidth, top+textHeight);
		canvas.drawRect(rect, mbPaint);

		//5.绘制黑色text
		mbPaint.setColor(Color.BLACK);
		//奇葩的参数设置：
		//取决于mbPaint.setTextAlign(Align)的参数，默认是LEFT。
		//RIGHT：从右向左绘制
		canvas.drawText(textString, baseX, baseY, mbPaint);
		
		//6.划线
		int startX = baseX;
		int stopX = baseX+textWidth;
		
		mbPaint.setStrokeWidth(3);
		mbPaint.setColor(Color.RED);
		canvas.drawLine(startX, baseY+fontMetrics.top, stopX, baseY+fontMetrics.top, mbPaint);
		
		mbPaint.setColor(Color.BLUE);
		canvas.drawLine(startX, baseY+fontMetrics.ascent, stopX, baseY+fontMetrics.ascent, mbPaint);
		
		mbPaint.setColor(Color.YELLOW);
		canvas.drawLine(startX, baseY+fontMetrics.descent, stopX, baseY+fontMetrics.descent, mbPaint);
		
		mbPaint.setColor(Color.GREEN);
		canvas.drawLine(startX, baseY+fontMetrics.bottom, stopX, baseY+fontMetrics.bottom, mbPaint);
		
		mbPaint.setColor(Color.CYAN);
		canvas.drawLine(startX, baseY, stopX, baseY, mbPaint);
	}
}

private void setupCustomView6(){
		TestTextBounds diodeView = new TestTextBounds(context);
		RelativeLayout.LayoutParams relLayoutParams = new RelativeLayout.LayoutParams(700, 300);
		relLayoutParams.setMargins(500, 400, 0, 0);
		root_RelativeLayout.addView(diodeView,relLayoutParams);
}

转载于:https://www.cnblogs.com/makebetter/p/5224319.html