【Godot4.3】绘图函数的类化封装尝试——CanvasShape

最新推荐文章于 2024-09-01 23:02:46 发布

巽星石

最新推荐文章于 2024-09-01 23:02:46 发布

阅读量585

点赞数 7

分类专栏：【Godot4.x】自定义类 Godot4.x 几何与绘图文章标签：绘图 godot 游戏引擎

本文链接：https://blog.csdn.net/graypigen1990/article/details/141785764

版权

Godot4.x 几何与绘图同时被 2 个专栏收录

28 篇文章 5 订阅

订阅专栏

【Godot4.x】自定义类

4 篇文章 1 订阅

订阅专栏

概述

这是2024年7月份的一项工作，在研究外XML和SVG解析与生成过后，想到可以将自己写的绘图函数库ShapePoints拆分为图形类，于是就有了CanvasShape类。它包含了从填充、轮廓、阴影、虚线、顶点和中心点绘制的全部要素。只需要给定points属性和调用draw()方法就可以在CanvasItem节点上绘制大多数多边形和折线了。
CanvasShape与原来的绘图函数库体系
CanvasShapeGroup是一个可以包含多个CanvasShape或CanvasShapeGroup的元素，基于它，可以创建树形的图形元素结构。方便动态管理和输出保存。

是否创建子类型的考虑

原本的打算是基于类的继承形式，创建CanvasShape的子类型，来表示各种具体的图形元素，如果是单纯的绘制图形，完全没有必要写这些子类型。但是如果要进行文档化处理，就需要设计各种子类。所以好的思路是不去破坏原来的ShapePoints函数库，而是建立一套独立的CanvasShape体系。

CanvasShape

作为所有CanvasItem可绘制图形的基类。提供共同的属性和方法，尤其是图形参数、点集合和绘制选项，以及绘制方法。

# =============================================
# 名称：CanvasShape
# 类型：类
# 描述：CanvasItem绘图函数图形基类
# 作者：巽星石
# 创建时间：2024年7月25日15:25:24
# 最后修改时间：2024年7月25日20:23:58
# =============================================
class_name CanvasShape
# ============================== 属性 ==============================
# -------------------- 基础样式 
var border_width:int = 1               # 轮廓线宽度
var border_color:Color = Color.BLACK   # 轮廓线颜色
var fill_color:Color = Color.WHITE     # 填充颜色
var dash = 0.0                         # 虚线间隔
# -------------------- 路径点 
var points:PackedVector2Array = []     # 点集合
var close_path:bool = false            # 是否闭合轮廓线
# -------------------- 变换 
var position:Vector2 = Vector2.ZERO    # 绘制位置
# -------------------- 阴影设置 
var has_shadow:bool = false                   # 是否显示阴影
var shadow_color:Color = Color(Color.BLACK.lightened(0.1),0.6)       # 阴影颜色
var shadow_offset:Vector2 = Vector2(10,10)    # 阴影偏移
# -------------------- 绘制设置 
var draw_border:bool = true            # 是否绘制轮廓
var draw_fill:bool = true              # 是否绘制填充
var draw_points:bool = false           # 是否绘制顶点
var draw_position:bool = false         # 是否绘制局部坐标系原点
var draw_rect2:bool = false            # 是否绘制矩形范围

# 顶点绘制参数
var point_r = 3
var point_border_width:int = 1         # 顶点轮廓线宽度
var point_border_color:Color = Color.BLACK   # 顶点轮廓线颜色
var point_fill_color:Color = Color.WHITE     # 顶点填充颜色
# 矩形范围绘制参数
var rect2_border_width:int = 1               # 矩形轮廓线宽度
var rect2_border_color:Color = Color.AQUAMARINE   # 矩形轮廓线颜色

# ============================== 方法 ==============================
func draw(canvas:CanvasItem) -> void:
	# 对所有点进行位移变换
	var points = Transform2D().translated(position) * points
	
	# 1.绘制阴影
	if has_shadow:
		var shadow_points = Transform2D().translated(shadow_offset) * points
		canvas.draw_colored_polygon(shadow_points,shadow_color) 
	# 2.绘制矩形范围
	if draw_rect2:
		canvas.draw_rect(get_rect(),Color(rect2_border_color,0.5),false,rect2_border_width)
	# 3.绘制填充
	if draw_fill and fill_color:
		canvas.draw_colored_polygon(points,fill_color)
	# 4.绘制轮廓
	if draw_border and border_width!=0 and border_color!=null:
		var close_points = points.duplicate()
		# 闭合
		if close_path:
			close_points.append(close_points[0])
		if dash>0.0:  # 虚线间隔大于0
			for seg in segments(close_points):
				canvas.draw_dashed_line(seg[0],seg[1],border_color,border_width,dash)
			pass
		else:
			canvas.draw_polyline(close_points,border_color,border_width)   # 绘制实现闭合轮廓
	# 5.绘制顶点
	if draw_points:
		for p in points:
			# 绘制圆点
			canvas.draw_circle(p,point_r,point_fill_color)
			# 绘制边线
			canvas.draw_arc(p,point_r,0,TAU,TAU * point_r,point_border_color,point_border_width/2.0,true)
	# 6.绘制位置点
	if draw_position:
		var line_count = 4
		var ang = 360.0/float(line_count)  # 每次旋转角度
		for i in range(line_count):
			var p1 = position
			var p2 = p1 + pVector2(ang * i,5)
			canvas.draw_line(p1,p2,border_color,border_width)

