绘制系列(五)-DrawText()详解

article/2025/9/10 19:50:36

绘制系列(五)-DrawText()详解

文字基础知识

1、setTextAlign()

设置文字对齐方式(起始点相对于文字)

canvas.drawText(“文字”,起始点,paint)

比如: paint.setTextAlign(Paint.Align.RIGHT)//表示起始点在文字的右侧开始绘制;

###2、设置字体样式 ###

  1. 设置粗体 setBoldText(boolean fakeBoldText)
  2. 设置下划线 setUnderLineText(boolean underLineText)
  3. 设置是否显示中间删除线 setStrikeThruText()
  4. 设置字体倾斜度 setTextSkewX(float skewX),取负值向右倾斜,取正值向左倾斜
  5. 水平拉伸 setTextScaleX(floate scaleX)取值为1,表示不拉伸
  6. 设置字体seTypeface(Typeface typeface);Typeface是字体样式的类,可以指定系统中的字体,也可以在自定义样式文件中获取

字体样式

  • Android中自带的字体样式,Typeface类中保存着三种自带字体样式,Typeface。SAN_SERIF、Typeface.MONOSPACE、Typeface.SERIF,这三种的字体对中文支持不很有友好,当遇到不支持的文字时,会使用系统默认的样式来写;

-Typeface create(String familyName,int style)
通过指定字体名来加载系统中自带的字体样式,如果字体样式不存在,则会用紫铜样式代替并返回;

一般情况下,我们会选择加载自定义的字体文件来绘制文字,而不是指定系统自带的字体样式;
要自定义字体样式:

  1. 从外部字体文件中加载所需字形

     Typeface createFromAsset(AssetManager mgr,String apth)createFromFile(String path)createFromFile(File path)
    

绘制文字

  1. public void drawText(String text, float x, float y,Paint paint)
  2. public void drawText(String text, int start, int end, float x, float y,Paint paint)
  3. public void drawText(CharSequence text, int start, int end, float x, float y,Paint paint)
  4. public void drawText(char[] text, int index, int count, float x, float y,Paint paint)
  5. public void drawTextOnPath(char[] text, int index, int count,Path path,float hOffset, float vOffset,Paint paint)
  6. public void drawTextOnPath(String text,Path path, float hOffset,float vOffset,Paint paint)

大同小异,第二种、第四种只是截取某一段文字绘制,重点说一下第五种:沿路径绘制hOffset指路径水平位置的偏移量;vOffset:值起始点垂直偏移量

	 @Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);Path path = new Path();path.addCircle(220,300,100, Path.Direction.CCW);canvas.drawLine(220,300,320,300,paint);canvas.drawPath(path,paint);canvas.drawLine(600,300,700,300,paint);Path path1 = new Path();path1.addCircle(600,300,100, Path.Direction.CCW);canvas.drawPath(path1,paint);paint.setColor(Color.GREEN);canvas.drawTextOnPath("Linleslie",path,0,0,paint);canvas.drawTextOnPath("Linleslie",path1,80,-30,paint);}

可以看见路径时有方向的,这儿是逆时针方向,逆时针方向看做X轴方向,那么按照Android里面的坐标轴,由圆心指向外部的方向即为Y坐标正方向,所以这里vOffset位负值,其实就是圆内偏移;

位文字基线


写英文是,对字母是有格式的,即四格线。DrawText()绘制文字也是有要求的,即基线。这里的第三条线就是基线。

注意:关于上面函数中x、y参数说明,这里的(x,y)并不是绘制文字所在矩形的左上角坐标,而是文字基线起始坐标;y:即为基线位置;x:表示文字开始绘制的位置

文字对齐方式

通过setAlign()设置

居中对齐:x坐标相对于文字矩形的位置,即X坐标在文字矩形的正中间

左对齐:x坐标相对于文字矩形的位置,即X坐标和文字矩形的左边重合
右对齐:

DrawText()文字的四格线

除了基线以外,如上图所示,另外还有四条线,分别是ascent,descent,top,bottom,他们的意义分别是:

ascent: 系统建议的,绘制单个字符时,字符应当的最高高度所在线
descent:系统建议的,绘制单个字符时,字符应当的最低高度所在线
top: 可绘制的最高高度所在线
bottom: 可绘制的最低高度所在线

