Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)

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();
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第1张图片

可以看到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);
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第2张图片

获取的结果:
利用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

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

Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第3张图片

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


Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第4张图片

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用于描述指定了字体大小的文本字体的变量指标。


Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第5张图片

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来说为负。

借用网上示意图,感谢作者:


Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第6张图片

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);

Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第7张图片

可以看到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);
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)_第8张图片

红色矩形就是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,measureText,FontMetrics,基线(14))