Textview画文字基线的问题

有些小伙伴在自定义View的时候需要画文字，当画文字的基线的时候出现不少问题，

调用 canvas.drawText(text, x , y , paint); 这里的text字体，x开始的位置，y基线，paint画笔，计算基线y的时候出现问题。

话不多说，直接上图：

image

图中，Baseline就是我们所说的基线，注意，基线并不是中线，如果简单认为是中线的话，

相当于 y=getHeight()/2 也就是 canvas.drawText(text, x , getHeight()/2 , paint)

这样的话就出现如下结果：

image

是不是跟想象中的不一样呢，其实就是基线的问题，那么根据图1如何求基线呢。

由图可知，注意坐标轴是从上到下，从左到右的，Baseline到顶部的距离叫 top (相对坐标轴来说是个负数)， Baseline到底部的距离叫 bottom (相对坐标轴来说是个正数)，然后我们已知的条件有文字的高度bottom - top , 那么如果画一条中间线，中间线的高度就是 ( bottom - top ) /2（图中没展示，小伙伴自行想象）,这就是我们的中线，然后发挥我们的数学才能

基线 = getHeight()/2 + 中线到基线的距离

假设中线到基线的距离为 dy

那么dy怎么算，根据我们上面计算的文字高度的一半 ( bottom - top ) /2 再减去bottom的高度，所以

dy = ( bottom - top ) /2 - bottom

所以 基线 = getHeight() + dy

计算文字的高度需要用到 FontMetricsInt ，不懂的小伙伴自行百度一下。

这样就计算完了。运行结果如下：

image

放一份自定义textview代码中onDraw()画文字的代码：

protected void onDraw(Canvas canvas) {

//画文字，text字体，x开始的位置，y基线，paint画笔

    Paint.FontMetricsInt fontMetricsInt =mPaint.getFontMetricsInt();

    //dy等于文字高度的一半到基线的距离  baseLine等于基线

    int dy =  ( fontMetricsInt.bottom - fontMetricsInt.top )/2 - fontMetricsInt.bottom;

    int baseLine =  getHeight()/2 + dy;

    canvas.drawText( mText,0, baseLine,mPaint );

}

谢谢。