Android绘图之drawText,getTextBounds

作者: sliencexiu | 来源:发表于2019-08-22 06:55 被阅读13次

Android绘图之drawText,getTextBounds
Android绘图之PathMeasure（16）
Android绘图之drawText绘制文本相关（4）
android drawtext 之baseline
Android绘图之Canvas变换（6）
Android drawText
Android绘图之Shader
图像合成Xfermode和任意形状ImageView
android drawText居中
Android 自定义View之绘图

Android 绘图学习

1如何测量一段文本占用的长度和宽度

Paint类提供了测量宽高的方法：
getTextBounds(String text, int start, int end, Rect bounds)
返回一个包含所有字符，默认从（0,0）开始的最小矩形的矩形框。
measureText(String text, int start, int end)：
返回text的宽度。

2问题1 drawText函数指定的坐标（x,y）在哪个位置

很多人会以为指定的坐标都是在左上角，但绘制文本时指定的坐标却不是左上角。
drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
利用Canvas.drawText绘制文本，并在（x,y）处绘制两个点

mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setTextSize(120);
mPaint.setTextAlign(Paint.Align.LEFT);

mPaint2 = new Paint();
mPaint2.setColor(Color.RED);
mPaint2.setAntiAlias(true);
mPaint2.setStrokeWidth(10);
mPaint2.setStyle(Paint.Style.FILL);

canvas.drawText(textStr,100,200,mPaint);
canvas.drawText(textStr,100,500,mPaint);
canvas.drawPoint(100,200,mPaint2);
canvas.drawPoint(100,500,mPaint2);
Rect rect1 = new Rect();

可以看到canvas调用drawText时指定的坐标点不是绘制文字是的左上角的坐标，而是左下角的坐标，从drawText的函数说明中可以知道，调用drawText时指定的坐标(x,y)其中y坐标被称为文本的baseline（基准线）。

3 问题2利用getTextBounds获取文本的宽高，measureText获取宽度

利用函数获取宽高：

mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setTextSize(120);
mPaint.setTextAlign(Paint.Align.LEFT);

mPaint2 = new Paint();
mPaint2.setColor(Color.RED);
mPaint2.setAntiAlias(true);
mPaint2.setStrokeWidth(10);
mPaint2.setStyle(Paint.Style.FILL);

canvas.drawText(textStr,100,200,mPaint);
canvas.drawText(textStr,100,500,mPaint);
canvas.drawPoint(100,200,mPaint2);
canvas.drawPoint(100,500,mPaint2);
Rect rect1 = new Rect();
mPaint.getTextBounds(textStr,0,textStr.length(),rect1);
float textwidth =  mPaint.measureText(textStr);

Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
paint.setColor(Color.RED);
canvas.drawLine(100,200,100+textwidth,200,paint);
canvas.drawLine(100,500,100+textwidth,500,paint);

 System.out.println("=============getTextBounds111=================="+rect1.left+" "+rect1.right+"  "+rect1.top+"  "+rect1.bottom);
 System.out.println("=============getTextBounds222=================="+rect1.width()+"  "+rect1.height());
System.out.println("=============measureText=================="+textwidth);

获取的结果：
利用getTextBounds获取到的值包括：
rect1.left：6
rect1.right: 1212
rect1.top: -107
rect1.bottom: 27
rect1.width():1206
rect1.height(): 134

利用measureText函数获取文本宽度textwidth 的值为1212.
利用measureText获取的宽度比getTextBounds获取的宽度稍大。
思考：
通常我们获取文字的宽高是利用rect1.width()和rect1.height(),利用measureText获取到的值又是什么，为何不一样。利用getTextBounds获取到的rect的上下左右坐标分别代表什么，为什么有负值。（先公布答案，位于基准线之上的位置都为负）

两种测量方式为什么不同（参考网上）：
measureText() 会在文本的左右两侧加上一些额外的宽度，这部分额外的宽度叫做 Glyph's AdvanceX （具体应该是属于字型方面的范畴，我猜测这部分宽度是类似字间距之类的东西）
getTextBounds() 返回的则是当前文本所需要的最小宽度，也就是整个文本外切矩形的宽度，而且两个函数的精度也是不同的。

4 FontMetrics

什么是基准线？
看上文我们绘制的文本例子：

基准线应该就是除了g,j两个字符其余字符所在的底部，仔细观察这些英文字母可以知道，英文字母分成三类，一类是aceim,一类是gj,一类是bdfhl，回想初中时刚开始学习英语时写英文时的四线三格本，基准线应该就是四线中的第三根线。

FontMetrics 类说明：
Class that describes the various metrics for a font at a given text size. Remember, Y values increase going down, so those values will be positive, and values that measure distances going up will be negative. This class is returned by getFontMetrics().

FontMetrics用于描述指定了字体大小的文本字体的变量指标。

FontMetrics中的每个字段都跟baseline有关，上面已经对baseLine进行了解释。

ascent是baseline之上至字符最高处的距离
descent是baseline之下至字符最低处的距离
leading是上一行字符的descent到下一行的ascent之间的距离，如果只有一行这个值为0，计算字体高度有时也需要加上这个数据。
top是最高字符到baseline的值，即ascent的最大值
bottom最下字符到baseline的值，即descent的最大值

获取FontMetrics ：

mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setTextSize(120);
mPaint.setTextAlign(Paint.Align.LEFT);

mPaint2 = new Paint();
mPaint2.setColor(Color.RED);
mPaint2.setAntiAlias(true);
mPaint2.setStrokeWidth(10);
mPaint2.setStyle(Paint.Style.FILL);
canvas.drawText(textStr,100,200,mPaint);
canvas.drawText(textStr,100,500,mPaint);
canvas.drawPoint(100,200,mPaint2);
canvas.drawPoint(100,500,mPaint2);
Rect rect1 = new Rect();
mPaint.getTextBounds(textStr,0,textStr.length(),rect1);
float textwidth =  mPaint.measureText(textStr);

Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
System.out.println("=========="+fontMetrics.top);
System.out.println("=========="+fontMetrics.bottom);
System.out.println("=========="+fontMetrics.ascent);
System.out.println("=========="+fontMetrics.descent);
System.out.println("=========="+fontMetrics.leading);

fontMetrics.top：-126.738
fontMetrics.bottom：32.51953
fontMetrics.ascent：-111.328
fontMetrics.descent：29.29
fontMetrics.leading：0.0

fontMetrics.top 和fontMetrics.ascent为负都是相对于baseline来说的，所以利用getTextBounds获取到的rect的top也是相对于baseline来说为负。

借用网上示意图，感谢作者：

top ,bottom是descent，ascent的特殊值，所以两个值是类似的。

getTextBounds获取的高度是不准确的，想要最大化获取字体的高度，应该使用descent的绝对值，加上ascent的绝对值。

mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(5);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setTextSize(120);
mPaint.setTextAlign(Paint.Align.LEFT);

mPaint2 = new Paint();
mPaint2.setColor(Color.RED);
mPaint2.setAntiAlias(true);
mPaint2.setStrokeWidth(10);
mPaint2.setStyle(Paint.Style.FILL);
        canvas.drawText(textStr,100,200,mPaint);
        canvas.drawText(textStr,100,500,mPaint);
        canvas.drawPoint(100,200,mPaint2);
        canvas.drawPoint(100,500,mPaint2);
        Rect rect1 = new Rect();
        mPaint.getTextBounds(textStr,0,textStr.length(),rect1);
        float textwidth =  mPaint.measureText(textStr);

        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2);
        paint.setColor(Color.RED);
        canvas.drawLine(100,200,100+textwidth,200,paint);
        canvas.drawLine(100,500,100+textwidth,500,paint);

        paint.setColor(Color.BLUE);

        canvas.drawLine(100,(200 + fontMetrics.top),100+textwidth,(200 + fontMetrics.top),paint);
        canvas.drawLine(100,(500 + fontMetrics.top),100+textwidth,(500 + fontMetrics.top),paint);

        paint.setColor(Color.YELLOW);
        canvas.drawLine(100,(200 + fontMetrics.ascent),100+textwidth,(200 + fontMetrics.ascent),paint);
        canvas.drawLine(100,(500 + fontMetrics.ascent),100+textwidth,(500 + fontMetrics.ascent),paint);

        paint.setColor(Color.GREEN);
        canvas.drawLine(100,200+(fontMetrics.bottom),100+textwidth,200+(fontMetrics.bottom),paint);
        canvas.drawLine(100,500+(fontMetrics.bottom),100+textwidth,500+(fontMetrics.bottom),paint);

        paint.setColor(Color.BLACK);
        canvas.drawLine(100,200+(fontMetrics.descent),100+textwidth,200+(fontMetrics.descent),paint);
        canvas.drawLine(100,500+(fontMetrics.descent),100+textwidth,500+(fontMetrics.descent),paint);

        paint.setColor(Color.RED);

可以看到baseline加上ascent之后，没有紧挨着字母的顶部，这时因为好多字在顶部还有很多符号，类似：

