Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

StyleBoxFlat

繼承: StyleBox < Resource < RefCounted < Object

不使用紋理的自訂 StyleBox

說明

By configuring various properties of this style box, you can achieve many common looks without the need of a texture. This includes optionally rounded borders, antialiasing, shadows, and skew.

Setting corner radius to high values is allowed. As soon as corners overlap, the stylebox will switch to a relative system:

height = 30
corner_radius_top_left = 50
corner_radius_bottom_left = 100

The relative system now would take the 1:2 ratio of the two left corners to calculate the actual corner width. Both corners added will never be more than the height. Result:

corner_radius_top_left: 10
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 🔗

Returns the given corner's radius.


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) 🔗

Sets the corner radius to radius pixels for the given 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 圖元。