mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 23:37:36 +00:00
LibGfx: Add paint styles and allow gradients to be used as them
Also while here add option to disable pre-multiplied alpha for gradients (this will be handy later).
This commit is contained in:
parent
19ce63babf
commit
b31d768e95
3 changed files with 284 additions and 43 deletions
|
@ -6,11 +6,13 @@
|
|||
|
||||
#include <AK/Math.h>
|
||||
#include <LibGfx/Gradients.h>
|
||||
#include <LibGfx/PaintStyle.h>
|
||||
#include <LibGfx/Painter.h>
|
||||
|
||||
#if defined(AK_COMPILER_GCC)
|
||||
# pragma GCC optimize("O3")
|
||||
#endif
|
||||
|
||||
namespace Gfx {
|
||||
|
||||
// Note: This file implements the CSS gradients for LibWeb according to the spec.
|
||||
|
@ -43,9 +45,14 @@ static float color_stop_step(ColorStop const& previous_stop, ColorStop const& ne
|
|||
return c;
|
||||
}
|
||||
|
||||
enum class UsePremultipliedAlpha {
|
||||
Yes,
|
||||
No
|
||||
};
|
||||
|
||||
class GradientLine {
|
||||
public:
|
||||
GradientLine(int gradient_length, Span<ColorStop const> color_stops, Optional<float> repeat_length)
|
||||
GradientLine(int gradient_length, Span<ColorStop const> color_stops, Optional<float> repeat_length, UsePremultipliedAlpha use_premultiplied_alpha = UsePremultipliedAlpha::Yes)
|
||||
: m_repeating { repeat_length.has_value() }
|
||||
, m_start_offset { round_to<int>((m_repeating ? color_stops.first().position : 0.0f) * gradient_length) }
|
||||
{
|
||||
|
@ -55,16 +62,21 @@ public:
|
|||
// Note: color_count will be < gradient_length for repeating gradients.
|
||||
auto color_count = round_to<int>(repeat_length.value_or(1.0f) * necessary_length);
|
||||
m_gradient_line_colors.resize(color_count);
|
||||
// Note: color.mixed_with() performs premultiplied alpha mixing when necessary as defined in:
|
||||
// https://drafts.csswg.org/css-images/#coloring-gradient-line
|
||||
|
||||
auto color_blend = [&](Color a, Color b, float amount) {
|
||||
// Note: color.mixed_with() performs premultiplied alpha mixing when necessary as defined in:
|
||||
// https://drafts.csswg.org/css-images/#coloring-gradient-line
|
||||
if (use_premultiplied_alpha == UsePremultipliedAlpha::Yes)
|
||||
return a.mixed_with(b, amount);
|
||||
return a.interpolate(b, amount);
|
||||
};
|
||||
|
||||
for (int loc = 0; loc < color_count; loc++) {
|
||||
auto relative_loc = float(loc + m_start_offset) / necessary_length;
|
||||
Color gradient_color = color_stops[0].color.mixed_with(
|
||||
color_stops[1].color,
|
||||
Color gradient_color = color_blend(color_stops[0].color, color_stops[1].color,
|
||||
color_stop_step(color_stops[0], color_stops[1], relative_loc));
|
||||
for (size_t i = 1; i < color_stops.size() - 1; i++) {
|
||||
gradient_color = gradient_color.mixed_with(
|
||||
color_stops[i + 1].color,
|
||||
gradient_color = color_blend(gradient_color, color_stops[i + 1].color,
|
||||
color_stop_step(color_stops[i], color_stops[i + 1], relative_loc));
|
||||
}
|
||||
m_gradient_line_colors[loc] = gradient_color;
|
||||
|
@ -117,41 +129,59 @@ private:
|
|||
bool m_requires_blending = false;
|
||||
};
|
||||
|
||||
void Painter::fill_rect_with_linear_gradient(IntRect const& rect, Span<ColorStop const> const& color_stops, float angle, Optional<float> repeat_length)
|
||||
{
|
||||
auto a_rect = to_physical(rect);
|
||||
if (a_rect.intersected(clip_rect() * scale()).is_empty())
|
||||
return;
|
||||
template<typename TransformFunction>
|
||||
struct Gradient {
|
||||
Gradient(GradientLine gradient_line, TransformFunction transform_function)
|
||||
: m_gradient_line(move(gradient_line))
|
||||
, m_transform_function(move(transform_function))
|
||||
{
|
||||
}
|
||||
|
||||
void paint(Painter& painter, IntRect rect)
|
||||
{
|
||||
m_gradient_line.paint_into_physical_rect(painter, rect, m_transform_function);
|
||||
}
|
||||
|
||||
PaintStyle::SamplerFunction sample_function()
|
||||
{
|
||||
return [this](IntPoint point) {
|
||||
return m_gradient_line.sample_color(m_transform_function(point.x(), point.y()));
|
||||
};
|
||||
}
|
||||
|
||||
private:
|
||||
GradientLine m_gradient_line;
|
||||
TransformFunction m_transform_function;
|
||||
};
|
||||
|
||||
static auto create_linear_gradient(IntRect const& physical_rect, Span<ColorStop const> const& color_stops, float angle, Optional<float> repeat_length)
|
||||
{
|
||||
float normalized_angle = normalized_gradient_angle_radians(angle);
|
||||
float sin_angle, cos_angle;
|
||||
AK::sincos(normalized_angle, sin_angle, cos_angle);
|
||||
|
||||
// Full length of the gradient
|
||||
auto gradient_length = calculate_gradient_length(a_rect.size(), sin_angle, cos_angle);
|
||||
auto gradient_length = calculate_gradient_length(physical_rect.size(), sin_angle, cos_angle);
|
||||
IntPoint offset { cos_angle * (gradient_length / 2), sin_angle * (gradient_length / 2) };
|
||||
auto center = a_rect.translated(-a_rect.location()).center();
|
||||
auto center = physical_rect.translated(-physical_rect.location()).center();
|
||||
auto start_point = center - offset;
|
||||
// Rotate gradient line to be horizontal
|
||||
auto rotated_start_point_x = start_point.x() * cos_angle - start_point.y() * -sin_angle;
|
||||
|
||||
GradientLine gradient_line(gradient_length, color_stops, repeat_length);
|
||||
gradient_line.paint_into_physical_rect(*this, a_rect, [&](int x, int y) {
|
||||
return (x * cos_angle - (a_rect.height() - y) * -sin_angle) - rotated_start_point_x;
|
||||
});
|
||||
return Gradient {
|
||||
move(gradient_line),
|
||||
[=](int x, int y) {
|
||||
return (x * cos_angle - (physical_rect.height() - y) * -sin_angle) - rotated_start_point_x;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
void Painter::fill_rect_with_conic_gradient(IntRect const& rect, Span<ColorStop const> const& color_stops, IntPoint center, float start_angle, Optional<float> repeat_length)
|
||||
static auto create_conic_gradient(Span<ColorStop const> const& color_stops, FloatPoint center_point, float start_angle, Optional<float> repeat_length, UsePremultipliedAlpha use_premultiplied_alpha = UsePremultipliedAlpha::Yes)
|
||||
{
|
||||
auto a_rect = to_physical(rect);
|
||||
if (a_rect.intersected(clip_rect() * scale()).is_empty())
|
||||
return;
|
||||
|
||||
// FIXME: Do we need/want sub-degree accuracy for the gradient line?
|
||||
GradientLine gradient_line(360, color_stops, repeat_length);
|
||||
GradientLine gradient_line(360, color_stops, repeat_length, use_premultiplied_alpha);
|
||||
float normalized_start_angle = (360.0f - start_angle) + 90.0f;
|
||||
// Translate position/center to the center of the pixel (avoids some funky painting)
|
||||
auto center_point = FloatPoint { center * scale() }.translated(0.5, 0.5);
|
||||
// The flooring can make gradients that want soft edges look worse, so only floor if we have hard edges.
|
||||
// Which makes sure the hard edge stay hard edges :^)
|
||||
bool should_floor_angles = false;
|
||||
|
@ -161,12 +191,59 @@ void Painter::fill_rect_with_conic_gradient(IntRect const& rect, Span<ColorStop
|
|||
break;
|
||||
}
|
||||
}
|
||||
gradient_line.paint_into_physical_rect(*this, a_rect, [&](int x, int y) {
|
||||
auto point = FloatPoint { x, y } - center_point;
|
||||
// FIXME: We could probably get away with some approximation here:
|
||||
auto loc = fmod((AK::atan2(point.y(), point.x()) * 180.0f / AK::Pi<float> + 360.0f + normalized_start_angle), 360.0f);
|
||||
return should_floor_angles ? floor(loc) : loc;
|
||||
});
|
||||
return Gradient {
|
||||
move(gradient_line),
|
||||
[=](int x, int y) {
|
||||
auto point = FloatPoint { x, y } - center_point;
|
||||
// FIXME: We could probably get away with some approximation here:
|
||||
auto loc = fmod((AK::atan2(point.y(), point.x()) * 180.0f / AK::Pi<float> + 360.0f + normalized_start_angle), 360.0f);
|
||||
return should_floor_angles ? floor(loc) : loc;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
static auto create_radial_gradient(IntRect const& physical_rect, Span<ColorStop const> const& color_stops, IntPoint center, IntSize size, Optional<float> repeat_length)
|
||||
{
|
||||
// A conservative guesstimate on how many colors we need to generate:
|
||||
auto max_dimension = max(physical_rect.width(), physical_rect.height());
|
||||
auto max_visible_gradient = max(max_dimension / 2, min(size.width(), max_dimension));
|
||||
GradientLine gradient_line(max_visible_gradient, color_stops, repeat_length);
|
||||
auto center_point = FloatPoint { center }.translated(0.5, 0.5);
|
||||
return Gradient {
|
||||
move(gradient_line),
|
||||
[=](int x, int y) {
|
||||
// FIXME: See if there's a more efficient calculation we do there :^)
|
||||
auto point = FloatPoint(x, y) - center_point;
|
||||
auto gradient_x = point.x() / size.width();
|
||||
auto gradient_y = point.y() / size.height();
|
||||
return AK::sqrt(gradient_x * gradient_x + gradient_y * gradient_y) * max_visible_gradient;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
void Painter::fill_rect_with_linear_gradient(IntRect const& rect, Span<ColorStop const> const& color_stops, float angle, Optional<float> repeat_length)
|
||||
{
|
||||
auto a_rect = to_physical(rect);
|
||||
if (a_rect.intersected(clip_rect() * scale()).is_empty())
|
||||
return;
|
||||
auto linear_gradient = create_linear_gradient(a_rect, color_stops, angle, repeat_length);
|
||||
linear_gradient.paint(*this, a_rect);
|
||||
}
|
||||
|
||||
static FloatPoint pixel_center(IntPoint point)
|
||||
{
|
||||
return point.to_type<float>().translated(0.5f, 0.5f);
|
||||
}
|
||||
|
||||
void Painter::fill_rect_with_conic_gradient(IntRect const& rect, Span<ColorStop const> const& color_stops, IntPoint center, float start_angle, Optional<float> repeat_length)
|
||||
{
|
||||
auto a_rect = to_physical(rect);
|
||||
if (a_rect.intersected(clip_rect() * scale()).is_empty())
|
||||
return;
|
||||
// Translate position/center to the center of the pixel (avoids some funky painting)
|
||||
auto center_point = pixel_center(center * scale());
|
||||
auto conic_gradient = create_conic_gradient(color_stops, center_point, start_angle, repeat_length);
|
||||
conic_gradient.paint(*this, a_rect);
|
||||
}
|
||||
|
||||
void Painter::fill_rect_with_radial_gradient(IntRect const& rect, Span<ColorStop const> const& color_stops, IntPoint center, IntSize size, Optional<float> repeat_length)
|
||||
|
@ -174,19 +251,32 @@ void Painter::fill_rect_with_radial_gradient(IntRect const& rect, Span<ColorStop
|
|||
auto a_rect = to_physical(rect);
|
||||
if (a_rect.intersected(clip_rect() * scale()).is_empty())
|
||||
return;
|
||||
auto radial_gradient = create_radial_gradient(a_rect, color_stops, center * scale(), size * scale(), repeat_length);
|
||||
radial_gradient.paint(*this, a_rect);
|
||||
}
|
||||
|
||||
// A conservative guesstimate on how many colors we need to generate:
|
||||
auto max_dimension = max(a_rect.width(), a_rect.height());
|
||||
auto max_visible_gradient = max(max_dimension / 2, min(size.width(), max_dimension));
|
||||
GradientLine gradient_line(max_visible_gradient, color_stops, repeat_length);
|
||||
auto center_point = FloatPoint { center * scale() }.translated(0.5, 0.5);
|
||||
gradient_line.paint_into_physical_rect(*this, a_rect, [&](int x, int y) {
|
||||
// FIXME: See if there's a more efficient calculation we do there :^)
|
||||
auto point = FloatPoint(x, y) - center_point;
|
||||
auto gradient_x = point.x() / size.width();
|
||||
auto gradient_y = point.y() / size.height();
|
||||
return AK::sqrt(gradient_x * gradient_x + gradient_y * gradient_y) * max_visible_gradient;
|
||||
});
|
||||
// TODO: Figure out how to handle scale() here... Not important while not supported by fill_path()
|
||||
|
||||
void LinearGradientPaintStyle::paint(IntRect physical_bounding_box, PaintFunction paint) const
|
||||
{
|
||||
VERIFY(color_stops().size() > 2);
|
||||
auto linear_gradient = create_linear_gradient(physical_bounding_box, color_stops(), m_angle, repeat_length());
|
||||
paint(linear_gradient.sample_function());
|
||||
}
|
||||
|
||||
void ConicGradientPaintStyle::paint(IntRect physical_bounding_box, PaintFunction paint) const
|
||||
{
|
||||
VERIFY(color_stops().size() > 2);
|
||||
(void)physical_bounding_box;
|
||||
auto conic_gradient = create_conic_gradient(color_stops(), pixel_center(m_center), m_start_angle, repeat_length());
|
||||
paint(conic_gradient.sample_function());
|
||||
}
|
||||
|
||||
void RadialGradientPaintStyle::paint(IntRect physical_bounding_box, PaintFunction paint) const
|
||||
{
|
||||
VERIFY(color_stops().size() > 2);
|
||||
auto radial_gradient = create_radial_gradient(physical_bounding_box, color_stops(), m_center, m_size, repeat_length());
|
||||
paint(radial_gradient.sample_function());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue