【Godot4.2】CanvasItem绘图函数全解析 - 5.绘制字符和字符串

概述

到这一节为止，我们已经学习了如何在CanvasItem中绘制简单几何图形、图片以及样式盒。但是对于很重要的文字一直没有涉及。
本节就来讲一下字符和字符串绘制函数，以及替换它们的两个类。

系列目录

  • 0.概述
  • 1.绘制简单图形
  • 2.设定绘图变换
  • 3.绘制纹理
  • 4.绘制样式盒
  • 5.绘制字符和字符串
  • 6.TextLine和TextParagraph详解
  • 7.自定义节点TextBoard
  • 8.绘制点索引
  • 9.绘制表格

CanvasItem内置字符和字符串绘制函数

CanvasItem内置了以下几个函数用来绘制字符和字符串：

  • draw_char()：用来绘制单个字符
  • draw_string()：用来绘制字符串
  • draw_string_outline()：用来绘制字符串的文本描边
  • draw_multiline_string()：用来绘制多行文本

同时因为绘制文本与具体的字体挂钩，所以也可以用Font类的一些方法来作为辅助。

绘制字符

draw_char()参数如下：

参数类型默认值说明
fontFont字体
posVector2绘制位置
charString要绘制的字符
font_sizeint16字号
modulateColorColor(1, 1, 1, 1)调制颜色

测试代码：

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))var font = ThemeDB.fallback_fontdraw_char(font,Vector2(),"9")

在上面的代码中：

  • 在绘制字符之前，我们将绘图原点设为了(200,200)
  • 并绘制了从坐标原点到绘图原点(200,200)的矩形
  • 用ThemeDB.fallback_font获取了Godot主题的默认字体
  • 最后通过draw_char在(200,200)处，以默认的16号字体大小和默认的白色绘制了字符"9"。

绘制效果：
image.png
可以看到draw_char()绘制的字符是以左下角为绘制位置，向上，向左绘制的。
注意：如果给draw_char()传入的字符串长度不为1会报错，也就是说绘制空字符串或者长度大于1的字符串都会报“长度不为1”的错：
image.png

绘制字符串

将draw_char()换为draw_string()就可以绘制字符串了：

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))var font = ThemeDB.fallback_fontdraw_string(font,Vector2(),"绘制文本测试")

绘制效果：
image.png
可以看到依然是从左下角位置开始。

设定文本裁切

draw_string(font,Vector2(),"绘制文本测试",HORIZONTAL_ALIGNMENT_CENTER,50)

上面的代码设定draw_string()的width参数为50，这意味着超过50像素的宽度后，字符串会被裁剪。
image.png

绘制文本描边

通过draw_string_outline()可以绘制文本的描边。

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))var font = ThemeDB.fallback_fontdraw_string(font,Vector2(),"绘制文本测试")draw_string_outline(font,Vector2(),"绘制文本测试",0,-1,16,1,Color.BLACK)

image.png

计算和绘制字符串矩形

如果我们想更好的控制绘制的字符串，必须要获取字符绘制的矩形区域信息。

  • Font的get_string_size()可以返回相应字体和设置下一段字符串所占据的矩形区域尺寸。
  • 返回的尺寸宽度是比较精确的，但是高度有很大的偏差，因为它返回的是字体中所有字形的平均高度。

以下面代码为例：

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))# 设定文本和字体var font = ThemeDB.fallback_fontvar text = "中文123abcghx"var font_size = 56var alignment = HORIZONTAL_ALIGNMENT_CENTERvar size = font.get_string_size(text,alignment,-1,font_size)# 获取字符串的矩形区域var string_rect = Rect2(Vector2(0,-size.y),size)# 绘制字符串的矩形区域draw_rect(string_rect,Color.BROWN)# 绘制文本draw_string(font,Vector2(),text,alignment,-1,font_size)

绘制的效果：
image.png
可以看到获取的字符串区域有一定的偏差。尤其是高度部分。所以我们需要其他的思路来降低这种误差。
这里补充一点额外的东西：

  • 英文字体设计中有基线的概念，因为英文小写字母有的顶部会延伸出去一部分，而有的会在底部延伸出一部分。为了美观，就以一个基准线来排列，也就是基线。
  • 在Godot的Font类中，以基线将英文小写字母的高度分为了两部分，分别可以用get_ascent和get_descent获取这两部分的值。

image.png
经过实际测试：

  • Font的get_string_size()或get_height()返回的高度，减去get_descent()，是最接近真实的高度。
  • 而Font的get_string_size()或get_height()返回的高度，减去2倍的get_descent()，就是最接近中文和阿拉伯数字真实的高度。

据此，我编写了以下两个函数：

