Android Canvas绘制文字横纵向对齐


Posted in Java/Android onJune 05, 2022

1. 横向对齐(Align属性)

Align属性决定了使用该画笔时,相较于绘制点的水平对称方式,分别是LEFT、CENTER、RIGHT,对应的情况:

Android Canvas绘制文字横纵向对齐

如最上方的文字及其框线所示,文字具有三个备选的初始绘制基点,Align属性将会指定这三个绿色的哪一个基点最终和绘制目标基点进行重合对齐。

红色的点就是我们在drawText()中填入的xy坐标参数,我们暂且将其称为目标基点(x,y)被确定之后,文字绘制的基线baseline就可以确定了。而Align属性,正是决定了使用文字的左、中、右,具体哪一个点作为参照点和绘制的基点进行重合,例如我们设置align = Align.LEFT,那么就是文字的左边一个初始基点与目标基点(x,y)进行对齐,绘制的结果就是所有文字都在基点的右边

注意:以上的图片只是理想情况,实际绘制时,如果不作处理,那么你会发现在LEFT、RIGHT模式中,框线和目标基点(x,y)之间还有一小段距离。

Android Canvas绘制文字横纵向对齐

2. TextBound

该属性本质上是一个矩形(Rect),如果我们将该矩形绘制在屏幕上,那么它的位置非常奇怪,它会出现在左上角的位置上,如下图左上角黑色框线:

Android Canvas绘制文字横纵向对齐

实际上,我们不应该不经过处理直接将这个矩形绘制出来,因为它所对应的实际的量仅仅代表的是我们当前绘制字符的Bound,即边界,我们利用bound.right - bound.left就可以得到使用当前Paint绘制当前字符最终得到的宽度,同理可以得到绘制字符的高度。而它实际的数值标识的意义应该是在Align.LEFT模式下,左右、上下框线距离绘制基点的偏移量。例如如下视图,对应的数据分别是:

Android Canvas绘制文字横纵向对齐

Android Canvas绘制文字横纵向对齐

如果我们使用如下代码将Text绘制在Canvas的中心,同时将Bounds也按照一定的偏移绘制出来,让它紧紧地贴着文字:

// 绘制内部文字,centerPoint是一个数组,存储了视图中心点的坐标
canvas?.drawText(mText, centerPoint[0], centerPoint[1], mTextPaint.apply {
    textAlign = Paint.Align.LEFT
})

// 绘制框线
canvas?.drawRect(
  centerPoint[0] + mTextBound.left,
  mTextBound.top.toFloat() + centerPoint[1],
  mTextBound.right.toFloat() - mTextBound.left.toFloat() + centerPoint[0],
  mTextBound.bottom.toFloat() + centerPoint[1],
  mTextBoardPaint.apply {
    strokeWidth = 8f
  }
)

Android Canvas绘制文字横纵向对齐

其中黑色的点是整个视图的中心,细心的小伙伴可能发现了,黑点并不是文字的最左下方,而是偏靠上了一点点,我们把这条线延展出来,那么就可以得到该文字的绘制基线:Baseline

Android Canvas绘制文字横纵向对齐

为什么要设置这样一个Baseline呢?

其实不难发现,基线以上,几乎包括了95%的文字内容,而基线以下,只有p、q、Q的尾部。主要部分完全都被包含在了基线之上。基线其实是西文字体设计与排版的概念,源自西文字母的主体底部对齐的位置,如果直接按照bounds的底部进行绘制文字,显然这些p、q、Q的尾部是无法处理的。但是如果只有字符「abcd」的情况下,你会发现文字的边框完全贴着a的底部,因为在这种特殊的情况下,基线和bound的底部完全重合了。

Android Canvas绘制文字横纵向对齐

但基线对于中文来说并没有多大的意义,但是它却一定程度上影响到了我们绘制时所期望的定位方式,我们肯定是希望文字一定是严格按照文字的左下角、中心下角、右下角来绘制的,我们不希望文字底部和这个基线之间还有一小段距离。这个问题在一些需要做到竖直居中的场景中尤为尖锐,譬如我们希望在圆形中嵌入一个字符,标识某种信息,如果我们直接在视图中心drawText,绘制出的文字却不在视图的中心:

Android Canvas绘制文字横纵向对齐

原因很简单,文字的纵向中心和图像的纵向中心并不重合。

