Android Canvas drawText文字居中的一些事（图解）

1.写在前面

在实现自定义控件的过程中，常常会有绘制居中文字的需求，于是在网上搜了一些相关的博客，总是看的一脸懵逼，就想着自己分析一下，在此记录下来，希望对大家能够有所帮助。

2.绘制一段文本

首先把坐标原点移动到控件中心（默认坐标原点在屏幕左上角），这样看起来比较直观一些，然后绘制x、y轴，此时原点向上y为负，向下y为正，向左x为负，向右x为正，以（0,0）坐标开始绘制一段文本：

@override
public void draw(canvas canvas) {
 super.draw(canvas);
 // 将坐标原点移到控件中心
 canvas.translate(getwidth() / 2, getheight() / 2);
 // x轴
 canvas.drawline(-getwidth() / 2, 0, getwidth() / 2, 0, paint);
 // y轴
 canvas.drawline(0, -getheight() / 2, 0, getheight() / 2, paint);

 // 绘制文字
 paint.settextsize(sp2px(50));
 canvas.drawtext("yangle", 0, 0, paint);
}

看下绘制的文本：

绘制文本

咦，为什么绘制的文本在第一象限，y坐标不是指定的0吗，为什么文本没有在x轴的上面或下面，而是穿过了x轴，带着这些疑问继续往下看：

首先看一个重要的类：

public static class fontmetrics {
 /**
 * the maximum distance above the baseline for the tallest glyph in
 * the font at a given text size.
 */
 public float top;
 /**
 * the recommended distance above the baseline for singled spaced text.
 */
 public float ascent;
 /**
 * the recommended distance below the baseline for singled spaced text.
 */
 public float descent;
 /**
 * the maximum distance below the baseline for the lowest glyph in
 * the font at a given text size.
 */
 public float bottom;
 /**
 * the recommended additional space to add between lines of text.
 */
 public float leading;
}

fontmetrics类是paint的一个内部类，主要定义了绘制文本时的一些关键坐标位置，看下这些值都代表什么：

关键坐标

看图说话：

• top：从基线（x轴）向上绘制区域的最高点，此值为负值
• ascent：单行文本，从基线（x轴）向上绘制的推荐最高点，此值为负值
• baseline：基线，此值为0
• descent：单行文本，从基线（x轴）向下绘制的推荐最低点，此值为正值
• bottom：从基线（x轴）向下绘制区域的最低点，此值为正值
• leading：推荐的额外行距，一般为0

下面再来看看drawtext这个方法：

/**
 * draw the text, with origin at (x,y), using the specified paint. the origin is interpreted
 * based on the align setting in the paint.
 *
 * @param text the text to be drawn
 * @param x the x-coordinate of the origin of the text being drawn
 * @param y the y-coordinate of the baseline of the text being drawn
 * @param paint the paint used for the text (e.g. color, size, style)
 */
public void drawtext(@nonnull string text, float x, float y, @nonnull paint paint) {
 super.drawtext(text, x, y, paint);
}

重点看下x、y参数的含义：

• x：绘制文本的起始x坐标
• y：绘制文本的baseline在y轴方向的位置

有点难理解，举个栗子，上文中的x、y参数传的是（0，0），此时的baseline正好是坐标系中x轴，就相当于从y轴开始向右绘制，以x轴作为文本的baseline进行绘制。

如果参数传（0，10），此时绘制文本的baseline从x轴开始向下移动10px，也就是以y10作为文本的baseline进行绘制，y10就是绘制文本的baseline在y轴方向的位置。

注意：baseline是绘制文本的基线，相对于绘制文本区域来说，相当于x轴，向上为负（top、ascent），向下为正（descent、bottom），但是这个x轴并不是控件的x轴，切记切记！！！

还记得我们在上文中提出的疑问吗，这下可以解释了：

为什么绘制的文本在第一象限？

因为我们把坐标原点移到了控件中心，文本的baseline正好为x轴，top、ascent值为负，所以绘制的文本在第一象限。

