网站主持人制作,118论坛,wordpress负载均衡上传附件,沧州网站建设外贸概述
Godot控件想要完全实现现代UI风格#xff0c;需要进行大量的自定义组件设计。本篇就依托于笔者自己对现代UI设计中的圆角面板元素模仿来制作圆角容器组件。
圆角容器
圆角元素在现代的扁平UI设计中非常常见#xff0c;在Godot中可以通过改进PanelContainer来或者自定…概述
Godot控件想要完全实现现代UI风格需要进行大量的自定义组件设计。本篇就依托于笔者自己对现代UI设计中的圆角面板元素模仿来制作圆角容器组件。
圆角容器
圆角元素在现代的扁平UI设计中非常常见在Godot中可以通过改进PanelContainer来或者自定义容器来实现圆角面板效果。 我初期想基于PanelContainer写一个容器类但是发现比较绕于是还是直接基于Container类型写了一个自定义容器类初期我偏向于直接用绘图函数绘制StyleBox但是当遇到渐变和图片时绘制StyleBox的方式将无法获得圆角所以最后不得不采用绘图函数draw_colored_polygon并且自己计算圆角矩形顶点集合以及计算每个点的UV坐标从而实现一种类似矢量遮罩的效果。
最终实现效果 RadiusPanelContainer
容器的自定义参数如下 实现如下功能
快速获得带圆角的纯色、图片背景包括渐变等的容器可以设定统一的描边颜色、宽度以及圆角大小可以设定子元素的内边距可以设定容器的不透明度 注意 需要搭配常见容器使用第一个子元素也是唯一被正确显示的第一级子元素需要是一个容器类型。 完整代码
#
# RadiusPanelContainer
# 类型自定义容器
# 概述现代化UI系列实现基础的圆角面板元素
# 巽星石
# 创建时间2025年1月3日13:45:32
# 最后修改时间2025年1月3日17:54:39
#
tool
class_name RadiusPanelContainer extends Container# 参数 export var padding:10: ## 内边距set(val):padding valqueue_redraw()export_range(0.0,1.0,0.1) var opacity1.0: ## 透明度set(val):opacity valif val:self_modulate Color(1.0,1.0,1.0,val)queue_redraw()export_group(background)
export var bg_color:Color.WHITE: ## 背景颜色set(val):bg_color valqueue_redraw()export var bg_texture:Texture2D: ## 背景图片set(val):bg_texture valqueue_redraw()export_group(border)
export var border_color:Color.WHITE: ## 边框颜色set(val):border_color valqueue_redraw()export var border_radius:5: ## 圆角半径set(val):border_radius valqueue_redraw()export var border_width:0:## 边线宽度set(val):border_width valqueue_redraw()# 虚函数
func _init() - void:clip_contents truefunc _draw() - void:var rect get_rect() * get_transform()var pots round_rect(rect,border_radius,border_width/2.0)# 绘制背景if bg_texture:var uvs:PackedVector2Arrayfor pot in pots: # 计算UV坐标uvs.append(pot/rect.size)# 绘制圆角矩形draw_colored_polygon(pots,bg_color,uvs,bg_texture)else:draw_polygon(pots,[bg_color])# 绘制边线draw_polyline(pots,border_color,border_width)# 重排子元素queue_sort()func _notification(what: int) - void:var rect get_rect() * get_transform()rect.position Vector2.ONE * paddingrect.size - Vector2.ONE * padding * 2match what:NOTIFICATION_SORT_CHILDREN:if get_child_count()0:fit_child_in_rect(get_children()[0],rect)# 自定义函数
# 求圆弧点集
func arc(c:Vector2,r:float,start_angle:float,end_angle:float,steps:10) - PackedVector2Array:var arr:PackedVector2Arrayvar v1 Vector2.RIGHT * rvar ang deg_to_rad(end_angle - start_angle)/float(steps)for i in range(steps1):arr.append(v1.rotated(ang * float(i) deg_to_rad(start_angle)) c)return arr# 获取圆角矩形
func round_rect(rect:Rect2,r:float,offset:float) - PackedVector2Array:var arr:PackedVector2Arrayvar pots:PackedVector2Array get_rect2_points(rect) # 矩形顶点var vec Vector2.ONE * (r offset) # 圆角偏移向量arr.append_array(arc(pots[0] vec,r,180,270))arr.append_array(arc(pots[1] Transform2D.FLIP_X * vec,r,270,360))arr.append_array(arc(pots[2] vec * -1,r,0,90))arr.append_array(arc(pots[3] Transform2D.FLIP_Y * vec,r,90,180))arr.append(pots[0] vec - Vector2(r,0))return arr# 获取Rect对应的点集合
func get_rect2_points(rect:Rect2) - PackedVector2Array:var arr:PackedVector2Arrayvar pos rect.positionvar end rect.endvar w rect.size.xarr.append(pos)arr.append(pos Vector2.RIGHT * w)arr.append(end)arr.append(end - Vector2.RIGHT * w)return arr提示
这只是个基础版本后续改进敬请期待
