Canvas的drawText方法详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011118524/article/details/78128737

通过Canvas的一些方法画圆,画矩形或者图像的时候,我们都需要有有一个定位坐标,即把圆或者矩形,画在画布上的上面位置,如:

  • 画圆:需要确定圆心,圆心确定了,圆的位置也就确定了。
  • 画矩形:需要确定左上角的坐标,坐标确定了,矩形的位置也就确定了。

思考:如果我们画的是文字,那又改采用什么样的规则去画呢?

1、四线格与基线
小时候,我们在刚开始学习写字母时,用的本子是四线格的,我们必须把字母按照规则写在四线格内。
比如:
这里写图片描述

那么问题来了,在canvas在利用drawText绘制文字时,也是有规则的,这个规则就是基线!
我们先来看一下什么是基线:
这里写图片描述
可见基线就相当于四线格中的第三条线!
也就是说,只要基线的位置定了,那文字的位置必然是定了的!

对图中的词语解释:
- top:画文字的时候的顶部边界坐标,文字不会碰到这条线。
- bottom:画文字的时候的底部边界坐标,文字不会碰到这条线。
- ascent:画文字的时候,顶部不会超过这条线。
- descent:画文字的时候,底部不会超过这条线。
- baseline:画文字的时候需要的基线。

2、计算 基线baseline的y坐标:
为了计算baseline的y坐标,这里通过一幅图帮助我们理解:
这里写图片描述
在Paint的内部有一个内部类:FontMetrics,在它里面封装了一些属性,如:top,bottom,ascent,descent等。
top:就是top线的y坐标-baseline的y坐标的值,因为Android的坐标系我们可以知道,baseline的y坐标大于top线的y坐标,所以FontMetrics的top属性值永远都是负值。
bottom:就是bottom线的y坐标-baseline的y坐标的值>0。
文字的高度=bottom-top;

计算baseline的y坐标,分如下两种情况:

假设baseline的y坐标为baselineY

(1) 如果View是wrap_content的,那么view的高度就是文字的高度:
baselineY=-FontMetrics.top,即取正值。
如果我们设置的值比FontMetrics.top这个值小,那么文字就会显示不完整了。
实例代码如下:

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setTextSize(80);
paint.setStyle(Paint.Style.FILL);
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
//canvas.drawText("世界和平", 0, Math.abs(fontMetrics.top), paint);//文字完全显示
canvas.drawText("世界和平", 0, 20, paint);//文字会显示不全

文字完全显示的实现效果如下:
这里写图片描述
显示不全的效果图如下:
这里写图片描述

(2)如果View的高度大于文字的高度:假设文字垂直居中
空件的高度viewHeight,
文字的高度为textHeight=FontMetrics.bottom-FontMetrics.top;
baselineY=(viewHeight-textHeight)/2+textHeight-FontMetrics.bottom,
简化后baselineY=viewHeight/2+textHeight/2-FontMetrics.bottom。
代码如下:

Paint paint = new Paint();
paint.setColor(Color.BLUE);
Rect rect = new Rect(0, 0, getWidth(), 200);
canvas.drawRect(rect, paint);

paint.setColor(Color.RED);
paint.setTextSize(80);
paint.setStyle(Paint.Style.FILL);
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
int baseline = (int) ((rect.bottom - rect.top) / 2 
+ (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);
canvas.drawText("世界和平", 0, baseline, paint);

实现效果图:
这里写图片描述
可以看到,文字时居中的。

总结:我们利用Paint.FontMetrics类提供的top和bottom属性,就可以计算出baseline的y坐标,至此,我们可以根据baseline的了解,实现一个文字的居中显示,居左显示,居上显示等特性的TextView。

猜你喜欢

转载自blog.csdn.net/u011118524/article/details/78128737
今日推荐