y坐标不是指定的0吗，为什么文本没有在x轴的上面或下面，而是穿过了x轴？

drawtext方法默认x轴方向是从左到右绘制的，y轴方向是从baseline为基准绘制的，文中的baseline正好为x轴，以baseline为基准绘制文本向下还有一段距离，所以文本穿过了x轴。

3.绘制居中的文本

在上文中，我们学习了如何绘制一段文本，以及其中参数和坐标的含义，接下来进入正题，看下如何才能绘制居中的文本。

首先看一张图，此时文本的baseline正好为x轴，如果想要文本居中显示的话，就需要先计算文本的宽度和高度：

• 宽度：调用paint的measuretext方法就可以获得文本的宽度
• 高度：文本的高度就是实际绘制区域的高度，可以用(fontmetrics.descent - fontmetrics.ascent)获取，因为ascent为负数，所以最终算出来的是两者的和

现在有了宽度，把绘制文本的x坐标向左移动（宽度 / 2）就可以水平居中，但是垂直方向就不能这么干了，我们要将文本向下移动baseline到文本中心的距离，也就是（高度 / 2 - fontmetrics.descent），如下图所示：

计算baseliney

现在的公式为：

float baseliney
= (fontmetrics.descent - fontmetrics.ascent) / 2 - fontmetrics.descent;
= -fontmetrics.ascent / 2 - fontmetrics.descent / 2;
= -(fontmetrics.ascent + fontmetrics.descent) / 2;
= math.abs(fontmetrics.ascent + fontmetrics.descent) / 2;

paint中也有获取ascent和descent值的方法，所以公式最终为：

float baseliney = math.abs(paint.ascent() + paint.descent()) / 2;

注意：此公式是相对于坐标原点在控件中心来计算的，如果坐标原点在左上角，baseliney需要加上控件高度的一半。

float baseliney = height / 2 + math.abs(paint.ascent() + paint.descent()) / 2;

看下代码：

@override
public void draw(canvas canvas) {
 super.draw(canvas);
 // 将坐标原点移到控件中心
 canvas.translate(getwidth() / 2, getheight() / 2);
 // x轴
 canvas.drawline(-getwidth() / 2, 0, getwidth() / 2, 0, paint);
 // y轴
 canvas.drawline(0, -getheight() / 2, 0, getheight() / 2, paint);

 // 绘制居中文字
 paint.settextsize(sp2px(50));
 paint.setcolor(color.gray);
 // 文字宽
 float textwidth = paint.measuretext("yangle'blog");
 // 文字baseline在y轴方向的位置
 float baseliney = math.abs(paint.ascent() + paint.descent()) / 2;
 canvas.drawtext("yangle'blog", -textwidth / 2, baseliney, paint);
}

看下居中了吗：

绘制居中文本

大功告成！

4.绘制多行居中的文本

注意：drawtext方法不支持绘制多行文本

4.1 方式一

使用支持自动换行的staticlayout：

/**
 * 绘制多行居中文本（方式1）
 *
 * @param canvas 画布
 */
private void drawcentermultitext1(canvas canvas) {
 string text = "abc";

 // 画笔
 textpaint textpaint = new textpaint();
 textpaint.setantialias(true);
 textpaint.setcolor(color.gray);

 // 设置宽度超过50dp时换行
 staticlayout staticlayout = new staticlayout(text, textpaint, dp2px(50),
  layout.alignment.align_center, 1f, 0f, false);
 canvas.save();
 // staticlayout默认从（0，0）点开始绘制
 // 如果需要调整位置，只能在绘制之前移动canvas的起始坐标
 canvas.translate(-staticlayout.getwidth() / 2, -staticlayout.getheight() / 2);
 staticlayout.draw(canvas);
 canvas.restore();
}

看下staticlayout的构造方法参数含义：

public staticlayout(charsequence source, textpaint paint, int width, alignment align, 
   float spacingmult, float spacingadd, boolean includepad) {
 this(source, 0, source.length(), paint, width, align, spacingmult, spacingadd, includepad);
}