# 获取字符串的尺寸
func get_string_size(font:Font,string:String,alignment:HorizontalAlignment=HORIZONTAL_ALIGNMENT_LEFT,width:=-1,font_size:=16):var w = font.get_string_size(string,alignment,width,font_size).xvar h = font.get_height(font_size) - font.get_descent(font_size)return Vector2(w,h)# 获取字符串的矩形
func get_string_rect(font:Font,string:String,alignment:HorizontalAlignment=HORIZONTAL_ALIGNMENT_LEFT,width:=-1,font_size:=16):var size = get_string_size(font,string,alignment,width,font_size)var pos = Vector2(0,-(size.y - font.get_descent(font_size)))return Rect2(pos,size)
  • get_string_size()：获取更接近真实的字符串尺寸
  • get_string_rect()：获取更接近真实的字符串矩形区域

改进后的代码：

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))# 设定文本和字体var font = ThemeDB.fallback_fontvar text = "中文123abcghx"var font_size = 56var alignment = HORIZONTAL_ALIGNMENT_CENTER# 获取字符串的矩形区域var string_rect = get_string_rect(font,text,alignment,-1,font_size)# 绘制字符串的矩形区域draw_rect(string_rect,Color.BROWN)# 绘制文本draw_string(font,Vector2(),text,alignment,-1,font_size)

绘制效果：
image.png

绘制换行文本

使用CanvasItem的draw_multiline_string()方法，可以绘制换行文本。

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))# 设定文本和字体var font = ThemeDB.fallback_fontvar text = "中文123abcghx"var font_size = 56var alignment = HORIZONTAL_ALIGNMENT_CENTERvar width = 160var size = font.get_multiline_string_size(text,alignment,width,font_size)var d = font.get_descent(font_size)# 获取字符串的矩形区域var string_rect = Rect2(Vector2(0,-size.y/2),size)# 绘制字符串的矩形区域draw_rect(string_rect,Color.BROWN)# 绘制多行文本draw_multiline_string(font,Vector2(),text,0,width,font_size)

同样，可以看到获得的实际矩形，不是很精确：
image.png

使用TextLine和TextParagraph

Godot封装了更好用的单行文本和段落文本类，不仅更易于理解和使用，而且获得的文本矩形也更精确，可以获得更好的控制。
所以我个人建议是在绘制文本时直接构造TextLine和TextParagraph实例，而完全弃用CanvasItem内置字符和字符串绘制函数。

使用TextLine构造和绘制单行文本

extends Node2D# 设定文本和字体
var font = ThemeDB.fallback_font
var font_size = 56
var pos = Vector2(200,200)func _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),pos),Color.AQUA)# 修改绘图坐标原点draw_set_transform(pos)# 创建单行文本var text = TextLine.new()text.add_string("单行文本测试",font,font_size) # 修改绘图坐标原点# 绘制单行文本的矩形区域draw_rect(Rect2(Vector2(),text.get_size()),Color.BROWN)# 绘制单行文本text.draw(get_canvas_item(),Vector2())

在上面的代码中：

  • 通过TextLine.new()创建了TextLine的实例text
  • 通过add_string()方法向text添加了一段文本
  • 通过text的draw()方法，绘制文本

绘制效果：
image.png
可以看到TextLine的绘制方式就比较符合直觉了，而且获取的矩形区域也比较精确。

设定宽度和裁切文本

TextLine可以设定最大宽度width，超过这个宽度的文本将不会被绘制。

extends Node2Dfunc _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))# 设定文本和字体var font = ThemeDB.fallback_fontvar font_size = 56 # 创建单行文本var text = TextLine.new()text.add_string("ha ha ho ho heiehi hiehie ",font,font_size)text.width = 160   # 限制宽度# 绘制单行文本的矩形区域draw_rect(Rect2(Vector2(),text.get_size()),Color.BROWN)# 绘制单行文本text.draw(get_canvas_item(),Vector2())

绘制效果：
image.png

使用TextParagraph构造和绘制段落文本

extends Node2D# 设定文本和字体
var font = ThemeDB.fallback_font
var font_size = 56 func _draw() -> void:# 绘制坐标原点到绘图原点的矩形draw_rect(Rect2(Vector2(),Vector2(200,200)),Color.AQUA)# 修改绘图坐标原点draw_set_transform(Vector2(200,200))# 创建TextParagraphvar textP = TextParagraph.new()textP.add_string("ha ha ho ho",font,font_size)textP.width = 160   # 限制宽度# 绘制单行文本的矩形区域draw_rect(Rect2(Vector2(),textP.get_size()),Color.BROWN)# 绘制多行文本textP.draw(get_canvas_item(),Vector2())