3. 纵向对齐与绘制线

  • leading : 上一行文字的descent到当前行文字的ascent称为行距
  • Top最高字符Baseline的值,以Baseline为基准,向下为正(通常Top为负值)
  • Asecnt:Baseline之上至字符最高处的距离,以Baseline为基准,向下为正(通常为负值)
  • Baseline:文字绘制的基准,该属性并不在fontMetrics中显示地给出,通常设置Paint的Align的时候,我们所设置的点的水平延长线就是基线
  • Descent :Baseline之下至字符最低处的距离,以Baseline为基准,向下为正(通常为正值)
  • Bottom最下字符Baseline的值,以Baseline为基准,通常为正值

Android Canvas绘制文字横纵向对齐

在Android中,我们可以使用:Paint.getFontMetrics()获取以上的绝大部分数值(除了Baseline)。

其中,Descent和Ascent中容纳了整个文字的内容,除去p、q的尾部,其余的主要内容则位于基线和Ascent之间,在一些特殊的文字系统中,可能含有「Ö」这一类的字符:

Android Canvas绘制文字横纵向对齐

这样就会将文字的bound撑开到Ascent的位置,此时的bound中线和Ascent/Descent几乎完全重合了,对于上面提到的居中的问题,我们也不难得到一个解决方案,将文字绘制的起点向下偏移一小段距离即可完成居中,而这偏移的一小段距离应该是文字bound居中线y坐标和绘制起点y坐标之间的差值,如下图X标注:

Android Canvas绘制文字横纵向对齐

代码如下:

 canvas?.drawText(mText, centerPoint[0], centerPoint[1] + mTextBound.bottom, mTextPaint.apply {
    textAlign = Paint.Align.CENTER
  })

只需要将绘制基点向下移动:基线到文字底部的距离,即bound.bottom即可:

Android Canvas绘制文字横纵向对齐

4. 总结

绘制线(Metrics)是由Paint和字体共同决定的,当一个Paint和字体确定了,那么上述的绘制线就已经确定了,并不会因为文字内容的变化而被修改;而textBound则是文字绘制的边界,我们使用Paint.getTextBounds()可以去测量特定内容的边界值,其值根据文本的内容的不同而有所不同。在绘制内容中,如果含有当前字符集中的最“高”的字符时,bound的bottom、top与绘制线的Ascent、Descent之间分别会重合。

因此,Ascent和Descent之间是当前字符集中最高文字的顶和底,它不一定出现在你的内容当中;而bounds的top和bottom对应的中心,则是你实际绘制的内容的纵向中心。

到此这篇关于Android Canvas绘制文字横纵向对齐的文章就介绍到这了,更多相关Android Canvas绘制 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Java/Android 相关文章推荐
Java方法重载和方法重写的区别到底在哪?
Jun 11 Java/Android
Java实现斗地主之洗牌发牌
Jun 14 Java/Android
Feign调用传输文件异常的解决
Jun 24 Java/Android
Java常用工具类汇总 附示例代码
Jun 26 Java/Android
Java 语言中Object 类和System 类详解
Jul 07 Java/Android
SpringBoot+VUE实现数据表格的实战
Aug 02 Java/Android
关于maven依赖 ${xxx.version}报错问题
Jan 18 Java/Android
Java字符串逆序方法详情
Mar 21 Java/Android
Spring Data JPA框架Repository自定义实现
Apr 28 Java/Android
Java版 单机五子棋
May 04 Java/Android
springboot读取nacos配置文件
May 20 Java/Android
Spring Boot优化后启动速度快到飞起技巧示例
Jul 23 Java/Android
Android 中的类文件和类加载器详情
Android中的Launch Mode详情
Spring中的@Transactional的工作原理
Jun 05 #Java/Android
Qt数据库应用之实现图片转pdf
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
Jun 01 #Java/Android
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
Jun 01 #Java/Android
Java中生成微信小程序太阳码的实现方案
Jun 01 #Java/Android
You might like
实用函数2
2007/11/08 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python字符编码与函数的基本使用方法
2017/09/30 Python
详解python中asyncio模块
2018/03/03 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
Python 3.8 新功能全解
2019/07/25 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
课改先进个人汇报材料
2014/01/26 职场文书
土木工程专业推荐信
2014/02/19 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2016年教师节感言
2015/12/09 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
护士业务学习心得体会
2016/01/25 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python