【Godot4.2】CanvasItem绘图函数全解析

【Godot4.2】CanvasItem绘图函数全解析 - 7.自定义节点TextBoard

概述

之前发布的几篇文章几乎阐述了CanvasItem绘图函数最基础的内容。
本篇结合draw_style_box()和TextParagraph类，自定义了一个可以自适应宽高显示多行文本，且带有一个样式盒作为背景的文字板节点TextBoard。

系列目录

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

完整代码

# ========================================================
# 名称：TextBoard
# 类型：自定义Node2D
# 简介：一个可以自适应显示多行文本的节点,并带有一个边框样式盒
# 作者：巽星石
# Godot版本：v4.2.1.stable.official [b09f793f5]
# 创建时间：2024年4月8日21:15:22
# 最后修改时间：2024年4月8日22:45:38
# ========================================================@tool
class_name TextBoard
extends Node2Dvar style_box:StyleBoxFlat       # 样式盒
var font:Font = ThemeDB.fallback_font# ======================= 参数 =============================
## 样式盒背景色
@export var bg_color:= Color.WHITE:set(val):bg_color = valstyle_box.bg_color = valqueue_redraw()## 样式盒内边距
@export var padding:float = 5.0:set(val):padding = valstyle_box.content_margin_bottom = valstyle_box.content_margin_top = valstyle_box.content_margin_left = valstyle_box.content_margin_right = valqueue_redraw()
# ----------------------- 边框设定 ----------------------- 
@export_group("border")
## 样式盒边框色
@export var border_color:= Color.GRAY:set(val):border_color = valstyle_box.border_color = valqueue_redraw()## 样式盒边框宽度
@export var border_width:int = 0:      set(val):border_width = valstyle_box.border_width_top = valstyle_box.border_width_bottom = valstyle_box.border_width_left = valstyle_box.border_width_right = valqueue_redraw()## 样式盒边框圆角
@export var conner:int = 0:set(val):conner = valstyle_box.corner_radius_bottom_left = valstyle_box.corner_radius_top_left = valstyle_box.corner_radius_top_right = valstyle_box.corner_radius_bottom_right = valqueue_redraw()
# ----------------------- 文本设定 ----------------------- 
@export_group("text")
## 要显示的文本内容
@export_multiline var text:String:set(val):text = valqueue_redraw()
## 单行最大宽度，用于自动换行
@export var max_width:=-1: set(val):max_width = valqueue_redraw()
## 字号
@export var font_size:int = 16:set(val):font_size = valqueue_redraw()## 字色	
@export var font_color:= Color.WHITE:set(val):font_color = valqueue_redraw()# ======================= 虚函数 =============================
# 初始化
func _init() -> void:style_box = StyleBoxFlat.new()# 绘图
func _draw() -> void:# 创建单行文本var p = TextParagraph.new()p.add_string(text,font,font_size)p.width = max_width  # 限制宽度# 绘制单行文本的矩形区域var m = Vector2(padding + border_width,padding + border_width)var size = p.get_size() + 2 * mdraw_style_box(style_box,Rect2(-size/2,size))# 绘制多行文本p.draw(get_canvas_item(),-size/2 + m,font_color)