image.png

  • 注意，设定换行宽度后，英文将以空格作为自动换行的依据之一，在标点符号后要加一个空格才能正常的自动换行。比如："Hello,my Godot"必须在每个标点之后添加一个空格成为"Hello, my Godot"才能正确换行：

image.pngimage.png

  • 前者因为没有在逗号后面加空格，所以没有正确的自动换行。
  • 或者你也可以添加换行符\n来强制换行。
  • 你可以认为，英文有两种换行，一种是基于单词的换行，也就是空格隔开的内容。另一种是强制换行，也就是手动加\n。
  • 中文的规则则简单的多，可以正确的自动换行，当然也可以使用强制换行。

image.png

总结

  • 本节简要讲述了CanvasItem内置的字符和字符串绘制函数及其缺点
  • 然后讲述了更好用的TextLine和TextParagraph，用于绘制单行和多行文本。
  • 实际上TextLine和TextParagraph好有很多特性和功能，可以让我们轻松实现很多东西。但是篇幅所限，留到下节。
  • 对于文本绘制的综合使用，也会专门留几个案例，也是相当有趣。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/814346.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决vue3更新chunk包后，点击页面报错

解决vue3更新chunk包后，点击页面报错

出现错误 解决思路 试了好多方法，跳了很多坑，router版本对不上，解决方案不实用。最后我直接捕获异常，刷新页面，解决最快最有效。 // vue-rotuer版本 "vue-router": "^4.0.3"解决方案 在router/…
阅读更多...
路由器配置实验--R1---R5

路由器配置实验--R1---R5

R1的路由表中默认存在:192.168.1.0192.168.3.0 需要添加:192.168.2.0 4.0 5.0 R2的路由表中默认存在:192.168.1.0192.168.2.0需要添加:192.168.3.0 4.0 5.0 R3的路由表中默认存在:192.168.3.0192.168.4.0需要添加: 1.0 2.0 5.0 R4的路由表中默认存在:192.168.2.0 192.168.4.0…
阅读更多...
面试算法-164-K 个一组翻转链表

面试算法-164-K 个一组翻转链表

题目 给你链表的头节点 head ，每 k 个节点一组进行翻转，请你返回修改后的链表。 k 是一个正整数，它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍，那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内…
阅读更多...
深入微服务框架：构建高效、可扩展与弹性的现代应用架构

深入微服务框架：构建高效、可扩展与弹性的现代应用架构

前言：当今快速迭代和多变的商业环境中，传统的单体应用程序面临着一系列挑战，包括难以管理复杂性、缺乏灵活性以及无法有效扩展等问题。随着业务需求的不断增长和技术栈的不断演进，企业亟需一种更加模块化、易于管理和扩展的应用程…
阅读更多...
给你的AppImage创建桌面快捷方式

给你的AppImage创建桌面快捷方式

原文链接 https://www.cnblogs.com/HGNET/p/16396589.html 运行环境:Ubuntu 22.04 LTS 1.首先准备好AppImage文件并放在一个你知道的地方 2.打开终端，在/usr/share/applications下新建APP.desktop文件（APP可以改成你的应用名称） cd /usr/s…
阅读更多...
在 Elasticsearch 中扩展 ML 推理管道：如何避免问题并解决瓶颈

在 Elasticsearch 中扩展 ML 推理管道：如何避免问题并解决瓶颈

作者：来自 Elastic Iulia Feroli 是时候考虑语义搜索运营了吗？ 无论你是一位经验丰富的搜索工程师，希望探索新的人工智能功能，还是一位机器学习专家，希望更多地利用搜索基础设施来增强语义相似性模型 —— 充分利用这…
阅读更多...
易舟云财务软件免费版和专业版有什么区别？

易舟云财务软件免费版和专业版有什么区别？

文章目录 1、价格（1）免费版（2）专业版 2、版本功能（1）免费版（2）专业版 1、价格 （1）免费版 永久免费！ （2）专业版 298元/…
阅读更多...
笔记本台式机电脑 “睡眠和休眠”有什么区别，那个更省电

笔记本台式机电脑 “睡眠和休眠”有什么区别，那个更省电

笔记本台式机电脑 Windows 系统里睡眠和休眠有什么区别，睡眠和休眠那个更省电，睡眠和休眠使用那个更好，当不用电脑时，通常有三种方式让电脑休息：关机、睡眠和休眠。关机的定义大家都懂，但睡眠和休眠就容易让…
阅读更多...
OpenHarmony应用集成和固件集成中C库差异化分析

OpenHarmony应用集成和固件集成中C库差异化分析

背景 OpenHarmony中，三方库的使用有两种方式： 一、固件集成 三方库经由OpenHarmony构建框架编译出的动态库或静态库，打包到rom中 二、应用集成 三方库经由IDE（通过IDE中的cmake）编译出的动态库或静态库&#xff0…
阅读更多...
kafka学习笔记03