# 获取图形的矩形
func get_rect() -> Rect2:
	# 对所有点进行位移变换
	var points = Transform2D().translated(position) * points
	# 拆分出X坐标和Y坐标数组
	var x_arr = []
	var y_arr = []
	for p in points:
		x_arr.append(p.x)
		y_arr.append(p.y)
	# 最小值构成Rect2的position
	var pos = Vector2(x_arr.min(),y_arr.min())
	
	# 最大值 - pos = Rect2 的 size
	var siz = Vector2(x_arr.max(),y_arr.max()) - pos
	
	print(pos,"   ",siz)
	return Rect2(pos,siz)

# ============================== 子类通用函数 ==============================
# 极坐标点函数 - 通过角度和长度定义一个点
func pVector2(angle:float = 0.0,length:float =0.0) -> Vector2:
	var dir = Vector2.RIGHT.rotated(deg_to_rad(angle))
	return dir * length

# points的点按顺序两两相连的所有线段
func segments(points:PackedVector2Array) -> Array[PackedVector2Array]:
	var arr:Array[PackedVector2Array]
	if points.size() >1:  # 至少有两个点
		for i in range(points.size() -1):
			var seg:PackedVector2Array = [points[i],points[i+1]]
			arr.append(seg)
	return arr

绘制折线

extends Node2D

func _draw() -> void:
	var shape = CanvasShape.new()
	shape.points = [Vector2(0,0),Vector2(50,50),Vector2(150,10),Vector2(250,100)]  # 绘制的点集合
	# 形状参数
	shape.position = Vector2(200,200)
	shape.close_path = false         # 不闭合
	# 绘制参数
	shape.border_width=2
	shape.border_color = Color.ORANGE_RED
	# 绘制选项
	shape.draw_fill = false
	shape.draw_points = true
	shape.draw_position = true
	shape.draw_rect2 = true
	# 绘制
	shape.draw(self)

折线，绘制顶点、Rect2和Position

绘制多边形

extends Node2D

func _draw() -> void:
	var shape = CanvasShape.new()
	shape.points = [Vector2(0,0),Vector2(50,50),Vector2(150,10),Vector2(250,10),Vector2(50,-50)]  # 绘制的点集合
	# 形状参数
	shape.position = Vector2(200,200)
	shape.close_path = true         # 闭合
	# 绘制参数
	shape.border_width=2
	shape.border_color = Color.ORANGE_RED
	shape.fill_color = Color.AQUAMARINE
	# 绘制选项
	shape.has_shadow = true
	# 绘制
	shape.draw(self)

带有阴影、轮廓和填充的多边形

结合ShapePoints使用

ShapePoints本身就是一个常见几何图形顶点求取函数库。通过将求得的图形顶点赋值给CanvasShape实例的points属性，然后就可以调用绘制函数绘制了。

extends  Node2D

func _draw() -> void:
	var shape  = CanvasShape.new()
    # 为CanvasShape实例指定求取的圆角矩形顶点
	shape.points = ShapePoints.round_rect(Vector2(150,100),[5,5,5,5])
	draw_set_transform(Vector2(200,200))  # 设定绘制原点
	shape.draw(self)

另一个实例是绘制五角星：

extends  Node2D

func _draw() -> void:
	var shape  = CanvasShape.new()
	# 为CanvasShape实例指定求取的圆角矩形顶点
	shape.points = ShapePoints.star()
	shape.position = Vector2(300,300) # 设定绘制原点
	
	shape.draw_points = true
	shape.draw_position = true
	shape.draw(self)

CanvasShapeGroup

以往的CanvasItem绘图，都是在_draw()中调用低级的绘图函数绘制。先调用的绘图函数先绘制。在实现CanvasShape之后，第一次有了图形的参数化和对象化。在此基础之上，可以创建一个列表形式，用于管理多个图形，按顺序绘制。并且我们将可以随时修改图形的绘制顺序。
基于这样的想法，我设计了一个名为CanvasShapeGroup的类，它的内部维护一个对象数组_shapes，用来存储CanvasShape或CanvasShapeGroup实例。CanvasShapeGroup也拥有draw()方法，不过其调用后是遍历并调用每个子元素CanvasShape或CanvasShapeGroup的draw()方法。
其实基于CanvasShapeGroup，已经可以实现树状的父子结构，可以用于创建和管理复杂的图形文档。
在这里插入图片描述

