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

【Godot4.2】CanvasItem绘图函数全解析 - 8.绘制点索引

概述

在示意图绘制过程中或者测试过程中，可能需要标记点的索引。

最常见的形式就是用一个圆圈作为背景，用阿拉伯数字作为索引。
在这里插入图片描述

实现的重点是动态计算背景圆的半径。原理是，获取字符串的矩形，取对角线长度的一半作为外接圆的半径。

系列目录

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

绘图函数实现

# 绘制带有编号的圆，用于标记几何图形顶点
func draw_point_idx(canvas:RID,pos:Vector2,index:int,bg_color:=Color.YELLOW,color:=Color.BLACK,font_size:=16,font:Font = ThemeDB.fallback_font):# 构造TextLinevar text = TextLine.new()text.add_string(str(index),font,font_size) # 按设置的字体和字号添加编号var offset_pos = pos - text.get_size()/2.0  # 文本矩形中心对齐到pos# 文本的矩形区域var rect = Rect2(offset_pos,text.get_size())# 半径 = 对角线长度的一半var r = text.get_size().length()/2.0# 绘制外接圆draw_circle(rect.get_center(),r,bg_color)## 绘制文本矩形区域#draw_rect(rect,Color.DARK_GRAY)# 绘制字符串text.draw(canvas,offset_pos,color)

测试1

extends Node2Dvar points:PackedVector2Arrayfunc _ready() -> void:for i in range(6):points.append(Vector2(300,200) + Vector2.RIGHT.rotated(deg_to_rad(360.0/6 * i)) * 100)func _draw() -> void:draw_colored_polygon(points,Color.YELLOW_GREEN)for i in range(points.size()):draw_point_idx(get_canvas_item(),points[i],i,Color.YELLOW,Color.BLACK,10)

效果：

测试2

extends Node2Dvar points:PackedVector2Arrayfunc _ready() -> void:for i in range(6):points.append(Vector2(300,200) + Vector2.RIGHT.rotated(deg_to_rad(360.0/6 * i)) * 100)points.append(Vector2(300,200) + Vector2.RIGHT.rotated(deg_to_rad(360.0/6 * i)) * 50)func _draw() -> void:draw_colored_polygon(points,Color.YELLOW_GREEN)for i in range(points.size()):draw_point_idx(get_canvas_item(),points[i],i,Color.YELLOW,Color.BLACK,10)

测试3

extends Node2Dvar points:PackedVector2Arrayfunc _ready() -> void:var pos = Vector2(500,300)var right = Vector2.RIGHTvar step = 30var r1 = 200var r2 = 160for i in range(step):var ag = deg_to_rad(360.0/step)points.append(pos + right.rotated(ag * i) * r1)points.append(pos + right.rotated(ag * i) * r2)func _draw() -> void:draw_colored_polygon(points,Color.YELLOW_GREEN)for i in range(points.size()):draw_point_idx(get_canvas_item(),points[i],i,Color.YELLOW,Color.BLACK,10)

在这里插入图片描述

实现任意文本标记

修改一下函数的参数，就可以实现任意文本的绘制。

# 绘制带有文本的圆，用于标记几何图形顶点索引或显示坐标等
func draw_point_idx(canvas:RID,pos:Vector2,string:String,bg_color:=Color.YELLOW,color:=Color.BLACK,font_size:=16,font:Font = ThemeDB.fallback_font):# 构造TextLinevar text = TextLine.new()text.add_string(string,font,font_size) # 按设置的字体和字号添加编号var offset_pos = pos - text.get_size()/2.0  # 文本矩形中心对齐到pos# 文本的矩形区域var rect = Rect2(offset_pos,text.get_size())# 半径 = 对角线长度的一半var r = text.get_size().length()/2.0# 绘制外接圆draw_circle(rect.get_center(),r,bg_color)## 绘制文本矩形区域#draw_rect(rect,Color.DARK_GRAY)# 绘制字符串text.draw(canvas,offset_pos,color)

测试代码：

extends Node2Dvar points:PackedVector2Arrayvar pos = Vector2(500,300)
var right = Vector2.RIGHT
var step = 30
var r1 = 200
var r2 = 160func _ready() -> void:for i in range(step):var ag = deg_to_rad(360.0/step)points.append(pos + right.rotated(ag * i) * r1)points.append(pos + right.rotated(ag * i) * r2)func _draw() -> void:draw_colored_polygon(points,Color.YELLOW_GREEN)draw_point_idx(get_canvas_item(),pos,"C",Color(Color.YELLOW,0.5),Color.BLACK,10)for i in range(points.size()):draw_point_idx(get_canvas_item(),points[i],str(i),Color(Color.YELLOW,0.5),Color.BLACK,10)

绘制效果：

综合实例

extends Node2Dvar points:PackedVector2Arrayvar pos = Vector2(500,300)
var right = Vector2.RIGHT
var step = 12
var r1 = 200func _ready() -> void:for i in range(step):var ag = deg_to_rad(360.0/step)var p = pos + right.rotated(ag * i) * r1points.append(p)func _draw() -> void:draw_arc(pos,r1,0,TAU,100,Color.AQUAMARINE,1)    # 外接圆draw_colored_polygon(points,Color.YELLOW_GREEN)  # 多边形# 按顺序标记多边形顶点for i in range(points.size()):draw_line(pos,points[i],Color.DARK_GREEN,1)  # 圆心到多边形顶点的连线draw_point_idx(get_canvas_item(),points[i],str(i),Color(Color.YELLOW,0.5),Color.BLACK,10)# 标记圆心draw_point_idx(get_canvas_item(),pos,"圆心",Color(Color.YELLOW,0.5),Color.BLACK,10)# 标记单个角度var ang = TAU/stepdraw_arc(pos,30,0,ang,100,Color.DARK_GREEN,1)draw_point_idx(get_canvas_item(),pos + right.rotated(ang/2.0) * 40, "%s°" % str(rad_to_deg(ang)),Color(Color.YELLOW,0.0),Color.BLACK,10)