drawText()中的文字基线

本文介绍了drawText()在绘制文字时的基线概念,指出基线并非单纯基于View高度,而是依赖文字的FontMetrics和View的中线。通过示例展示了如何计算正确的基线,并推荐了一篇详细解释drawText的文章。此外,还分享了一个自定义的环形进度条实现,包括自定义属性、绘制背景圆环、当前进度圆弧和文字的处理方法。
摘要由CSDN通过智能技术生成

1. 关于drawText

可能以前平时对绘制文字要求不高,没怎么关注过文字基线的文字,只是知道有这么个概念.上一篇文章中有一个绘制简单进度条的例子,里边就有居中绘制文字的代码。
代码是这样的:

 float baseline = getHeight() * 2 / 3;

为什么我这样算呢?
因为文字的绘制,在Y轴来说是从基线开始的,基线就是四线格中的第三条线,它的位置刚好就是四线格的2/3的位置。所以这里就用 view的高度*2/3了。
这里因为是凑巧View的高度不是太高,所以并没有看出什么问题。想象一下如果View的高度是屏幕的高度,我还用View的高度的2/3位置作为基线还行么?

答案当然是不行了,基线的位置并不是单纯的从所在View的高度上决定的,而是根据文字的FontMetrics和View的中线确定的。

2. 推荐阅读

更加详细的解释请看drawText详解,这篇文章写得很清楚,而且也有推倒过程.

下边的例子就是使用大神文章中的方法计算的baseline做的一个环形进度条,加了自定义属性,可以在xml中设置文字的大小、文字颜色,进度条背景,进度条颜色,进度条宽度等。代码中有详细的注释。

效果图:
这里写图片描述

图中的圆环进度条就是这次的代码效果

环形进度条思路:
1. 自定义属性
-在attrs文件中声明需要的属性

  1. 绘制背景圆环
    **-在onSizeChanged()方法中根据View的宽高计算中心点坐标和半径。
    -注意:这个圆环是View的内切圆,计算半径需要减去圆环的宽度**

  2. 绘制当前进度圆弧
    **-根据当前进度值绘制圆弧,
    -注意圆弧的起始角度,如果是0度,标识的是3点钟方向**

  3. 绘制文字
    -计算文字的baseline,计算方法在代码中也有,详细的推导过程,可以看下推荐的那篇文章

3.进度条代码

  1. 自定义属性
<declare-styleable name="CircleProgressView">
    <attr name="progressTextSize" format="dimension|reference"/>
    <attr name="progressTextColor" format="color|reference"/>
    <attr name="progressBackGroundColor" format="color|reference"/>
    <attr name="progressColor" format="color|reference"/>
    <attr 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值