成都网站建设怎么样2024年新闻摘抄

概述

借鉴B站UP主JACKADUX去年8月份的Godot 进阶技法 | 创建自定义的 StyleBox 资源类型中的案例源码，加上自己的简单发挥，搞定了自定义StyleBox。

这意味着可以很大程度上不再受限于Godot自己提供的4种StyleBox的限制，尤其是StyleBoxFlat，而StyleBox则是自定义容器和控件样式必备的，也就意味着在UI界面设计上将有更多的可能。

StyleBox总结

$$\text{StyleBox}\{\begin{array}{l}样式盒基类\\ 可以用于：\{\begin{array}{l}\text{Panel、PanelContainer}\\ \text{Button、LineEdit、CodeEdit、Tree}控件等的背景样式设定\end{array}\\ 分为：\{\begin{array}{l}\text{StyleBoxEmpty}：\{\begin{array}{l}空样式盒\\ 常用于控件主题覆盖中清除控件获得焦点的外框样式\end{array}\\ \text{StyleBoxFlat}：\{\begin{array}{l}不使用纹理的样式盒（常用）\\ 可以用纯色形式绘制带圆角和边线的矩形样式盒\end{array}\\ \text{StyleBoxLine}：\{\begin{array}{l}显示左侧垂直和顶部水平边线\\ 比较鸡肋\end{array}\\ \text{StyleBoxTexture}：\{\begin{array}{l}可以使用图片作为背景\\ 包括渐变类型的\text{GradientTexture1D、GradientTexture2D}\\ 缺点：无法在图片背景包括渐变的基础上进行圆角、边框等的设定\end{array}\end{array}\end{array}$$

自定义StyleBox

模仿了一个简单实例，应该说要直至核心：

@tool
class_name myStyleBox extends StyleBoxfunc _draw(to_canvas_item: RID, rect: Rect2) -> void:RenderingServer.canvas_item_add_circle(to_canvas_item,rect.get_center(),rect.size.y /2.0,Color.WHITE)

• 自定义class_name并直接继承StyleBox
• 因为StyleBox本质是Resource，而不是CanvasItem，所以它的_draw()处理是不同的，需要使用RenderingServer提供的方法处理绘图，而没有draw_*()方法可以用
• 参数to_canvas_item指代的是应用该StyleBox的容器或控件，rect是其矩形包围盒，有了这两项，剩下基本就是处理形状点的求取和绘制了，具体可以参看我往期的Godot绘图函数内容
• 因为要在编辑器中使用，所以需要设定@tool标记为工具脚本，否则无法实时生效

上面的自定义StyleBox添加到Panel控件效果如下：


可以看到基本的自定义绘制效果我们我们是走通了。接下来就是设定自定义参数，并实时影响绘制效果了。

改进版本

这里我改为一个类似聊天气泡的样式盒效果，添加若干参数，并计算和绘制：

@tool
class_name myStyleBox extends StyleBox## 箭头的总宽度
@export var d_left:float = 0:set(val):d_left = valemit_changed()## 箭头的总高度
@export var arrow_height:float = 20:set(val):arrow_height = valemit_changed()## 箭头的总高度
@export var bg_color:Color = Color.WHITE:set(val):bg_color = valemit_changed()func _draw(to_canvas_item: RID, rect: Rect2) -> void:# 箭头var p1 = Vector2(0,rect.get_center().y)var p2 = Vector2(d_left,rect.get_center().y - arrow_height/2.0)var p3 = Vector2(d_left,rect.get_center().y + arrow_height/2.0)var arrow:PackedVector2Array = [p1,p2,p3]# 矩形rect = Rect2(rect.position + Vector2(d_left,0),rect.size - Vector2(d_left,0))# 绘制RenderingServer.canvas_item_add_rect(to_canvas_item,rect,bg_color)RenderingServer.canvas_item_add_polygon(to_canvas_item,arrow,[bg_color])

其中：

• 导出变量用于创建自定义参数，每个参数设定Setter，并在接收值的改变后调用自定义Resource必须调用的emit_changed()，让Godot编辑器知道资源发生了变化，从而动态的更新

效果：

总结

• 自定义StyleBox并不难，本质还是和CanvasItem绘图类似，只不过需要调用RenderingServer的绘图函数绘制
• 如果要在Godot编辑器中实时绘制需要设定@tool关键字
• 自定义StyleBox的_draw()也与CanvasItem的_draw()有所区别，也并不提供queue_redraw()方法，只能是在自定义参数的Setter中通过调用emit_changed()通知Godot编辑器进行更新