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

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