欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android文字基线Baseline算法的使用讲解

程序员文章站 2024-02-04 12:59:52
引言 baseline是文字绘制时所参照的基准线,只有先确定了baseline的位置,我们才能准确的将文字绘制在我们想要的位置上。baseline的概念在我们使用text...

引言

baseline是文字绘制时所参照的基准线,只有先确定了baseline的位置,我们才能准确的将文字绘制在我们想要的位置上。baseline的概念在我们使用textview等系统控件直接设置文字内容时是用不到的,但是如果我们想要在canvas画布上面绘制文字时,baseline的概念就必不可少了。

我们先了解一下android中canvas画布绘制文字的方法,如下图:

Android文字基线Baseline算法的使用讲解

参数示意:

  • text,文字内容
  • x,文字从画布上开始绘制的x坐标(canvas是一个原点在左上角的平面坐标系)
  • y,baseline所在的y坐标,不少人已开始以为y是绘制文字区域的底部坐标,其实是不正确的,这是两个概念
  • paint,画笔,设置的文字的大小颜色等属性
  • 了解了文字绘制的方法,我们现在就了解一下这个参数y(baseline)的计算方法。

baseline的概念

我们先看一行文字各区域的分布示意图

Android文字基线Baseline算法的使用讲解

从上图来看,baseline不难理解,它就是e和h的下边界线。我们还可以得出一个结论,文字的高度=descent+ascent

然而,上面这个公式并不完全准确,我们再看一个图:

Android文字基线Baseline算法的使用讲解

我们看到,如果文字的上方有一些特殊的符号,比如上图中的~或者是我们汉语拼音中的声调时,文字区域又会多出一部分leading。

因此,完整的公式应该是

文字的高度=descent+ascent+leading。

那么,为什么第一幅图中没有说明leading的存在呢,原因是我们通常在绘制一行英文或者中文时,leading的高度为0。我们看一个证据图,下图是在绘制英文文字时调试取得的数据。

Android文字基线Baseline算法的使用讲解

其中leading=0,所以我们在文字绘制时不需要考虑leading,图中的数值都是距离baseline的距离,在baseline上方为负值,下方为正值。

baseline位置(y轴坐标)的计算

为了方便我们对计算过程进行理解,我画了一幅帮助图,如下:

Android文字基线Baseline算法的使用讲解

假设我们是在画布canvas的顶部绘制一行文字,规定一行文字的高度是y,文字区域的高度是height(top和bottom之间,top到0和bottom到y的距离相等,这样文字才看起来是居中)。因此,0到y和top到bottom的中线是重合的,y轴坐标都是y/2。

我们要绘制一行文字时,设计必然会告诉我们0到y的距离,所以中线的位置也是固定的y/2,那么我们设置了paint的文字大小后,ascent和descent又能直接得到,就可以算出中线到基线的距离,公式如下:

基线到中线的距离=(descent+ascent)/2-descent

注意,实际获取到的ascent是负数。公式推导过程如下:

中线到bottom的距离是(descent+ascent)/2,这个距离又等于descent+中线到基线的距离,即(descent+ascent)/2=基线到中线的距离+descent。

有了基线到中线的距离,我们只要知道任何一行文字中线的位置,就可以马上得到基线的位置,从而得到canvas的drawtext方法中参数y的值。

android获取中线到基线距离的代码,paint需要设置文字大小textsize。

  /**
   * 计算绘制文字时的基线到中轴线的距离
   * 
   * @param p
   * @param centery
   * @return 基线和centery的距离
   */
  public static float getbaseline(paint p) {
    fontmetrics fontmetrics = p.getfontmetrics();
    return (fontmetrics.descent - fontmetrics.ascent) / 2 -fontmetrics.descent;
  }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接