asgardius/virtualx-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix blurry borders on antialiased FlatStyleBox

Browse source 
This is a fix of the antialiasing logic of FlatStyleBox.
It is now possible to have smooth rounded corners while keeping
the edges sharp on the pixels.

The antialiasing gradient positioning is ajusted so that the "hard"
border corresponds to the middle of that gradient instead of one end.
Checked against rendering of rounded rectangles in a vector graphics
software.
This commit is contained in:
David Giardi 2023-04-16 14:15:53 +02:00
parent a7276f1ce0
commit 2ef20045b1
3 changed files with 43 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
doc/classes/StyleBoxFlat.xml
View file

@ -103,8 +103,9 @@
Antialiasing draws a small ring around the edges, which fades to transparency. As a result, edges look much smoother. This is only noticeable when using rounded corners or [member skew].
[b]Note:[/b] When using beveled corners with 45-degree angles ([member corner_detail] = 1), it is recommended to set [member anti_aliasing] to [code]false[/code] to ensure crisp visuals and avoid possible visual glitches.
</member>
<member name="anti_aliasing_size" type="float" setter="set_aa_size" getter="get_aa_size" default="0.625">
This changes the size of the faded ring. Higher values can be used to achieve a "blurry" effect.
<member name="anti_aliasing_size" type="float" setter="set_aa_size" getter="get_aa_size" default="1.0">
This changes the size of the antialiasing effect. [code]1.0[/code] is recommended for an optimal result at 100% scale, identical to how rounded rectangles are rendered in web browsers and most vector drawing software.
[b]Note:[/b] Higher values may produce a blur effect but can also create undesired artifacts on small boxes with large-radius corners.
</member>
<member name="bg_color" type="Color" setter="set_bg_color" getter="get_bg_color" default="Color(0.6, 0.6, 0.6, 1)">
The background color of the stylebox.

70
scene/resources/style_box.cpp
View file