源代码

# =============================================
# 名称：CanvasShapeGroup
# 类型：类
# 描述：存放CanvasShape或CanvasShapeGroup的列表形式
#      多层嵌套可以组成树状结构
# 作者：巽星石
# 创建时间：2024年7月25日22:55:00
# 最后修改时间：2024年7月25日23:27:31
# =============================================
class_name CanvasShapeGroup
# ============================== 信号 ==============================
signal order_changed()   # 元素顺序发生改变时触发

# ============================== 属性 ==============================

var _shapes:Array  # 图形或图形组的列表

func _init() -> void:
	_shapes = []

# ============================== 方法 ==============================
# ---------------------------- 添加
# 追加形状
func append_shape(shape:CanvasShape) -> void:
	_shapes.append(shape)

# 追加形状分组
func append_shape_group(gup:CanvasShapeGroup) -> void:
	_shapes.append(gup)
# ---------------------------- 移动
# 移动至最上层
func move_to_topst(index:int) -> void:
	var ele = _shapes[index] # 暂存元素
	_shapes.remove_at(index) # 移除
	_shapes.push_back(ele)  # 添加到最后面
	emit_signal("order_changed")

#  移动至最下层
func move_to_bottomst(index:int) -> void:
	var ele = _shapes[index] # 暂存元素
	_shapes.remove_at(index) # 移除
	_shapes.push_front(ele)  # 添加到最前面
	emit_signal("order_changed")

# 往上一层
func move_to_top(index:int) -> void:
	var ele = _shapes[index] # 暂存元素
	_shapes.remove_at(index) # 移除
	_shapes.push_back(ele)  # 添加到最后面
	emit_signal("order_changed")

# 往下一层
func move_to_bottom(index:int) -> void:
	var ele = _shapes[index] # 暂存元素
	_shapes.remove_at(index) # 移除
	_shapes.push_back(ele)  # 添加到最后面
	emit_signal("order_changed")
# ---------------------------- 绘制
# 遍历调用图形和分组的draw()方法
func draw(canvas:CanvasItem) -> void:
	for shape in _shapes:
		shape.draw(canvas)

绘制测试

extends Node2D

var shapes = CanvasShapeGroup.new()  # 图形列表


func _ready() -> void:
	# 处理 CanvasShapeGroup 的 order_changed 信号
	shapes.order_changed.connect(func():
		queue_redraw()
	)
	
	# 六边形
	var shape1 = CanvasRegularPolygon.new()
	shape1.position = Vector2(200,200)
	shape1.edges = 6
	shape1.r = 50
	shape1.close_path = true
	shapes.append_shape(shape1)
	# 五边形
	var shape2 = CanvasRegularPolygon.new()
	shape2.position = Vector2(230,250)
	shape2.edges = 5
	shape2.r = 50
	shape2.close_path = true
	shapes.append_shape(shape2)


func _draw() -> void:
	# 绘制
	shapes.draw(self)


func _on_top_btn_pressed() -> void:
	shapes.move_to_topst(0)
	pass

我们创建了包含两个图形（一个正六边形，一个正五边形）的CanvasShapeGroup，默认会按先后顺序进行绘制。
我们用一个按钮测试，对CanvasShapeGroup中最前面的图形，执行置顶操作。因为只有两个图形，所以两个图形的顺序会反复交替。

后期设想

通过矩形检测鼠标位置是否在矩形内，可以判断图形是否被选择
通过绘制矩形选框，可以判断图形的矩形是否完全在选框内，或者与选框有部分交集，从而实现矩形框的选择形式
通过右键菜单或快捷键形式，可以设定图形的绘制顺序
CanvasShapeGroup可以实现嵌套的树形结构，可以通过遍历和递归来获取图形的SVG或自定义XML、JSON或ConfigFile形式
可以用Tree控件查看和编辑整个页面的元素。

巽星石

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Godot4.3】绘图函数的类化封装尝试——CanvasShape

这是2024年7月份的一项工作，在研究外XML和SVG解析与生成过后，想到可以将自己写的绘图函数库拆分为图形类，于是就有了类。它包含了从填充、轮廓、阴影、虚线、顶点和中心点绘制的全部要素。只需要给定points属性和调用draw()方法就可以在CanvasItem节点上绘制大多数多边形和折线了。是一个可以包含多个或的元素，基于它，可以创建树形的图形元素结构。方便动态管理和输出保存。
复制链接

扫一扫