android canvas drawText()文字居中效果

本文跟大家分享下我关于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.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android Canvas drawText文字居中的一些事（图解）

    Android Canvas drawText文字居中的一些事（图解）

    1.写在前面 在实现自定义控件的过程中,常常会有绘制居中文字的需求,于是在网上搜了一些相关的博客,总是看的一脸懵逼,就想着自己分析一下,在此记录下来,希望对大家能够有所帮助. 2.绘制一段文本 首先把坐标原点移动到控件中心(默认坐标原点在屏幕左上角),这样看起来比较直观一些,然后绘制x.y轴,此时原点向上y为负,向下y为正,向左x为负,向右x为正,以(0,0)坐标开始绘制一段文本: @Override public void draw(Canvas canvas) { super.draw(ca

  • android canvas drawText()文字居中效果

    本文跟大家分享下我关于drawText()文字居中的方法. 先附上drawText()的方法说明 说实话当时看了这个,我也没明白这个x,y坐标到底表达的啥意思,还一直以为是绘制文字中心的坐标,后来发现这个理解是错误的 要想理解这个首先看张图 像图上这样安卓的文字绘制是相对于基线绘制的,也就是图中的红线,而top+bottom的长度就等于字体高度.即等于|top|+|bottom|绝对值 实际绘制的时候取决于基线上一个点来绘制文字,而这个点有三种分别对应为left,center,right如下图

  • Android DrawableTextView图片文字居中显示实例

    Android DrawableTextView图片文字居中显示实例

    在我们开发中,TextView设置Android:drawableLeft一定使用的非常多,但Drawable和Text同时居中显示可能不好控制,有没有好的办法解决呢? 小编的方案是通过自定义TextView实现. 实现的效果图: 注:第一行为原生TextView添加android:drawableLeft 第二行为自定义TextView实现的效果. 实现思路: 继承TextView,覆盖onDraw(Canvas canvas),在onDraw中先将canvas进行translate平移,再调

  • Android Canvas绘制文字横纵向对齐

    Android Canvas绘制文字横纵向对齐

    目录 1. 横向对齐(Align属性) 2. TextBound 3. 纵向对齐与绘制线 4. 总结 1. 横向对齐(Align属性) Align属性决定了使用该画笔时,相较于绘制点的水平对称方式,分别是LEFT.CENTER.RIGHT,对应的情况: 如最上方的文字及其框线所示,文字具有三个备选的初始绘制基点,Align属性将会指定这三个绿色的哪一个基点最终和绘制目标基点进行重合对齐. 红色的点就是我们在drawText()中填入的xy坐标参数,我们暂且将其称为目标基点(x,y)被确定之后,文

  • Android Canvas自定义实现时钟效果

    Android Canvas自定义实现时钟效果

    Android之Canvas自定义画一个时钟,供大家参考,具体内容如下 自定义控件,在安卓是也是一种无所不能的技术了,所有自带控件,以及组合自带控件不能实现的一些效果,我们都可以通过自定义控件来实现,不过,如果能有系统控件使用的就用系统自带的控件去实现,而不必要用自定义去实现,我们都知道,自定义控件在一定的程度上,效率往往会比系统自带的控件效率低,所以我不到万不得已,不要使用自定义控件,今天用自定一控件,实现一个小小的时钟,具体的实现在代码中注释功能. ClockView.java public

  • Android Canvas的drawText()与文字居中方案详解

    Android Canvas的drawText()与文字居中方案详解

    自定义View是绘制文本有三类方法 // 第一类 public void drawText (String text, float x, float y, Paint paint) public void drawText (String text, int start, int end, float x, float y, Paint paint) public void drawText (CharSequence text, int start, int end, float x, flo

  • android实现文字水印效果 支持多行水印

    android实现文字水印效果 支持多行水印

    特点 支持多行水印,支持自定义角度,支持自定义文字大小. 原理: 使用一个TextView 占据整个页面.在TextView基础上面打水印. 用法: 具体的view在 package cn.fulushan.watermark.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.ColorFilter

  • Android编程实现图片的浏览、缩放、拖动和自动居中效果

    本文实例讲述了Android编程实现图片的浏览.缩放.拖动和自动居中效果的方法.分享给大家供大家参考,具体如下: Touch.java /** * 图片浏览.缩放.拖动.自动居中 */ public class Touch extends Activity implements OnTouchListener { Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); DisplayMetrics dm; ImageVie

  • Android实现文字滚动效果

    Android 实现文字滚动效果,自己写了个timer小计时器,textview文字上下翻动效果: public class AutoTextView extends TextSwitcher implements ViewSwitcher.ViewFactory { private float mHeight; private Context mContext; //mInUp,mOutUp分别构成向下翻页的进出动画 private Rotate3dAnimation mInUp; priva

  • Android中搜索图标和文字居中的EditText实例

    Android中搜索图标和文字居中的EditText实例

    效果图: 需要自定义view,具体实现如下: import android.widget.EditText; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.drawable.Drawable; import android.uti

随机推荐