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 22 Java/Android
ObjectMapper 如何忽略字段大小写
Jun 29 Java/Android
SpringMVC 整合SSM框架详解
Aug 30 Java/Android
Java使用JMeter进行高并发测试
Nov 23 Java/Android
Java异常处理try catch的基本用法
Dec 06 Java/Android
SpringBoot整合阿里云视频点播的过程详解
Dec 06 Java/Android
你知道Java Spring的两种事务吗
Mar 16 Java/Android
Java 超详细讲解数据结构中的堆的应用
Apr 02 Java/Android
Java GUI编程菜单组件实例详解
Apr 07 Java/Android
Java 超详细讲解ThreadLocal类的使用
Apr 07 Java/Android
Java中生成微信小程序太阳码的实现方案
Jun 01 Java/Android
Android中View.post和Handler.post的关系
Jun 05 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
python读写json文件的简单实现
2017/04/11 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
基于python实现学生管理系统
2018/10/17 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python 随机按键模拟2小时
2020/12/30 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
基层党组织整改方案
2014/10/25 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
纪录片信仰观后感
2015/06/08 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL