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用自带的Image IO给图片添加水印
Jun 15 Java/Android
详解Java线程池是如何重复利用空闲线程的
Jun 26 Java/Android
死磕 java同步系列之synchronized解析
Jun 28 Java/Android
Java日常练习题,每天进步一点点(38)
Jul 26 Java/Android
Netty分布式客户端接入流程初始化源码分析
Mar 25 Java/Android
Java实现经典游戏泡泡堂的示例代码
Apr 04 Java/Android
Java虚拟机内存结构及编码实战分享
Apr 07 Java/Android
Android开发之WECHAT微信小程序路由跳转的两种形式
Apr 12 Java/Android
Spring Boot配合PageHelper优化大表查询数据分页
Apr 20 Java/Android
JAVA 线程池(池化技术)的实现原理
Apr 28 Java/Android
Java死锁的排查
May 11 Java/Android
Springboot集成kafka高级应用实战分享
Aug 14 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
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python多继承原理与用法示例
2018/08/23 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
写给女朋友的检讨书
2014/01/28 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年党员整改措施
2014/10/24 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
Python制作春联的示例代码
2022/01/22 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers