Android绘制文本基本概念之- top, bottom, ascent, descent, baseline

通过一个图来了解一下这些概念:

这里写图片描述

这个图是从网上download下来的。
baseline是基线,在Android中绘制文本都是从baseline处开始的,从baseline往上至至文本最高处的距离称之为ascent(上坡度),baseline至文本最低处的距离称之为descent(下坡度)。
top和bottom是绘制文本时在最外层留出的一些内边距。
baseline是基线,baseline以上是负值,baseline以下是正值,因此ascent和top都是负值,descent和bottom都是正值。

文本的实际高度应该就是descent-asscent,但是一般都是以top-bottom作为文本的高度。
ascent,descent,top,bottom都是文本内容的属性,也即字内容的属性,这些属性都是FontMetrics这个类中的属性,FontMetrics对象可以通过Paint画笔对象mPaint.getFontMetrics()方法来获取,但是要是在paint.setTextSize(mTextSize)之后获取。
获取到Paint的FontMetrics对象之后,就可以获取到ascent,descent,top,bottom这些属性值了。

Android中绘制文本:
drawText(String text, float x, float y,Paint paint)
这里的x参数是绘制的文本的最左边的横坐标,y是baseline的纵坐标,注意这里的y不是绘制文本的纵坐标,而是baseline的纵坐标。

我们经常地一个需求就是在View的中心处绘制文本,那么以前看到网上看到最多的在View的中心处绘制文本的公式:
x=控件的宽度/2-文本的宽度/2
y=控件的高度/2+文本的高度/2
都是把y当作是绘制文本的纵坐标,其实这是不正确的,这种公式绘制出的文本并不是居中的。因为y参数并不是绘制文本的纵坐标,而是baseline的纵坐标。
那么这里根据上面的ascent,descent,top,bottom概念的学习,给出在View中心处绘制文的x,y值的计算公式:
x=getWidth()/2-mPaint.measureText(mText)/2;
y=getHeight()/2+(fontMetrics.bottom-fontMetrics.top)/2-fontMetrics.bottom

getWidth(): 控件的宽度(view的宽度)
getHeight():控件的高度(view的高度)
mPaint.measureText(mText)是精确的测出绘制文本的宽度
fontMetrics.bottom-fontMetrics.top就是绘制文本的高度。
y计算出来就是baseline的纵坐标

可以通过自定义 View 来实现带文字的圆的绘制。下面给出一个简单的示例代码: ```java public class CircleTextView extends View { private Paint mPaint; private String mText; public CircleTextView(Context context) { this(context, null); } public CircleTextView(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setTextSize(30); mPaint.setColor(Color.BLACK); } public void setText(String text) { mText = text; invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getWidth(); int height = getHeight(); int radius = Math.min(width, height) / 2; canvas.drawCircle(width / 2, height / 2, radius, mPaint); if (mText != null) { float textWidth = mPaint.measureText(mText); float textHeight = mPaint.descent() - mPaint.ascent(); canvas.drawText(mText, width / 2 - textWidth / 2, height / 2 - textHeight / 2, mPaint); } } } ``` 在这个示例中,我们自定义了一个 CircleTextView,并且提供了 setText 方法来设置显示的文本。在 onDraw 方法中,我们首先计算出圆的半径,然后使用 drawCircle 绘制圆。最后,如果有文本需要显示,我们使用 drawText 绘制文本,注意要根据文本的宽度和高度来计算绘制的位置。最终效果如下所示: ![CircleTextView](https://img-blog.csdn.net/2018102817080675?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhbGJhZG1pbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/75)
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值