@ -757,76 +757,84 @@ void StyleBoxFlat::draw(RID p_canvas_item, const Rect2 &p_rect) const {
}
// Create infill (no AA).
if (draw_center && (!aa_on || blend_on || !draw_border)) {
if (draw_center && (!aa_on || blend_on)) {
draw_ring(verts, indices, colors, border_style_rect, adapted_corner,
infill_rect, infill_rect, bg_color, bg_color, corner_detail, skew, true);
}
if (aa_on) {
real_t aa_border_width[4];
real_t aa_border_width_half[4];
real_t aa_fill_width[4];
real_t aa_fill_width_half[4];
if (draw_border) {
for (int i = 0; i < 4; i++) {
if (border_width[i] > 0) {
aa_border_width[i] = aa_size;
aa_border_width_half[i] = aa_size / 2;
aa_fill_width[i] = 0;
aa_fill_width_half[i] = 0;
} else {
aa_border_width[i] = 0;
aa_border_width_half[i] = 0;
aa_fill_width[i] = aa_size;
aa_fill_width_half[i] = aa_size / 2;
}
}
} else {
for (int i = 0; i < 4; i++) {
aa_border_width[i] = 0;
aa_border_width_half[i] = 0;
aa_fill_width[i] = aa_size;
aa_fill_width_half[i] = aa_size / 2;
}
}
Rect2 infill_inner_rect = infill_rect.grow_individual(-aa_border_width[SIDE_LEFT], -aa_border_width[SIDE_TOP],
-aa_border_width[SIDE_RIGHT], -aa_border_width[SIDE_BOTTOM]);
if (draw_center) {
if (!blend_on && draw_border) {
Rect2 infill_inner_rect_aa = infill_inner_rect.grow_individual(aa_border_width[SIDE_LEFT], aa_border_width[SIDE_TOP],
aa_border_width[SIDE_RIGHT], aa_border_width[SIDE_BOTTOM]);
// Create infill within AA border.
// Infill rect, transparent side of antialiasing gradient (base infill rect enlarged by AA size)
Rect2 infill_rect_aa_transparent = infill_rect.grow_individual(aa_fill_width_half[SIDE_LEFT], aa_fill_width_half[SIDE_TOP],
aa_fill_width_half[SIDE_RIGHT], aa_fill_width_half[SIDE_BOTTOM]);
// Infill rect, colored side of antialiasing gradient (base infill rect shrunk by AA size)
Rect2 infill_rect_aa_colored = infill_rect_aa_transparent.grow_individual(-aa_fill_width[SIDE_LEFT], -aa_fill_width[SIDE_TOP],
-aa_fill_width[SIDE_RIGHT], -aa_fill_width[SIDE_BOTTOM]);
if (!blend_on) {
// Create center fill, not antialiased yet
draw_ring(verts, indices, colors, border_style_rect, adapted_corner,
infill_inner_rect_aa, infill_inner_rect_aa, bg_color, bg_color, corner_detail, skew, true);
infill_rect_aa_colored, infill_rect_aa_colored, bg_color, bg_color, corner_detail, skew, true);
}
if (!blend_on || !draw_border) {
Rect2 infill_rect_aa = infill_rect.grow_individual(aa_fill_width[SIDE_LEFT], aa_fill_width[SIDE_TOP],
aa_fill_width[SIDE_RIGHT], aa_fill_width[SIDE_BOTTOM]);
Color alpha_bg = Color(bg_color.r, bg_color.g, bg_color.b, 0);
// Create infill fake AA gradient.
draw_ring(verts, indices, colors, style_rect, adapted_corner,
infill_rect_aa, infill_rect, bg_color, alpha_bg, corner_detail, skew);
// Add antialiasing on the center fill
draw_ring(verts, indices, colors, border_style_rect, adapted_corner,
infill_rect_aa_transparent, infill_rect_aa_colored, bg_color, alpha_bg, corner_detail, skew);
}
}
if (draw_border) {
Rect2 infill_rect_aa = infill_rect.grow_individual(aa_border_width[SIDE_LEFT], aa_border_width[SIDE_TOP],
aa_border_width[SIDE_RIGHT], aa_border_width[SIDE_BOTTOM]);
Rect2 style_rect_aa = style_rect.grow_individual(aa_border_width[SIDE_LEFT], aa_border_width[SIDE_TOP],
aa_border_width[SIDE_RIGHT], aa_border_width[SIDE_BOTTOM]);
Rect2 border_style_rect_aa = border_style_rect.grow_individual(aa_border_width[SIDE_LEFT], aa_border_width[SIDE_TOP],
aa_border_width[SIDE_RIGHT], aa_border_width[SIDE_BOTTOM]);
// Inner border recct, fully colored side of antialiasing gradient (base inner rect enlarged by AA size)
Rect2 inner_rect_aa_colored = infill_rect.grow_individual(aa_border_width_half[SIDE_LEFT], aa_border_width_half[SIDE_TOP],
aa_border_width_half[SIDE_RIGHT], aa_border_width_half[SIDE_BOTTOM]);
// Inner border rect, transparent side of antialiasing gradient (base inner rect shrunk by AA size)
Rect2 inner_rect_aa_transparent = inner_rect_aa_colored.grow_individual(-aa_border_width[SIDE_LEFT], -aa_border_width[SIDE_TOP],
-aa_border_width[SIDE_RIGHT], -aa_border_width[SIDE_BOTTOM]);
// Outer border rect, transparent side of antialiasing gradient (base outer rect enlarged by AA size)
Rect2 outer_rect_aa_transparent = style_rect.grow_individual(aa_border_width_half[SIDE_LEFT], aa_border_width_half[SIDE_TOP],
aa_border_width_half[SIDE_RIGHT], aa_border_width_half[SIDE_BOTTOM]);
// Outer border rect, colored side of antialiasing gradient (base outer rect shrunk by AA size)
Rect2 outer_rect_aa_colored = border_style_rect.grow_individual(aa_border_width_half[SIDE_LEFT], aa_border_width_half[SIDE_TOP],
aa_border_width_half[SIDE_RIGHT], aa_border_width_half[SIDE_BOTTOM]);
// Create border.
// Create border ring, not antialiased yet
draw_ring(verts, indices, colors, border_style_rect, adapted_corner,
border_style_rect_aa, ((blend_on) ? infill_rect : infill_rect_aa), border_color_inner, border_color, corner_detail, skew);
outer_rect_aa_colored, ((blend_on) ? infill_rect : inner_rect_aa_colored), border_color_inner, border_color, corner_detail, skew);
if (!blend_on) {
// Create inner border fake AA gradient.
// Add antialiasing on the ring inner border
draw_ring(verts, indices, colors, border_style_rect, adapted_corner,
infill_rect_aa, infill_rect, border_color_blend, border_color, corner_detail, skew);
inner_rect_aa_colored, inner_rect_aa_transparent, border_color_blend, border_color, corner_detail, skew);
}
// Create outer border fake AA gradient.
// Add antialiasing on the ring outer border
draw_ring(verts, indices, colors, border_style_rect, adapted_corner,
style_rect_aa, border_style_rect_aa, border_color, border_color_alpha, corner_detail, skew);
outer_rect_aa_transparent, outer_rect_aa_colored, border_color, border_color_alpha, corner_detail, skew);
}
}

2
scene/resources/style_box.h
View file

@ -163,7 +163,7 @@ class StyleBoxFlat : public StyleBox {
int corner_detail = 8;
int shadow_size = 0;
Point2 shadow_offset;
real_t aa_size = 0.625;
real_t aa_size = 1;
protected:
virtual float get_style_margin(Side p_side) const override;