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

 更新时间:2019年12月19日 15:30:48   作者:biloba  
这篇文章主要给大家介绍了关于Android Canvas的drawText()与文字居中方案的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

自定义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, float y, Paint paint)
public void drawText (char[] text, int index, int count, float x, float y, Paint paint)

// 第二类
public void drawPosText (String text, float[] pos, Paint paint)
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

// 第三类
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

其中drawText()最常用,drawPosText ()是根据一个个坐标点指定文字位置,drawTextOnPath ()是根据路径绘制。但drawText()的x,y参数是干嘛的呢?

先来测试下

Paint paint=new Paint();
 paint.setStyle(Paint.Style.FILL);
 paint.setStrokeWidth(12);
 paint.setTextSize(100);

 String text="测试:my text";
 canvas.drawText(text, 200, 400, paint);

 //画两条线标记位置
 paint.setStrokeWidth(4);
 paint.setColor(Color.RED);
 canvas.drawLine(0, 400, 2000, 400, paint);
 paint.setColor(Color.BLUE);
 canvas.drawLine(200, 0, 200, 2000, paint);

左对齐-left

可以看到,x,y并不是指定文字的中点位置,并且x,y与文字对齐方式有关(通过setTextAlign()指定,默认为left)

居中对齐-center

右对齐-right

(为了使文字完整,上面调整了下x,y的值)

从上面三种情况得出结论,x所对应的竖线:

  • 左对齐 — 文字的左边界
  • 居中对齐 — 文字的中心位置
  • 右对齐 — 文字的左边界

y对应的横线并不是文字的下边界,而是基准线Baseline

看下面这张图


红色的Baseline是基准线,紫色的Top是文字的最顶部,也就是在drawText()中指定的x所对应,橙色的Bottom是文字的底部。

拿这些值如何获取呢?

Paint.FontMetrics fontMetrics=paint.getFontMetrics();
 fontMetrics.top
 fontMetrics.ascent
 fontMetrics.descent
 fontMetrics.bottom

记得要在设置完Paint的文字大小,宽度之类属性后再获取FontMetrics,
baseline对应对应值为0,在它下面的descent和bottom值为正,top和ascent为负。那文字的高度为bottom - top


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


好啦,把drawText()中x,y参数讲清楚后实现文字居中就很容易了

直接上代码

//矩形背景
 Paint bgRect=new Paint();
 bgRect.setStyle(Paint.Style.FILL);
 bgRect.setColor(Color.YELLOW);
 RectF rectF=new RectF(200, 200, 800, 600);
 canvas.drawRect(rectF, bgRect);

 Paint textPaint=new Paint();
 textPaint.setStyle(Paint.Style.FILL);
 textPaint.setStrokeWidth(8);
 textPaint.setTextSize(50);
 textPaint.setTextAlign(Paint.Align.CENTER);

 String text="测试:my text";
 //计算baseline
 Paint.FontMetrics fontMetrics=textPaint.getFontMetrics();
 float distance=(fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;
 float baseline=rectF.centerY()+distance;
 canvas.drawText(text, rectF.centerX(), baseline, textPaint);

效果


将对齐方式设置为center,那要让文字居中显示,x值就为矩形中心x值,y值也就是baseline的计算看下图


y = 矩形中心y值 + 矩形中心与基线的距离

距离 = 文字高度的一半 - 基线到文字底部的距离(也就是bottom)
 = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • React Native 实现热更新并自动签名打包功能

    React Native 实现热更新并自动签名打包功能

    这篇文章主要介绍了React Native 实现热更新并自动签名打包,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Android通过JNI实现守护进程

    Android通过JNI实现守护进程

    这篇文章主要为大家详细介绍了Android通过JNI实现守护进程的相关资料,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Android数据库操作工具类分享

    Android数据库操作工具类分享

    这篇文章主要为大家详细介绍了Android数据库操作工具类的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Android 性能优化系列之bitmap图片优化

    Android 性能优化系列之bitmap图片优化

    在日常开发的APP,大部分时候需要想用户展示图片信息,图片最终对应Android中的Bitmap对象。而对于APP端来说Bitmap又是一个比较麻烦的问题,主要表现在Bitmap是非常占用内存的对象,处理不当将导致APP运行卡顿甚至出现OOM
    2021-11-11
  • android view实现横向滑动选择

    android view实现横向滑动选择

    这篇文章主要为大家详细介绍了android view实现横向滑动选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 2014值得推荐的10个移动 Web 应用程序开发框架

    2014值得推荐的10个移动 Web 应用程序开发框架

    今天这篇文章向大家推荐10大优秀的移动 Web 开发框架,帮助开发者更加高效的开发移动Web应用。
    2014-08-08
  • 浅析Android企业级开发数据绑定技术

    浅析Android企业级开发数据绑定技术

    这篇文章通过代码实例分析了Android企业级开发数据绑定技术的应用以及相关的原理知识,跟着小编一起学习参考下吧。
    2017-12-12
  • Android Studio 多层级 Module 对 aar 引用问题解决方法

    Android Studio 多层级 Module 对 aar 引用问题解决方法

    这篇文章主要介绍了Android Studio 多层级 Module 对 aar 引用问题的解决方法,需要的朋友参考下
    2017-12-12
  • Android:“万能”Activity重构篇

    Android:“万能”Activity重构篇

    本文主要介绍了mvp以及每一层,以及使用mvp来重构“万能”Activity,其实每一层需要注意的东西还有很多,比如model层是最难写的一层。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • android studio打印日志语句Log.d()详解

    android studio打印日志语句Log.d()详解

    这篇文章主要介绍了android studio打印日志语句Log.d()详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-04-04

最新评论