StyleBoxFlat

继承: StyleBox < Resource < RefCounted < Object

不使用纹理的自定义 StyleBox

描述

通过配置这个样式盒的各种属性,你可以不使用纹理实现许多常见外观,包括可选的圆角边框、抗锯齿、阴影、偏斜等。

允许将圆角半径设置为较高的值。两角重叠时,样式盒将切换到相对系统。

示例:

  1. height = 30
  2. corner_radius_top_left = 50
  3. corner_radius_bottom_left = 100

相对系统现在将采用两个左角的 1:2 比率来计算实际角宽度。添加的两个角永远不会超过高度。结果:

  1. corner_radius_top_left: 10
  2. corner_radius_bottom_left: 20

属性

bool

anti_aliasing

true

float

anti_aliasing_size

1.0

Color

bg_color

Color(0.6, 0.6, 0.6, 1)

bool

border_blend

false

Color

border_color

Color(0.8, 0.8, 0.8, 1)

int

border_width_bottom

0

int

border_width_left

0

int

border_width_right

0

int

border_width_top

0

int

corner_detail

8

int

corner_radius_bottom_left

0

int

corner_radius_bottom_right

0

int

corner_radius_top_left

0

int

corner_radius_top_right

0

bool

draw_center

true

float

expand_margin_bottom

0.0

float

expand_margin_left

0.0

float

expand_margin_right

0.0

float

expand_margin_top

0.0

Color

shadow_color

Color(0, 0, 0, 0.6)

Vector2

shadow_offset

Vector2(0, 0)

int

shadow_size

0

Vector2

skew

Vector2(0, 0)

方法

int

get_border_width(margin: Side) const

int

get_border_width_min() const

int

get_corner_radius(corner: Corner) const

float

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)


属性说明

bool anti_aliasing = true 🔗

  • void set_anti_aliased(value: bool)

  • bool is_anti_aliased()

抗锯齿会在边缘周围绘制一个渐变到透明的小环。因此边缘看起来会更加平滑。这仅在使用圆角或 skew 时才明显。

注意:使用 45 度倒角(corner_detail = 1)时,建议将 anti_aliasing 设为 false,这样可以保证画面锐利、避免一些显示问题。


float anti_aliasing_size = 1.0 🔗

  • void set_aa_size(value: float)

  • float get_aa_size()

修改抗锯齿效果的大小。要在 100% 缩放时达到最佳效果推荐使用 1.0,和网页浏览器以及大多数矢量图绘制软件中圆角矩阵的绘制方式是一致的。

注意:较高的值可能产生模糊效果,但框本身较小、圆角半径较大的情况下也可能产生不理想的显示问题。


Color bg_color = Color(0.6, 0.6, 0.6, 1) 🔗

  • void set_bg_color(value: Color)

  • Color get_bg_color()

StyleBox的背景颜色。


bool border_blend = false 🔗

  • void set_border_blend(value: bool)

  • bool get_border_blend()

如果为 true,边框会淡入背景色。


Color border_color = Color(0.8, 0.8, 0.8, 1) 🔗

  • void set_border_color(value: Color)

  • Color get_border_color()

设置边框的颜色。


int border_width_bottom = 0 🔗

  • void set_border_width(margin: Side, width: int)

  • int get_border_width(margin: Side) const

底边框的宽度。


int border_width_left = 0 🔗

  • void set_border_width(margin: Side, width: int)

  • int get_border_width(margin: Side) const

左边框的宽度。


int border_width_right = 0 🔗

  • void set_border_width(margin: Side, width: int)

  • int get_border_width(margin: Side) const

右边框的宽度。


int border_width_top = 0 🔗

  • void set_border_width(margin: Side, width: int)

  • int get_border_width(margin: Side) const

顶边框的宽度。


int corner_detail = 8 🔗

  • void set_corner_detail(value: int)

  • int get_corner_detail()

设置用于每个角的顶点数。更高的值生成更圆的角,但需要更多的处理计算。选择值时,应考虑角半径(set_corner_radius_all)。

对于小于 10 的角半径,45 应该就足够。对于小于 30 的角半径,812 之间的值应该足够。

1的角细节会导致倒角而不是圆角,这对于某些艺术效果很有用。


int corner_radius_bottom_left = 0 🔗

  • void set_corner_radius(corner: Corner, radius: int)

  • int get_corner_radius(corner: Corner) const

左下角的半径。如果为 0,则该角不圆滑。


int corner_radius_bottom_right = 0 🔗

  • void set_corner_radius(corner: Corner, radius: int)

  • int get_corner_radius(corner: Corner) const

右下角的半径。如果为 0,则该角不圆滑。


int corner_radius_top_left = 0 🔗

  • void set_corner_radius(corner: Corner, radius: int)

  • int get_corner_radius(corner: Corner) const

左上角的半径。如果为 0,则该角不圆滑。


int corner_radius_top_right = 0 🔗

  • void set_corner_radius(corner: Corner, radius: int)

  • int get_corner_radius(corner: Corner) const

右上角的半径。如果为 0,则该角不圆滑。


bool draw_center = true 🔗

  • void set_draw_center(value: bool)

  • bool is_draw_center_enabled()

切换绘制 StyleBox 的内部部分。


float expand_margin_bottom = 0.0 🔗

  • void set_expand_margin(margin: Side, size: float)

  • float get_expand_margin(margin: Side) const

将该样式盒扩展到该控件矩形的底边。可以与 border_width_bottom 组合,在该控件矩形之外绘制边框。

注意:StyleBox.content_margin_bottom 不同,expand_margin_bottom 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。


float expand_margin_left = 0.0 🔗

  • void set_expand_margin(margin: Side, size: float)

  • float get_expand_margin(margin: Side) const

将该样式盒扩展到该控件矩形的左边。可以与 border_width_left 组合,在该控件矩形之外绘制边框。

注意:StyleBox.content_margin_left 不同,expand_margin_left 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。


float expand_margin_right = 0.0 🔗

  • void set_expand_margin(margin: Side, size: float)

  • float get_expand_margin(margin: Side) const

将该样式盒扩展到该控件矩形的右边。可以与 border_width_right 组合,在该控件矩形之外绘制边框。

注意:StyleBox.content_margin_right 不同,expand_margin_right 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。


float expand_margin_top = 0.0 🔗

  • void set_expand_margin(margin: Side, size: float)

  • float get_expand_margin(margin: Side) const

将该样式盒扩展到该控件矩形的顶边。可以与 border_width_top 组合,在该控件矩形之外绘制边框。

注意:StyleBox.content_margin_top 不同,expand_margin_top 并不会影响 Control 的可点击区域。错误使用时会对可用性造成负面影响,因为用户可能会点击该 StyleBox 上实际无法接受点击的区域。


Color shadow_color = Color(0, 0, 0, 0.6) 🔗

  • void set_shadow_color(value: Color)

  • Color get_shadow_color()

阴影的颜色。如果 shadow_size 小于 1,这将不起作用。


Vector2 shadow_offset = Vector2(0, 0) 🔗

以像素为单位的阴影偏移。相对于StyleBox调整阴影的位置。


int shadow_size = 0 🔗

  • void set_shadow_size(value: int)

  • int get_shadow_size()

以像素为单位的阴影大小。


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 像素。