android canvas drawText()文字居中

Posted 2020-09-26 slgkaifa

近期也是在学习自己定义控件,曾经仅仅自己随便玩了下,一直认为比較难,正好如今工作轻松,每天闲着就看看书看看帖子学习自己定义控件,你还别说自己定义控件学起来还是蛮有趣的!!

这里也跟大家分享下我关于drawText()文字居中的方法.

先附上drawText()的方法说明

说实话当时看了这个,我也没明确这个x,y坐标究竟表达的啥意思,还一直以为是绘制文字中心的坐标,后来发现这个理解是错误的

要想理解这个首先看张图

像图上这样安卓的文字绘制是相对于基线绘制的,也就是图中的红线,而top+bottom的长度就等于字体高度.即等于|top|+|bottom|绝对值

实际绘制的时候取决于基线上一个点来绘制文字,而这个点有三种分别相应为left,center,right例如以下图

而drawText()方法中x,y坐标所指的点就是上图基线上三个点中的一个,详细是哪一个依据paint的setTextAlign()方法设置,默觉得left

演示样例代码例如以下

Rect rect = new Rect(100,100,500,500);//画一个矩形
        Paint rectPaint = new Paint();
        rectPaint.setColor(Color.BLUE);
        rectPaint.setStyle(Paint.Style.FILL);
        canvas.drawRect(rect, rectPaint);

        Paint textPaint = new Paint();
        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(50);
        textPaint.setStyle(Paint.Style.FILL);
        //该方法即为设置基线上那个点到底是left,center,还是right  这里我设置为center
        textPaint.setTextAlign(Paint.Align.CENTER);

        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float top = fontMetrics.top;//为基线到字体上边框的距离,即上图中的top
        float bottom = fontMetrics.bottom;//为基线到字体下边框的距离,即上图中的bottom

        int baseLineY = (int) (rect.centerY() - top/2 - bottom/2);//基线中间点的y轴计算公式

        canvas.drawText("你好世界",rect.centerX(),baseLineY,textPaint);

这里有点要注意textPaint.getFontMetrics()这种方法一定要在设置字体大小或者样式等等一系列会影响字体的方法后在调用,不然获取到的top和bottom值不准.

效果例如以下

正好是在中间的,即证明等式是没有问题的,再来分析这个等式是怎样计算的

之所以drawText()方法中x,y指的是基线中间的那个点,是由于setTextAlign(Paint.Align.Center)

那么要想在正中间显示文字,x仅仅要为矩形的中点x坐标就可以 x = rect.centerX()

要计算的就是基线中间图上红色点的y坐标了,看图能够发现红色点的y为矩形中点黑色点的y坐标+图中黑色点和红色点之间的距离

矩形y坐标为 rect.centerY()

黑色点和红色点之间的距离为相对于基线的(top+bottom)/2 - bottom

而 top是相对于基线的所以为负数,所以公式为 (-top+bottom)/2 - bottom简化下为-top/2 - bottom/2

所以最后计算为rect.centerY - top/2 - bottom/2. 

到此相信大家应该明确了吧,有什么疑问不正确的地方欢迎提出.