利用红线框把getTextBounds的rect绘制出来：

 mPaint = new Paint();
    mPaint.setColor(Color.BLUE);
    mPaint.setAntiAlias(true);
    mPaint.setStrokeWidth(5);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setTextSize(120);
    mPaint.setTextAlign(Paint.Align.LEFT);

    mPaint2 = new Paint();
    mPaint2.setColor(Color.RED);
    mPaint2.setAntiAlias(true);
    mPaint2.setStrokeWidth(10);
    mPaint2.setStyle(Paint.Style.FILL);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawText(textStr,100,200,mPaint);
    canvas.drawText(textStr,100,500,mPaint);
    canvas.drawPoint(100,200,mPaint2);
    canvas.drawPoint(100,500,mPaint2);
    Rect rect1 = new Rect();
    mPaint.getTextBounds(textStr,0,textStr.length(),rect1);
    float textwidth =  mPaint.measureText(textStr);

    Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(2);
    paint.setColor(Color.RED);
    canvas.drawLine(100,200,100+textwidth,200,paint);
    canvas.drawLine(100,500,100+textwidth,500,paint);

    paint.setColor(Color.BLUE);

    canvas.drawLine(100,(200 + fontMetrics.top),100+textwidth,(200 + fontMetrics.top),paint);
    canvas.drawLine(100,(500 + fontMetrics.top),100+textwidth,(500 + fontMetrics.top),paint);

    paint.setColor(Color.YELLOW);
    canvas.drawLine(100,(200 + fontMetrics.ascent),100+textwidth,(200 + fontMetrics.ascent),paint);
    canvas.drawLine(100,(500 + fontMetrics.ascent),100+textwidth,(500 + fontMetrics.ascent),paint);

    paint.setColor(Color.GREEN);
    canvas.drawLine(100,200+(fontMetrics.bottom),100+textwidth,200+(fontMetrics.bottom),paint);
    canvas.drawLine(100,500+(fontMetrics.bottom),100+textwidth,500+(fontMetrics.bottom),paint);

    paint.setColor(Color.BLACK);
    canvas.drawLine(100,200+(fontMetrics.descent),100+textwidth,200+(fontMetrics.descent),paint);
    canvas.drawLine(100,500+(fontMetrics.descent),100+textwidth,500+(fontMetrics.descent),paint);

    paint.setColor(Color.RED);

    canvas.drawRect(100+rect1.left,200+(rect1.top),100+rect1.right,200+(rect1.bottom),paint);
    canvas.drawRect(100+rect1.left,500+(rect1.top),100+rect1.right,500+(rect1.bottom),paint);

红色矩形就是getTextBounds的rect

5获取text宽高

获取宽度：

public static float getTextWidth(String text, float textSize){
   Paint paint = new Paint();
   paint.setTextSize(textSize);
   return paint.measureText(text);
}

获取高度：

public static float getTextHeight(float textSize){
   Paint paint = new Paint();
   paint.setTextSize(textSize);
   FontMetrics fm = paint.getFontMetrics();   
       return fm.descent - fm.ascent;
}

上面只是示例代码，如果精度要求不高，getTextBounds依然是可以使用的。

如果是多行文本，还需要考虑leading。

android绘图之Paint(1)
android绘图之Canvas基础（2）
Android绘图之Path（3）
Android绘图之drawText绘制文本相关（4）
Android绘图之Canvas概念理解（5）
Android绘图之Canvas变换（6）
Android绘图之Canvas状态保存和恢复（7）
Android绘图之PathEffect （8）
Android绘图之LinearGradient线性渐变（9）
Android绘图之SweepGradient（10）
Android绘图之RadialGradient 放射渐变（11）
Android绘制之BitmapShader（12）
Android绘图之ComposeShader，PorterDuff.mode及Xfermode（13）
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线（14）
Android绘图之贝塞尔曲线简介（15）
Android绘图之PathMeasure（16）
Android 动态修改渐变 GradientDrawable

Android绘图之drawText,getTextBounds
Android 绘图学习 1如何测量一段文本占用的长度和宽度 Paint类提供了测量宽高的方法：getTextBo...
Android绘图之PathMeasure（16）
Android 绘图学习 android绘图之Paint(1)android绘图之Canvas基础（2）Andro...
Android绘图之drawText绘制文本相关（4）
Android 绘图学习绘制文字相关：Paint 相关设置，Canvas相关设置。 1 Paint绘制文字相关：...
android drawtext 之baseline
在android中绘制文本的方法如下 drawText( String text, floatx, floaty...
Android绘图之Canvas变换（6）
Android 绘图学习 1 Canvas 与屏幕前面讲解了Canvas的基本概念，Android绘图之Canv...
Android drawText
drawText canvas.drawText(String text, float x, float y, P...
Android绘图之Shader
Android绘图之Shader Shader是绘图过程中的着色器，它有五个子类： BitmapShader Co...
图像合成Xfermode和任意形状ImageView
参考Xfermode in android - 解释文档和模式部分写得很好Android中Canvas绘图之Por...
android drawText居中
比较简单的东西，为了防止以后忘记，这里记录下。注意以下几点 public void drawText(@NonN...
Android 自定义View之绘图
【Android 自定义View之绘图】基础图形的绘制一、Paint与Canvas 绘图需要两个工具，笔和纸。...