• source：需要分行的文本
• paint：画笔对象
• width：layout的宽度，文本超出宽度时自动换行
• align：layout的对其方式
• spacingmult：相对行间距，相对字体大小，1f表示行间距为1倍的字体高度
• spacingadd：基础行距偏移值，实际行间距等于(spacingmult + spacingadd)
• includepad：参数未知

看下效果：

staticlayout

使用staticlayout，每行设置的宽度是相同的，当需求为每行显示不同长度的文本时，这种方式就不能使用了，别担心，接着来看下第二种方式。

4.2 方式二

使用循环drawtext的方式进行绘制，看图说话：

计算baseliney

现在需要绘制a、b、c三行文本，红色a代表每行文本默认的绘制位置，绿色的线代表每行文本的baseline，x轴为红色a的baseline，现在分为三种情况：

• 文本在x轴上方：红色a的baseline向上移动a距离，总高度的/2 - 文本的top值（绝对值）
• 文本在x轴中间：红色a的baseline向下移动b距离，计算公式请参考单行文本居中公式
• 文本在x轴下方：红色a的baseline向下移动c距离，总高度的/2 - 文本的bottom值（绝对值）

看下代码：

/**
 * 绘制多行居中文本（方式2）
 *
 * @param canvas 画布
 */
private void drawcentermultitext2(canvas canvas) {
 string[] texts = {"a", "b", "c"};

 paint.fontmetrics fontmetrics = paint.getfontmetrics();
 // top绝对值
 float top = math.abs(fontmetrics.top);
 // ascent绝对值
 float ascent = math.abs(fontmetrics.ascent);
 // descent，正值
 float descent = fontmetrics.descent;
 // bottom，正值
 float bottom = fontmetrics.bottom;
 // 行数
 int textlines = texts.length;
 // 文本高度
 float textheight = top + bottom;
 // 文本总高度
 float texttotalheight = textheight * textlines;
 // 基数
 float baseposition = (textlines - 1) / 2f;

 for (int i = 0; i < textlines; i++) {
  // 文本宽度
  float textwidth = paint.measuretext(texts[i]);
  // 文本baseline在y轴方向的位置
  float baseliney;

  if (i < baseposition) {
   // x轴上，值为负
   // 总高度的/2 - 已绘制的文本高度 - 文本的top值（绝对值）
   baseliney = -(texttotalheight / 2 - textheight * i - top);

  } else if (i > baseposition) {
   // x轴下，值为正
   // 总高度的/2 - 未绘制的文本高度 - 文本的bottom值（绝对值）
   baseliney = texttotalheight / 2 - textheight * (textlines - i - 1) - bottom;

  } else {
   // x轴中，值为正
   // 计算公式请参考单行文本居中公式
   baseliney = (ascent - descent) / 2;
  }

  canvas.drawtext(texts[i], -textwidth / 2, baseliney, paint);
 }
}

对照上图再看代码就很好理解了，觉得代码中的公式还有可以优化的地方，如果你有好的方法，可以留言告诉我哈。
再看下中文版的多行文本：

多行居中文本

5.textalign

paint的textalign属性决定了绘制文本相对于drawtext方法中x参数的相对位置。
举个栗子：

• paint.align.left：默认属性，x坐标为绘制文本的最左侧坐标
• paint.align.center：x坐标为绘制文本的水平中心坐标
• paint.align.right：x坐标为绘制文本的最右侧坐标

看图理解下：

paint.align.left

paint.align.center

paint.align.right

6.文本居中的公式

坐标原点在控件中心：

float baseliney = math.abs(paint.ascent() + paint.descent()) / 2;

坐标原点在控件左上角：

float baseliney = height / 2 + math.abs(paint.ascent() + paint.descent()) / 2;

7.写在最后

源码已经上传到github上了，欢迎fork，觉得还不错就start一下吧！

github传送门

点我下载本文demo的apk

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。