ascent是绘制文字推荐绘制的最高高度,文字尽量在这个高度下绘制,descent是绘制文字推荐的最低高度,文字最好在这个位置上绘制。top线则指该文字可以绘制的最高高度线,bottom则是表示该文字可以绘制的最低高度线

FontMetrics类讲解##

上面我们说了,文字除了基线,还有四条线。如何获得其位置呢?即通过FontMetrics实现,该类内部有四个成员变量

FontMetrics::ascent;  
FontMetrics::descent;  
FontMetrics::top;  
FontMetrics::bottom;

其值计算方法为:
ascent = ascent线的y坐标 - baseline线的y坐标;//该值为负
descent = descent线的y坐标 - baseline线的y坐标;//该值为正
top = top线的y坐标 - baseline线的y坐标;
bottom = bottom线的y坐标 - baseline线的y坐标;

获取FontMetric对象

FontMetrics fontMetrics=paint.getFontMetrics();Paint.FontMetricsInt fmInt = paint.getFontMetricsInt();

FontMetrics和FontMetricsInt这两个雷其实是一样的,只是前者得到四个成员变是float类型和后者是int类型

文字宽度、高度、最小矩形

文字宽度:绿色矩形宽度
文字高度:绿色矩形高度(即我上面我们说的及格线top-bottom距离)
最小矩形(即仅仅包裹文字的最小矩形):红色矩形

获取文字宽度

int width=paint.MeasureText(String text);

即可获取文字宽度

获取文字高度

我们说,文字高度其实就是四格线中top到bottom的距离,

Paint.FontMetricsInt fm = paint.getFontMetricsInt();

而top=baseLineY+fm.top;
bottom=baseLineY+fm.bottom;
所以height=bottom-top;

获取文字最小矩形

要获取最小矩形,也是通过系统函数来获取的

获取指定字符串所对应的最小矩形,以(0,0)点所在位置为基线 * @param text  要测量最小矩形的字符串 * @param start 要测量起始字符在字符串中的索引 * @param end   所要测量的字符的长度 * @param bounds 接收测量结果 
getTextBounds(String text,int start,int end,Rect minRect);

即可得到文字最小矩形minRect的相关参数.
这里特别要注意的是:

  1. 这里是以(0,0)为基线的,如果需要的真实的最小矩形边界参数需要在其minRect的minRect.top和minRect.bottom加上BaseLineY的值。

下面以demo测试一下:

 int baseLineY = 200;
int baseLineX = 0 ;
String text = "harvic\'s blog";
Paint paint = new Paint();
//设置paint
paint.setTextSize(120); //以px为单位
canvas.drawText("harvic\'s blog", baseLineX, baseLineY, paint);
Rect minRect = new Rect();
paint.getTextBounds(text,0,text.length(),minRect);
Log.e("MyView",minRect.toShortString());

12

从log打印的日志可以看出最小矩形的左上角,Y坐标为负,为什么呢?上面我们说了getTextBounds()默认是以(0,0)为基线的,所以要拿到最小矩形的实际top和bottom必须在此基础上在加上基线baseLinearLayoutY;即:
int top=minRect.top+baseLinY ;
int bottom=minRect.bottom+baseLineY;

最后在详细的,实现一下整个过程:

int baseLineY = 200;
int baseLineX = 70 ;
String text = "harvic\'s blog";
Paint paint = new Paint();//设置paint
paint.setTextSize(120); //以px为单位
/*canvas.drawText("harvic\'s blog", baseLineX, baseLineY, paint);
Rect minRect = new Rect();
paint.getTextBounds(text,0,text.length(),minRect);
Log.e("MyView",minRect.toShortString());*///1.画Text所占区域
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
float top=baseLineY+fontMetrics.top;
float bottom= baseLineY + fontMetrics.bottom;
float width= paint.measureText(text);
canvas.drawRect(baseLineX,top,baseLineX+width,bottom,paint);
//2.画最小矩形
Rect minRect= new Rect();
paint.getTextBounds(text,0,text.length(),minRect);
Log.d("MyView", "minRect:" + minRect);
Log.d("MyView", "minRect.height():" + minRect.height());
Log.d("MyView", "fontMetrics.ascent-fontMetrics.ascent:" + (fontMetrics.ascent - fontMetrics.ascent));
paint.setColor(Color.RED);
canvas.drawRect(baseLineX+minRect.left,minRect.top+baseLineY,baseLineX+minRect.right,minRect.bottom+baseLineY,paint);
//3.画文字
paint.setColor(Color.YELLOW);
canvas.drawText(text,baseLineX,baseLineY,paint);

注意:画文字所占区域时,是和文字对齐方式有关的(paint.setAlign())。系统默认左对齐(baseLineX在文字区域的左边),所以其区域坐标是这样。如果是右对齐,该区域的left=baseLinX-width,right=baseLineX;

效果图:

13


http://chatgpt.dhexx.cn/article/A0KKVd8P.shtml

相关文章

Windows API一日一练(24)DrawText函数-绘制矩形内的文字

主目录传送门 https://blog.csdn.net/zb774095236/article/details/108291755 本次学习的源码模板下载: 1.百度云:https://pan.baidu.com/s/1B0YuPWgSxvLTHk59STzQQQ 提取码:1ins 学习目标: 在Win32API-13-14-窗口关闭和窗口…

wpf-绘制文字:DrawText和DrawGlyphRun

先上效果&#xff1a;上面的Hello,world是DrawGlyphRun绘制的&#xff0c;下面的hello是DrawText绘制的。绘制的结果都是不能复制的。 前台 <local:CanvasCustom x:Name"myCanvas"/>后台 class CanvasCustom : Canvas {protected override void OnRender(Dr…

android 文字drawable,TextDrawable

TextDrawable 是一个可以将纯文本生成Drawable的类库&#xff0c;你可以将这个Drawable设置给ImageView&#xff0c;从而可将文字转为图片。这在某些场合是很有用的。 效果图&#xff1a; 如何使用你可在xml中创建个ImageView android:layout_width"60dp" android:la…

drawText用法总结

drawText 经常使用Canvas的draw***方法去绘制一些图像图形&#xff0c;绘制的坐标是从Canvas左上角开始计算的&#xff0c;如果想要把一个图像放到某个位置&#xff0c;直接drawBitmap传递图片左上角的坐标就行了。那drawText就不一样&#xff0c;如果你传递进去字符串&#x…

drawText详解

Canvas 作为绘制文本时&#xff0c;是以基线为基准绘制的&#xff0c;不是左上角 FontMetrics对象 它以四个基本坐标为基准&#xff0c;分别为&#xff1a; ・FontMetrics.top ・FontMetrics.ascent ・FontMetrics.descent ・FontMetrics.bottom ascent和top都为负数&#xff…

B. The Monster and the Squirrel

B. The Monster and the Squirrel Ari the monster always wakes up very early with the first ray of the sun and the first thing she does is feeding her squirrel. Ari draws a regular convex polygon on the floor and numbers it’s vertices 1, 2, …, n in cloc…

Springboot整合squirrel-foundation状态机

目录 一. 快速入门 1 . maven 2 . 快速开始 3 . Fluent Api 4 . 状态机四要素 5 . 状态机构建器 6 . 状态机转换操作(代码配置方式) 7 . 状态机转换操作(注解声明方式) 8 . 上下文不敏感状态机 二 : 使用注意事项 P1 : 异常 : StateMachineBuilderImpl cannot fi…

Hive的客户端界面工具–SQuirrel SQL Client--详细安装以及连接Hive过程

SQuirrel SQL Client是一款支持Hive的可视化工具&#xff0c;是市面上少数支持Hive中比较好用的&#xff0c;看下如何安装使用吧&#xff0c;下面是非常详细的安装过程。 1.下载客户端 SQuirrel SQL Client的官网及下载地址为&#xff1a;http://squirrel-sql.sourceforge.ne…

Linux安装SQuirreL SQL Client

环境和准备 操作系统&#xff1a; Ubuntu 20.04SQuirreL&#xff1a; squirrel-sql-snapshot-20220326_1238-standard.jarDb2 driver&#xff1a; db2jcc4.jardb2jcc_license_cu.jar MySQL driver&#xff1a; mysql-connector-java-8.0.27.jar 下载和安装 首先下载SQuirreL…

智能优化算法之松鼠算法(Squirrel search algorithm)

文章目录 背景Squirrel search algorithm(SSA)SSARandom initialization&#xff08;随机初始化&#xff09;Fitness evaluation&#xff08;适应值评价&#xff09;Sorting, declaration and random selection&#xff08;排序、声明和随机选择&#xff09;Generate new locat…

electron打包遇到 Making for target: squirrel - On platform: win32 - For arch: x64错误

上面横线处是出现错误的位置。报错的原因如下&#xff1a; 1、package.json的“author”和“description”在打包时是必填内容&#xff0c;随便填些内容即可打包成功。 2、和项目的绝对路径有关&#xff0c;项目的绝对路径不能出现中文&#xff0c;否则在红线处会报错。

WPF 使用Squirrel自动更新应用

前言 本文简单的介绍了如何使用 Squirrel 来为 WPF 客户端 进行自动检查更新。 Squirrel git 地址 &#xff1a;http:// https://github.com/Squirrel/Squirrel.Windows 本文使用了 Visual Studio 2022 进行演示讲解。 参考英文博客&#xff1a; https://intellitect.com/d…

SQuirrel SQL Client的安装

如果您的工作要求您在一天之中连接许多不同的数据库 &#xff08;oracle、DB2、mysql、postgresql、Sql Server等等&#xff09;&#xff0c;或者你经常需要在多个不同种类的数据库之间进行数导入导出。那么SQuirreL SQL Client 将会是比较理想的数据库客户端链接工具。 简单介…

数据库管理工具——SQuirreL SQL Client使用入门

如果您的工作要求您在一天之中连接许多不同的数据库 &#xff08;oracle、DB2、mysql、postgresql、Sql Server等等&#xff09;&#xff0c;或者你经常需要在多个不同种类的数据库之间进行数导入导出。那么SQuirreL SQL Client 将会是比较理想的数据库客户端链接工具。 简单介…

SQuirrel连接hive配置

1. 简介 最近由于大数据部门相关同事离职&#xff0c;不得不研究一下大数据相关组件&#xff0c;今天成功安装配置Hive&#xff0c;简单记录&#xff0c;一是为了加深印象&#xff0c;二是为以后备用&#xff0c;三是为大家提供参考&#xff0c;避免少踩坑。 在Hive的官网上…

FSM——squirrel状态机使用

FSM——squirrel状态机使用 1 FSM介绍 1.1 概念 FSM&#xff08;finite state machine&#xff09;:有限状态机 是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。核心内容&#xff1a;有限个状态、通过外部操作引起状态的转移。用来对状态的流转进行解耦&a…

Squirrel SQL客户端使用图解

一、Squirrel简介 Squirrel是一个连接数据库的客户端工具&#xff0c;一般支持JDBC的数据库都可以用它来简介&#xff0c;如连接MySQL。 二、安装准备 下载jar包&#xff1a;squirrel-sql-3.7.1-standard.jar 三、安装 ①进入squirrel-sql-3.7.1-standard.jar文件所在的目录…

完成GitHub上squirrel 的运行(数据库的模糊测试)

文章目录 一、squirrel的介绍squirrel链接建议下载Ubuntu 18.04编译安装clang/llvm&#xff08;建议9.0以上&#xff09;将squirrel的文件下载到Ubuntu上下载docker&#xff08;建议按照dockerfile步骤直接在外部搭建环境&#xff09;Dockerfile创建镜像按照dockfile搭建时时有…

连接HiveServer2的图形化工具SQuirrel和Dbeaver

文章目录 SQuirrel SQL Client简介视频演示安装SQuirrel SQL Client启动hdfs和hiveserver2配置SQuirrel SQL Client使用SQuirrel SQL Client访问hive使用Cloudera提供的hive连接驱动进行连接Dbeaver的安装及使用 本文介绍的工具可以通过下面链接下载&#xff1a; 链接&#xff…

squirrel校园二手交易平台

##squirrel校园二手交易平台 &#xff08;适合寻找SSM项目练手的你。&#xff09; 问题汇总&#xff1a; &#xff08;朋友毕设用到了这个二手平台&#xff0c;他自己把后台优化了&#xff0c;我又帮忙实现了一部分功能&#xff0c;只能做到这里了。有兴趣的&#xff0c;自行优…