概述

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

最常见的形式就是用一个圆圈作为背景，用阿拉伯数字作为索引。

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

系列目录

• 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):
	# 构造TextLine
	var 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 Node2D

var points:PackedVector2Array

func _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 Node2D

var points:PackedVector2Array

func _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 Node2D

var points:PackedVector2Array

func _ready() -> void:
	var pos = Vector2(500,300)
	var right = Vector2.RIGHT
	var step = 30
	var r1 = 200
	var r2 = 160
	
	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)
	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):
	# 构造TextLine
	var 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 Node2D

var points:PackedVector2Array

var pos = Vector2(500,300)
var right = Vector2.RIGHT
var step = 30
var r1 = 200
var r2 = 160

func _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 Node2D

var points:PackedVector2Array

var pos = Vector2(500,300)
var right = Vector2.RIGHT
var step = 12
var r1 = 200

func _ready() -> void:
	for i in range(step):
		var ag = deg_to_rad(360.0/step)
		var p = pos + right.rotated(ag * i) * r1
		points.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/step
	draw_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)

绘制效果：

总结

• 标记和绘制点索引是一种很常用且重要的效果
• 本文只是涉及了点索引在几何图形上的使用，实际上可以将它使用在类似标记AStar路径点这样的功能上，让原本抽象的内容一下子变得清晰