鑫三科技网站设计,东莞外贸优化公司,产品宣传册设计与制作,学校网站资源建设方案概述
同样是来自2023年7月份的一项实验性工作#xff0c;基于纯绘图函数扩展的一套线框图控件。初期只实现了三个组件#xff0c;矩形、占位框和垂直滚动条。 本文中的三个控件类已经经过了继承化的修改#xff0c;使得代码更少。它们的继承关系如下#xff1a; 源代码
W…概述
同样是来自2023年7月份的一项实验性工作基于纯绘图函数扩展的一套线框图控件。初期只实现了三个组件矩形、占位框和垂直滚动条。 本文中的三个控件类已经经过了继承化的修改使得代码更少。它们的继承关系如下 源代码
WireFrameRect矩形
#
# 名称WireFrameRect
# 类型控件
# 简介线框图矩形
# 作者巽星石
# Godot版本4.1-stable (official)
# 创建时间2023-07-08 03:13:48
# 最后修改时间2024年9月2日22:44:34
#
tool
class_name WireFrameRect extends Control
# 参数
# 背景颜色
export var bk_color:Color Color.WHITE:set(val):bk_color valqueue_redraw()# 线条颜色
export var line_color:Color Color.BLACK:set(val):line_color valqueue_redraw()# 线条宽度
export var line_width:int 1:set(val):line_width valqueue_redraw()# 绘制
func _draw():draw_rect2(get_draw_safety_rect())# 自定义函数
# 获取绘制函数能正确使用的控件Rect2
func get_draw_safety_rect() - Rect2:var rect get_rect()return Rect2(rect.position - position,rect.size/scale)# 绘制带填充和轮廓的矩形
func draw_rect2(rect:Rect2,bg_color : bk_color,border_color : line_color,border_width : line_width,canvas:CanvasItem self,
) - void:canvas.draw_rect(rect,bg_color) # 绘制填充canvas.draw_rect(rect,border_color,false,border_width) # 绘制外框WireFrameBox占位框
#
# 名称WireFrameBox
# 类型控件
# 简介线框图占位框带对角线
# 作者巽星石
# Godot版本4.1-stable (official)
# 创建时间2023-07-08 03:13:48
# 最后修改时间2024年9月2日22:19:32
#
tool
class_name WireFrameBox extends WireFrameRect
# 绘制
func _draw():var rect get_draw_safety_rect()super._draw() # 调用父类绘制基础矩形# 绘制对角线draw_line(rect.position,rect.end,line_color,line_width)var width Vector2.RIGHT * rect.size.xdraw_line(rect.position width,rect.end - width,line_color,line_width)WireFrameVScrollBar垂直滚动条
#
# 名称WireFrameVScrollBar
# 类型控件
# 简介线框图垂直滚动条
# 作者巽星石
# Godot版本4.1-stable (official)
# 创建时间2023-07-08 03:13:48
# 最后修改时间2024年9月2日22:44:19
#
tool
class_name WireFrameVScrollBar extends WireFrameRect
# 参数
# 按钮 - 背景颜色
export var btn_bk_color:Color Color.DARK_GRAY:set(val):btn_bk_color valqueue_redraw()# 滑动条 - 背景颜色
export var bar_bk_color:Color Color.DARK_GRAY:set(val):bar_bk_color valqueue_redraw()# 绘图
func _draw():var rect get_draw_safety_rect()super._draw() # 调用父类绘制基础矩形# 绘制顶部和底部按钮var btn_size Vector2.ONE * rect.size.x # 按钮宽度var top_btn_rect Rect2(rect.position,btn_size) # 顶部矩形var bottom_btn_rect Rect2(rect.end - btn_size,btn_size)draw_rect2(top_btn_rect,btn_bk_color)draw_rect2(bottom_btn_rect,btn_bk_color)# 绘制中间滑动条var bar_pos Vector2(0,btn_size.y10)var bar_size Vector2(rect.size.x,rect.size.y - 2 * btn_size.y - 30)var bar_rect Rect2(bar_pos,bar_size) #滑动条矩形draw_rect2(bar_rect,bar_bk_color)使用方法
在UI场景中可以通过“添加节点”对话框自由添加。然后通过拖动修改位置再通过检视器面板设定相应的颜色样式和轮廓宽度等。 总结
这也是一项很随意的试验性工作初期并没有采用类的继承所以参数有很多重复代码经过改进之后代码量下降而且可以很好的进行拓展。你可能会问在Godot这么简单的软件中还需要线框图嘛直接干不就行了。但其实线框图作为一个设计阶段的工具对整体策划和把握还是有一定作用的。尤其是对UI界面设计。目前因为组件少当然还发挥不了很强的UI界面设计能力但是后期组件丰富后应该也能便捷的用于Godot程序或游戏流程的原型设计。尤其是加入一些跳转场景等功能之后。
