【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 Node2D

var style_box:StyleBoxFlat       # 样式盒
var font:Font = ThemeDB.fallback_font

# ======================= 参数 =============================
## 样式盒背景色
@export var bg_color:= Color.WHITE:
	set(val):
		bg_color = val
		style_box.bg_color = val
		queue_redraw()

## 样式盒内边距
@export var padding:float = 5.0:
	set(val):
		padding = val
		style_box.content_margin_bottom = val
		style_box.content_margin_top = val
		style_box.content_margin_left = val
		style_box.content_margin_right = val
		queue_redraw()
# ----------------------- 边框设定 ----------------------- 
@export_group("border")
## 样式盒边框色
@export var border_color:= Color.GRAY:
	set(val):
		border_color = val
		style_box.border_color = val
		queue_redraw()
		
## 样式盒边框宽度
@export var border_width:int = 0:      
	set(val):
		border_width = val
		style_box.border_width_top = val
		style_box.border_width_bottom = val
		style_box.border_width_left = val
		style_box.border_width_right = val
		queue_redraw()
	
## 样式盒边框圆角
@export var conner:int = 0:
	set(val):
		conner = val
		style_box.corner_radius_bottom_left = val
		style_box.corner_radius_top_left = val
		style_box.corner_radius_top_right = val
		style_box.corner_radius_bottom_right = val
		queue_redraw()
# ----------------------- 文本设定 ----------------------- 
@export_group("text")
## 要显示的文本内容
@export_multiline var text:String:
	set(val):
		text = val
		queue_redraw()
## 单行最大宽度，用于自动换行
@export var max_width:=-1: 
	set(val):
		max_width = val
		queue_redraw()
## 字号
@export var font_size:int = 16:
	set(val):
		font_size = val
		queue_redraw()

## 字色	
@export var font_color:= Color.WHITE:
	set(val):
		font_color = val
		queue_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 * m
	draw_style_box(style_box,Rect2(-size/2,size))
	
	# 绘制多行文本
	p.draw(get_canvas_item(),-size/2 + m,font_color)

效果：