css shadow: Add extra slop to the blur clipping

Turns out our blurring function isn't very nice, it has a lot
of energy past the blur radius, so clipping at exactly the
blur radius causes ugly gradient stops. This just adds 4
extra pixels of slop, which makes this better in most cases.
This commit is contained in:
Alexander Larsson
2013-05-06 16:05:08 +02:00
parent 66d3b5a9cd
commit dcb84f158b

View File

@ -31,6 +31,10 @@
#include <math.h> #include <math.h>
/* The blur of _gtk_cairo_blur_surface only approximately ends at radius,
so we add an extra pixel to make the clips less dramatic */
#define CLIP_RADIUS_EXTRA 4
struct _GtkCssValue { struct _GtkCssValue {
GTK_CSS_VALUE_BASE GTK_CSS_VALUE_BASE
guint inset :1; guint inset :1;
@ -314,7 +318,7 @@ gtk_css_shadow_value_start_drawing (const GtkCssValue *shadow,
cairo_rectangle_int_t clip_rect; cairo_rectangle_int_t clip_rect;
cairo_surface_t *surface; cairo_surface_t *surface;
cairo_t *blur_cr; cairo_t *blur_cr;
gdouble radius; gdouble radius, clip_radius;
radius = _gtk_css_number_value_get (shadow->radius, 0); radius = _gtk_css_number_value_get (shadow->radius, 0);
if (radius == 0.0) if (radius == 0.0)
@ -322,11 +326,13 @@ gtk_css_shadow_value_start_drawing (const GtkCssValue *shadow,
gdk_cairo_get_clip_rectangle (cr, &clip_rect); gdk_cairo_get_clip_rectangle (cr, &clip_rect);
clip_radius = radius + CLIP_RADIUS_EXTRA;
/* Create a larger surface to center the blur. */ /* Create a larger surface to center the blur. */
surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32, surface = cairo_image_surface_create (CAIRO_FORMAT_ARGB32,
clip_rect.width + 2 * radius, clip_rect.width + 2 * clip_radius,
clip_rect.height + 2 * radius); clip_rect.height + 2 * clip_radius);
cairo_surface_set_device_offset (surface, radius - clip_rect.x, radius - clip_rect.y); cairo_surface_set_device_offset (surface, clip_radius - clip_rect.x, clip_radius - clip_rect.y);
blur_cr = cairo_create (surface); blur_cr = cairo_create (surface);
cairo_set_user_data (blur_cr, &shadow_key, cairo_reference (cr), (cairo_destroy_func_t) cairo_destroy); cairo_set_user_data (blur_cr, &shadow_key, cairo_reference (cr), (cairo_destroy_func_t) cairo_destroy);
@ -519,7 +525,7 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
const GtkRoundedBox *padding_box) const GtkRoundedBox *padding_box)
{ {
GtkRoundedBox box, clip_box; GtkRoundedBox box, clip_box;
double spread, radius, x, y, outside; double spread, radius, clip_radius, x, y, outside;
g_return_if_fail (shadow->class == &GTK_CSS_VALUE_SHADOW); g_return_if_fail (shadow->class == &GTK_CSS_VALUE_SHADOW);
@ -527,6 +533,7 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
spread = _gtk_css_number_value_get (shadow->spread, 0); spread = _gtk_css_number_value_get (shadow->spread, 0);
radius = _gtk_css_number_value_get (shadow->radius, 0); radius = _gtk_css_number_value_get (shadow->radius, 0);
clip_radius = radius + CLIP_RADIUS_EXTRA;
x = _gtk_css_number_value_get (shadow->hoffset, 0); x = _gtk_css_number_value_get (shadow->hoffset, 0);
y = _gtk_css_number_value_get (shadow->voffset, 0); y = _gtk_css_number_value_get (shadow->voffset, 0);
@ -540,7 +547,7 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
cairo_set_fill_rule (cr, CAIRO_FILL_RULE_EVEN_ODD); cairo_set_fill_rule (cr, CAIRO_FILL_RULE_EVEN_ODD);
_gtk_rounded_box_path (padding_box, cr); _gtk_rounded_box_path (padding_box, cr);
outside = spread + radius + MAX (fabs (x), fabs (y)); outside = spread + clip_radius + MAX (fabs (x), fabs (y));
clip_box = *padding_box; clip_box = *padding_box;
_gtk_rounded_box_grow (&clip_box, outside, outside, outside, outside); _gtk_rounded_box_grow (&clip_box, outside, outside, outside, outside);
_gtk_rounded_box_clip_path (&clip_box, cr); _gtk_rounded_box_clip_path (&clip_box, cr);
@ -563,7 +570,7 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
_gtk_rounded_box_grow (&box, spread, spread, spread, spread); _gtk_rounded_box_grow (&box, spread, spread, spread, spread);
clip_box = *padding_box; clip_box = *padding_box;
_gtk_rounded_box_shrink (&clip_box, -radius, -radius, -radius, -radius); _gtk_rounded_box_shrink (&clip_box, -clip_radius, -clip_radius, -clip_radius, -clip_radius);
if (radius == 0) if (radius == 0)
draw_shadow (shadow, cr, &box, &clip_box, FALSE); draw_shadow (shadow, cr, &box, &clip_box, FALSE);
@ -596,10 +603,10 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
{ {
/* In the outset case we want to paint the entire box, plus as far /* In the outset case we want to paint the entire box, plus as far
* as the radius reaches from it */ * as the radius reaches from it */
r.x = floor (box.box.x - radius); r.x = floor (box.box.x - clip_radius);
r.y = floor (box.box.y - radius); r.y = floor (box.box.y - clip_radius);
r.width = ceil (box.box.x + box.box.width + radius) - r.x; r.width = ceil (box.box.x + box.box.width + clip_radius) - r.x;
r.height = ceil (box.box.y + box.box.height + radius) - r.y; r.height = ceil (box.box.y + box.box.height + clip_radius) - r.y;
remaining = cairo_region_create_rectangle (&r); remaining = cairo_region_create_rectangle (&r);
} }
@ -609,24 +616,24 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
{ {
if (i == GTK_CSS_TOP_LEFT || i == GTK_CSS_BOTTOM_LEFT) if (i == GTK_CSS_TOP_LEFT || i == GTK_CSS_BOTTOM_LEFT)
{ {
x1 = floor (box.box.x - radius); x1 = floor (box.box.x - clip_radius);
x2 = ceil (box.box.x + box.corner[i].horizontal + radius); x2 = ceil (box.box.x + box.corner[i].horizontal + clip_radius);
} }
else else
{ {
x1 = floor (box.box.x + box.box.width - box.corner[i].horizontal - radius); x1 = floor (box.box.x + box.box.width - box.corner[i].horizontal - clip_radius);
x2 = ceil (box.box.x + box.box.width + radius); x2 = ceil (box.box.x + box.box.width + clip_radius);
} }
if (i == GTK_CSS_TOP_LEFT || i == GTK_CSS_TOP_RIGHT) if (i == GTK_CSS_TOP_LEFT || i == GTK_CSS_TOP_RIGHT)
{ {
y1 = floor (box.box.y - radius); y1 = floor (box.box.y - clip_radius);
y2 = ceil (box.box.y + box.corner[i].vertical + radius); y2 = ceil (box.box.y + box.corner[i].vertical + clip_radius);
} }
else else
{ {
y1 = floor (box.box.y + box.box.height - box.corner[i].vertical - radius); y1 = floor (box.box.y + box.box.height - box.corner[i].vertical - clip_radius);
y2 = ceil (box.box.y + box.box.height + radius); y2 = ceil (box.box.y + box.box.height + clip_radius);
} }
@ -652,34 +659,34 @@ _gtk_css_shadow_value_paint_box (const GtkCssValue *shadow,
{ {
if (i == GTK_CSS_TOP || i == GTK_CSS_BOTTOM) if (i == GTK_CSS_TOP || i == GTK_CSS_BOTTOM)
{ {
x1 = floor (box.box.x - radius); x1 = floor (box.box.x - clip_radius);
x2 = ceil (box.box.x + box.box.width + radius); x2 = ceil (box.box.x + box.box.width + clip_radius);
} }
else if (i == GTK_CSS_LEFT) else if (i == GTK_CSS_LEFT)
{ {
x1 = floor (box.box.x -radius); x1 = floor (box.box.x -clip_radius);
x2 = ceil (box.box.x + radius); x2 = ceil (box.box.x + clip_radius);
} }
else else
{ {
x1 = floor (box.box.x + box.box.width -radius); x1 = floor (box.box.x + box.box.width -clip_radius);
x2 = ceil (box.box.x + box.box.width + radius); x2 = ceil (box.box.x + box.box.width + clip_radius);
} }
if (i == GTK_CSS_LEFT || i == GTK_CSS_RIGHT) if (i == GTK_CSS_LEFT || i == GTK_CSS_RIGHT)
{ {
y1 = floor (box.box.y - radius); y1 = floor (box.box.y - clip_radius);
y2 = ceil (box.box.y + box.box.height + radius); y2 = ceil (box.box.y + box.box.height + clip_radius);
} }
else if (i == GTK_CSS_TOP) else if (i == GTK_CSS_TOP)
{ {
y1 = floor (box.box.y -radius); y1 = floor (box.box.y -clip_radius);
y2 = ceil (box.box.y + radius); y2 = ceil (box.box.y + clip_radius);
} }
else else
{ {
y1 = floor (box.box.y + box.box.height -radius); y1 = floor (box.box.y + box.box.height -clip_radius);
y2 = ceil (box.box.y + box.box.height + radius); y2 = ceil (box.box.y + box.box.height + clip_radius);
} }
cairo_save (cr); cairo_save (cr);