关于Android drawText 的个人理解

一、文字位置

1.绘制方法

public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint)

重点参数： x：文字所在矩形的相对位置 y：基线所在位置

2.通过设置画笔属性确定文字位置

设置方法：public void setTextAlign(Align align)

Align的类型： Align.LEFT（默认值）、 Align.CENTER、 Align.RIGHT 效果如下图所示 总结：该画笔属性可以确定 drawText 函数的（x,y）坐标点在文字所在矩形的相对位置

二、关于中心字

首先我们看下这幅图 红线（topLine ） 绿线（ascentLine ） 蓝线（baseLineValue 基线） 黑线（descentLine ） 青线（bottomLine ）

要知道红、绿、黑、青线的位置，我们要关注 FontMetrics 类里面的 top,ascent,descent,bottom 这几个成员变量，这几个成员变量的值，都是通过画笔获取的系统给我们的建议值。表示它们各自所代表的线，和基线距离相差值(通过以下代码及Log验证)。

       val fontMetrics = mPaint.fontMetrics
       val top = fontMetrics.top
       val ascent = fontMetrics.ascent
       val descent = fontMetrics.descent
       val bottom = fontMetrics.bottom
       d("--------------top = $top")
       d("--------------ascent = $ascent")
       d("--------------descent = $descent")
       d("--------------bottom = $bottom")
       d("--------------baseLineValue = $baseLineValue")
	    //基线位置
       val baseLineValue = 500f
       //红线位置
       val topLine = baseLineValue + top
       //绿线位置
       val ascentLine = baseLineValue + ascent
       //黑线位置
       val descentLine = baseLineValue + descent
       //青线位置
       val bottomLine = baseLineValue + bottom
       d("===============================================")
       d("--------------topLine=$baseLineValue + $top -> $topLine")
       d("--------------ascentLine=$baseLineValue + $ascent -> $ascentLine")
       d("--------------descentLine=$baseLineValue + $descent -> $descentLine")
       d("--------------bottomLine=$baseLineValue + $bottom -> $bottomLine")

看下log

com.wjm.viewup D/DrawTextUp: --------------top = -190.10742
com.wjm.viewup D/DrawTextUp: --------------ascent = -166.99219
com.wjm.viewup D/DrawTextUp: --------------descent = 43.945312
com.wjm.viewup D/DrawTextUp: --------------bottom = 48.779297
com.wjm.viewup D/DrawTextUp: --------------baseLineValue = 500.0
com.wjm.viewup D/DrawTextUp: ===============================================
com.wjm.viewup D/DrawTextUp: --------------topLine=500.0 + -190.10742 -> 309.89258
com.wjm.viewup D/DrawTextUp: --------------ascentLine=500.0 + -166.99219 -> 333.0078
com.wjm.viewup D/DrawTextUp: --------------descentLine=500.0 + 43.945312 -> 543.9453
com.wjm.viewup D/DrawTextUp: --------------bottomLine=500.0 + 48.779297 -> 548.7793

由上可知，红线（log中的topLine）位置= 基线位置（baseLineValue ） + top 值，其他线亦然

进入正题，画中心字，先明确一个问题： drawText 函数的 y 参数即基线，确定的是字体底部的位置，那我们要让字对齐我们的中心线，就必须让字体偏移一段距离

看代码

        val fontMetrics = mPaint.fontMetrics
        val top = fontMetrics.top
        val bottom = fontMetrics.bottom
        //中心线
        val centerLine = height / 2f
        //画线十字线
        drawLine(0f, height / 2f, width.toFloat(), height / 2f, mPaint)
        drawLine(width / 2f, 0f, width / 2f, height.toFloat(), mPaint)
        val topLine = centerLine + top
        val bottomLine = centerLine + bottom
        //偏移量: (bottomLine-topLine)/2-bottom 即 (bottom -top )/2-bottom 
        //(bottomLine-topLine)/2:可得字体中心线的值
        //-bottom （ bottom 表示 bottomLine和基线间的距离）:可得字体中心线到基线距离
        val offsetHeight=(bottomLine-topLine)/2-bottom 
        val centerBaseLine = height / 2f + offsetHeight
        mPaint.color=Color.BLACK
        drawText("我是中心字",width/2f,centerBaseLine,mPaint)

效果图

三、Align参数的形象展示

Align.LEFT（默认值）

Align.CENTER

Align.RIGHT