StyleBoxFlat
继承: StyleBox < Resource < RefCounted < Object
不使用纹理的自定义 StyleBox。
描述
通过配置这个样式盒的各种属性,你可以不使用纹理实现许多常见外观,包括可选的圆角边框、抗锯齿、阴影、偏斜等。
允许将圆角半径设置为较高的值。两角重叠时,样式盒将切换到相对系统。
示例:
height = 30
corner_radius_top_left = 50
corner_radius_bottom_left = 100
相对系统现在将采用两个左角的 1:2 比率来计算实际角宽度。添加的两个角永远不会超过高度。结果:
corner_radius_top_left: 10
corner_radius_bottom_left: 20
属性
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
|
方法
get_border_width(margin: Side) const | |
get_border_width_min() const | |
get_corner_radius(corner: Corner) const | |
get_expand_margin(margin: Side) const | |
void | set_border_width(margin: Side, width: int) |
void | set_border_width_all(width: int) |
void | set_corner_radius(corner: Corner, radius: int) |
void | set_corner_radius_all(radius: int) |
void | set_expand_margin(margin: Side, size: float) |
void | set_expand_margin_all(size: float) |
属性说明
抗锯齿会在边缘周围绘制一个渐变到透明的小环。因此边缘看起来会更加平滑。这仅在使用圆角或 skew 时才明显。
注意:使用 45 度倒角(corner_detail = 1)时,建议将 anti_aliasing 设为 false
,这样可以保证画面锐利、避免一些显示问题。
float anti_aliasing_size = 1.0
🔗
修改抗锯齿效果的大小。要在 100% 缩放时达到最佳效果推荐使用 1.0
,和网页浏览器以及大多数矢量图绘制软件中圆角矩阵的绘制方式是一致的。
注意:较高的值可能产生模糊效果,但框本身较小、圆角半径较大的情况下也可能产生不理想的显示问题。
Color bg_color = Color(0.6, 0.6, 0.6, 1)
🔗
StyleBox的背景颜色。
如果为 true
,边框会淡入背景色。
Color border_color = Color(0.8, 0.8, 0.8, 1)
🔗
设置边框的颜色。
底边框的宽度。
左边框的宽度。
右边框的宽度。
顶边框的宽度。
设置用于每个角的顶点数。更高的值生成更圆的角,但需要更多的处理计算。选择值时,应考虑角半径(set_corner_radius_all)。
对于小于 10 的角半径,4
或 5
应该就足够。对于小于 30 的角半径,8
和 12
之间的值应该足够。
1
的角细节会导致倒角而不是圆角,这对于某些艺术效果很有用。
int corner_radius_bottom_left = 0
🔗
左下角的半径。如果为 0
,则该角不圆滑。
int corner_radius_bottom_right = 0
🔗
右下角的半径。如果为 0
,则该角不圆滑。
int corner_radius_top_left = 0
🔗
左上角的半径。如果为 0
,则该角不圆滑。
int corner_radius_top_right = 0
🔗
右上角的半径。如果为 0
,则该角不圆滑。
切换绘制 StyleBox 的内部部分。
float expand_margin_bottom = 0.0
🔗
将该样式盒扩展到该控件矩形的底边。可以与 border_width_bottom 组合,在该控件矩形之外绘制边框。
注意:与 StyleBox.content_margin_bottom 不同,expand_margin_bottom 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。
float expand_margin_left = 0.0
🔗
将该样式盒扩展到该控件矩形的左边。可以与 border_width_left 组合,在该控件矩形之外绘制边框。
注意:与 StyleBox.content_margin_left 不同,expand_margin_left 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。
float expand_margin_right = 0.0
🔗
将该样式盒扩展到该控件矩形的右边。可以与 border_width_right 组合,在该控件矩形之外绘制边框。
注意:与 StyleBox.content_margin_right 不同,expand_margin_right 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。
float expand_margin_top = 0.0
🔗
将该样式盒扩展到该控件矩形的顶边。可以与 border_width_top 组合,在该控件矩形之外绘制边框。
注意:与 StyleBox.content_margin_top 不同,expand_margin_top 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。
Color shadow_color = Color(0, 0, 0, 0.6)
🔗
阴影的颜色。如果 shadow_size 小于 1,这将不起作用。
Vector2 shadow_offset = Vector2(0, 0)
🔗
以像素为单位的阴影偏移。相对于StyleBox调整阴影的位置。
以像素为单位的阴影大小。
Vector2 skew = Vector2(0, 0)
🔗
如果任何轴被设为了非零值,skew 就会将该 StyleBox 进行横向和/或纵向变形。可用于实现“未来风”的 UI。正值会让该 StyleBox 朝右(X 轴)上(Y 轴)偏斜,负值会让该 StyleBox 朝左(X 轴)下(Y 轴)偏斜。
注意:为了让文本不触碰到该 StyleBox 的边缘,请考虑增大该 StyleBox 的内容边距(见 StyleBox.content_margin_bottom)。增大内容边距比增大扩展边距(见 expand_margin_bottom)更好,因为增大扩展边距并不会增大 Control 的可点击区域。
方法说明
int get_border_width(margin: Side) const 🔗
返回指定边 Side 的边框宽度。
int get_border_width_min() const 🔗
返回所有四条边中,最小的边框宽度。
int get_corner_radius(corner: Corner) const 🔗
返回给定角 corner
的半径。可能的取值见 Corner。
float get_expand_margin(margin: Side) const 🔗
返回指定边 Side 的扩展边距的大小。
void set_border_width(margin: Side, width: int) 🔗
将指定边 Side 的边框宽度设置为 width
像素。
void set_border_width_all(width: int) 🔗
将所有边的边框宽度设置为 width
像素。
void set_corner_radius(corner: Corner, radius: int) 🔗
将给定角 corner
的圆角半径设置为 radius
像素。可能的取值见 Corner。
void set_corner_radius_all(radius: int) 🔗
将所有角的圆角半径设置为 radius
像素。
void set_expand_margin(margin: Side, size: float) 🔗
将指定边 Side 的扩展边距设置为 size
像素。
void set_expand_margin_all(size: float) 🔗
将所有边的扩展边距都设置为 size
像素。