android drawText()方法中x,y坐标值真正的 意义

我们在绘制文字的时候是通过canvas的drawText(String text, float x, float y,Paint paint)方法第一个和第四个参数都知道,但是x,y知道传的是什么坐标么,其实传的是基线值,因为在绘制文字的时候有几个值要了解下：



是不是有点像学音乐的线谱,现在简单说明下

top,bottom是文字绘制的时候绝对不能超过的,也就是高不能超过top,底部不能超过bottom.

asent,descent是系统建议不要超过的,但是有时候绘制文字会超过,比如你绘制一个g字母下面可能就会 超过descent

而x,y就是指baseline(基线)为准的值,我们在这画一个坐标：



通过上面的坐标我们知道top和ascent是负值 而bottom和descent是正值

从上面的坐标我们可以得到如下几个等式：

top = top线的y坐标 - baseline线的y坐标
bottom = bottom线的y坐标 - baseline线的y坐标
ascent = ascent线的y坐标 - baseline线的y坐标
desent = desent线的y坐标 - baseline线的y坐标

在android中top bottom ascent descent其实已经封装成类了在Paint内部类有一个:

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

leading指的是行间距

通过FontMetrics转化下：

      bottom = baseline + FontMetrics.bottom
top = baseline + FontMetrics.top

而我们是要求y坐标的值,如下图:



文字中心其实就是view的高度一半,这是个已知值,我们只要求出C的坐标然后加上啊+view高度的一半就是y的值,

图中A和B的值是相等的

A=B = (bottom - top)/2 这里A和B指的是长度

而    bottom = baseline + FontMetrics.bottom
top = baseline +FontMetrics.top

所以A=B = FontMetrics.bottom/2-FontMetrics.top/2，而C=B-bottom的值也就是 FontMetrics.bottom/2-FontMetrics.top/2-(baseline
+ FontMetrics.bottom)

而C又等于baseline-center  所以是baseline-center = B-(bottom-baseline)也就是baseline-center = B-(baseline+FontMetrics.bottom-baseline)结果是:

baseline-center = FontMetrics.bottom/2-FontMetrics.top/2-FontMetrics.bottom

而center=view.getHeight/2所以baseline=FontMetrics.bottom/2-FontMetrics.top/2-FontMetrics.bottom+view.getHeight/2;

也就是y的值是FontMetrics.bottom/2-FontMetrics.top/2-FontMetrics.bottom+view.getHeight/2;最终优化下算法是

y=-(FontMetrics.bottom+FontMetrics.top)/2+view.getHeight/2

这个如果在一个圆中绘制文字,如果计算不对的话也就是不在中心点很容易看的出来,现在就写一个简单的demo,自定义一个CircleProgressView

代码如下:

package com.example.circleprogressview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by zhouguizhi on 2017/8/27.
*/
public class CircleProgressView extends View {
private int max = 100;
private Paint paint;
private float progress = 0;
private int roundColor =Color.parseColor("#008080");
private int textColor = Color.parseColor("#696969");
private int roundProgressColor = Color.parseColor("#DEB887");
private float textSize = 40;
private float roundWidth = 24;
private int percent = 0;

public CircleProgressView(Context context) {
this(context,null);
}
public CircleProgressView(Context context,  AttributeSet attrs) {
this(context, attrs,0);
}
public CircleProgressView(Context context,  AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
paint = new Paint();
paint.setColor(roundColor);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(roundWidth);
paint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawCircle(canvas);
drawText(canvas);
drawOval(canvas);
postDelayed(new Runnable() {
@Override
public void run() {
progress += 1;
if(progress>100){
return;
}
postInvalidate();
}
},100);
}
private void drawOval(Canvas canvas) {
if(null!=canvas){
RectF oval = new RectF(roundWidth/2, roundWidth/2, getWidth()-roundWidth/2, getWidth()-roundWidth/2);
paint.setColor(roundProgressColor);
paint.setStrokeWidth(roundWidth);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawArc(oval, 0 , 360 * progress / max, false, paint);
}
}
private void drawText(Canvas canvas) {
if(null!=canvas){
paint.setColor(textColor);
paint.setStrokeWidth(0);
paint.setTextSize(textSize);
percent = (int)(progress / (float)max * 100);
String strPercent = percent + "%";
Paint.FontMetricsInt fm = paint.getFontMetricsInt();
if(percent != 0){
canvas.drawText(strPercent, getWidth() / 2 - paint.measureText(strPercent) / 2 ,
getHeight() / 2-(fm.bottom+fm.top)/2, paint);
}
}
}
private void drawCircle(Canvas canvas) {
if(null!=canvas){
float radius = getWidth() / 2 - roundWidth/2;
paint.setStrokeWidth(24);
canvas.drawCircle(getWidth() / 2,getWidth() / 2,radius,paint);
paint.setColor(roundColor);
canvas.drawCircle(getWidth() / 2,getWidth() / 2,radius,paint);
}
}
}

这个代码简单,没啥可解释的,看效果: