美文网首页Android 自定义view
canvas 绘制文字居中如何计算

canvas 绘制文字居中如何计算

作者: 前行的乌龟 | 来源:发表于2017-04-07 14:35 被阅读99次

计算这个坐标点可是让我忙活了一阵了,本以为算出文字高度,取个高度/2就可以,结果完全就不是那么回事啊!!!

android 中文字的绘制和图形绘制区别最大的一点不同是,图形绘制是以左上角的坐标为基准的,文字的绘制则是基于 baseLine基线的,没办法这都是老外发明的,咱就得接受啊,我到一张图看看就明白了

上面所有的属性都被封装在FontMetrics类中,通过它可以获取并计算文本的宽高,大体翻译一下,可能不准确;
top:在一个大小确定的字体中,被当做最高字形,基线(base)上方的最大距离。
ascent:单行文本中,在基线(base)上方被推荐的距离。
descent:单行文本中,在基线(base)下方被推荐的距离。
bottom:在一个大小确定的字体中,被当做最低字形,基线(base)下方的最大距离。

看图算一下,我们需要算的其实就是基线到文字中心点的距离,这就是偏移量了



红线是baseline,最上面的灰线是FontMetrics.top,最下面的绿线是FontMetrics.bottom。(绿色的bottom和蓝色的descent非常接近)

从图中可知,字符本身是在灰线和绿线之间居中的,知道这个就好办了。网上说的使用paint.getTextBounds的方法都不靠谱,可以看到对一个“测”字和6个字得到的bounds是不同的,图中的矩形能很好地表示这个函数得到的是字符的边界,而不是字体的边界。

FontMetrics.top的数值是个负数,其绝对值就是字体绘制边界到baseline的距离。
所以如果是把文字画在 FontMetrics高度的矩形中, drawText就应该传入 -FontMetrics.top。
要画在targetRect的居中位置,baseline的计算公式就是:
targetRect.centerY() - (FontMetrics.bottom - FontMetrics.top) / 2 - FontMetrics.top
优化后即:

(targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2

上面一段是我抄来的,看了好多文章,终于这个给我讲明白了
注意获取到的 top 是负数,我们计算时的-top 取正直才有意义,top 实际等于文字顶部到基线的距离,基线到文字中心点距离 = (-top)- (-top + buttom)/2
2个数值段,前一个是文字顶部到基线的距离,后一个文字高度的一半,这样一减就剩下文字中心到基线的距离了
换算一下,基线的偏移量 = -top/2 - buttom/2

Snip20170407_3.png Snip20170407_4.png

来源:
Android Canvas drawText实现中文垂直居中

相关文章

网友评论

    本文标题:canvas 绘制文字居中如何计算

    本文链接:https://www.haomeiwen.com/subject/zxchattx.html