kafka学习笔记03

SpringBoot2.X项目搭建整合Kafka客户端依赖配置 用自己对应的jdk版本。 先加上我们的web依赖。 添加kafka依赖: SpringBoot2.x整合Kafka客户端adminApi单元测试 设置端口号。 新建一个kafka测试类： 创建一个初始化的Kafka服务。 设置kafka的名称。 测试创建kafka。…
阅读更多...
MySQL-进阶篇-基础架构：一条sql查询语句是如何执行的

MySQL-进阶篇-基础架构：一条sql查询语句是如何执行的

摘自：01 | 基础架构：一条SQL查询语句是如何执行的？-MySQL实战45讲-极客时间 视频讲解：7分钟精通MySql中SQL执行原理_哔哩哔哩_bilibili 可结合学习，本文仅记录SQL语句的执行流程，以上内容有一些额外知识未…
阅读更多...
学习MQ异步

学习MQ异步

1.MQ异步调用的优势 事件驱动模式： 优势： 总结： 2.初识MQ 核心概念以及结构： 常见的消息模型： 基本消息队列模型： 生产者代码： Testpublic void testSendMessage() throws IOException, Timeo…
阅读更多...
C语言之_Generic用法实例(九十一)

C语言之_Generic用法实例(九十一)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…
阅读更多...
政安晨：【Keras机器学习实践要点】（三十）—— 使用斯温变换器进行图像分类

政安晨：【Keras机器学习实践要点】（三十）—— 使用斯温变换器进行图像分类

目录 设置 配置超参数 准备数据 辅助函数 基于窗口的多头自注意力计算 模型训练与评估 准备 tf.data.Dataset 建立模型 在 CIFAR-100 上训练 政安晨的个人主页：政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政…
阅读更多...
[StartingPoint][Tier2]Included

[StartingPoint][Tier2]Included

LXD https://www.hackingarticles.in/lxd-privilege-escalation/ Task 1 What service is running on the target machine over UDP? （目标机器上通过UDP运行的服务是什么？） $ nmap -sU 10.129.232.86 -p 69 tftp Task 2 What class o…
阅读更多...
DRF多表关联的序列化和反序列化

DRF多表关联的序列化和反序列化

DRF多表关联的序列化和反序列化 目录 DRF多表关联的序列化和反序列化序列化定制字段source一对多的序列化 多表关联的序列化方式1：在表模型中定义方法方式2：定制返回格式SerializerMethodField方式3：子序列化 多表关联的反序列化反序列化保存…
阅读更多...
Linux【实战篇】—— NFS服务搭建与配置

Linux【实战篇】—— NFS服务搭建与配置

目录 一、介绍 1.1什么是NFS？ 1.2客户端与服务端之间的NFS如何进行数据传输？ 1.3RPC和NFS的启动顺序 1.4NFS服务 系统守护进程 二、安装NFS服务端 2.1安装NFS服务 2.2 创建共享目录 2.3创建共享目录首页文件 2.4关闭防火墙 2.5启动NFS服务 2.…
阅读更多...
秋叶Stable diffusion的创世工具安装-带安装包链接

秋叶Stable diffusion的创世工具安装-带安装包链接

来自B站up秋葉aaaki，近期发布了Stable Diffusion整合包v4.7版本，一键在本地部署Stable Diffusion！！ 适用于零基础想要使用AI绘画的小伙伴~本整合包支持SDXL，预装多种必须模型。无需安装git、python、cuda等任何内容&am…
阅读更多...
day9 | 栈与队列 part-1 (Go) | 232 用栈实现队列、225 用队列实现栈

day9 | 栈与队列 part-1 (Go) | 232 用栈实现队列、225 用队列实现栈

今日任务 栈与队列的理论基础 (介绍:代码随想录)232 用栈实现队列(题目: . - 力扣（LeetCode）)225 用队列实现栈 (题目: . - 力扣（LeetCode） ) 栈与队列的理论基础 栈 : 先进后出 队列: 后进先出 老师给的讲解:代码随想录 …
阅读更多...
记一次centos合并excel,word,png,pdf为一个整体pdf的入坑爬坑过程（一直显示宋体问题）。

记一次centos合并excel,word,png,pdf为一个整体pdf的入坑爬坑过程（一直显示宋体问题）。

一、背景 原先已经简单实现了excel,word,png,pdf合成一个整体pdf的过程。并将它弄到docker容器中。 1、原先入坑的技术栈 php:7.4 (业务有涉及)php第三方包 setasign\Fpdi\Fpdi : 2.3.6 （pdf合并）libreoffice : 5.3.6.1ImageMagick: 6.9.10-68 2、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023