RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 14:37:46 +00:00
Code Issues Activity Actions

LibWeb: Apply CSS scaling to SVG elements

Browse source 
Not sure why this was not done before, not now it works easily :^)
This commit is contained in:
MacDue 2023-04-10 12:34:39 +01:00 • committed by Andreas Kling
parent cf23a2b82d
commit d0496ae9b8
5 changed files with 18 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Userland/Libraries/LibWeb/Painting/PaintContext.cpp
View file

@ -67,6 +67,14 @@ DevicePixelPoint PaintContext::rounded_device_point(CSSPixelPoint point) const
}; };
} }
DevicePixelPoint PaintContext::floored_device_point(CSSPixelPoint point) const
{
return {
floorf(point.x().value() * m_device_pixels_per_css_pixel),
floorf(point.y().value() * m_device_pixels_per_css_pixel)
};
}
DevicePixelRect PaintContext::enclosing_device_rect(CSSPixelRect rect) const DevicePixelRect PaintContext::enclosing_device_rect(CSSPixelRect rect) const
{ {
return { return {

1
Userland/Libraries/LibWeb/Painting/PaintContext.h
View file

@ -42,6 +42,7 @@ public:
DevicePixels floored_device_pixels(CSSPixels css_pixels) const; DevicePixels floored_device_pixels(CSSPixels css_pixels) const;
DevicePixels rounded_device_pixels(CSSPixels css_pixels) const; DevicePixels rounded_device_pixels(CSSPixels css_pixels) const;
DevicePixelPoint rounded_device_point(CSSPixelPoint) const; DevicePixelPoint rounded_device_point(CSSPixelPoint) const;
DevicePixelPoint floored_device_point(CSSPixelPoint) const;
DevicePixelRect enclosing_device_rect(CSSPixelRect) const; DevicePixelRect enclosing_device_rect(CSSPixelRect) const;
DevicePixelRect rounded_device_rect(CSSPixelRect) const; DevicePixelRect rounded_device_rect(CSSPixelRect) const;
DevicePixelSize enclosing_device_size(CSSPixelSize) const; DevicePixelSize enclosing_device_size(CSSPixelSize) const;

8
Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.cpp
View file

@ -42,15 +42,17 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
Gfx::AntiAliasingPainter painter { context.painter() }; Gfx::AntiAliasingPainter painter { context.painter() };
auto& svg_context = context.svg_context(); auto& svg_context = context.svg_context();
auto offset = svg_context.svg_element_position(); // FIXME: This should not be trucated to an int.
auto offset = context.floored_device_point(svg_context.svg_element_position()).to_type<int>().to_type<float>();
painter.translate(offset); painter.translate(offset);
auto const* svg_element = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>(); auto const* svg_element = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
auto maybe_view_box = svg_element->view_box(); auto maybe_view_box = svg_element->view_box();
context.painter().add_clip_rect(context.enclosing_device_rect(absolute_rect()).to_type<int>()); context.painter().add_clip_rect(context.enclosing_device_rect(absolute_rect()).to_type<int>());
auto css_scale = context.device_pixels_per_css_pixel();
Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().copy_transformed(Gfx::AffineTransform {}.multiply(layout_box().layout_transform())); Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().copy_transformed(Gfx::AffineTransform {}.scale(css_scale, css_scale).multiply(layout_box().layout_transform()));
if (auto fill_color = geometry_element.fill_color().value_or(svg_context.fill_color()); fill_color.alpha() > 0) { if (auto fill_color = geometry_element.fill_color().value_or(svg_context.fill_color()); fill_color.alpha() > 0) {
// We need to fill the path before applying the stroke, however the filled // We need to fill the path before applying the stroke, however the filled
@ -70,7 +72,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
painter.stroke_path( painter.stroke_path(
path, path,
stroke_color, stroke_color,
geometry_element.stroke_width().value_or(svg_context.stroke_width())); geometry_element.stroke_width().value_or(svg_context.stroke_width()) * context.device_pixels_per_css_pixel());
} }
painter.translate(-offset); painter.translate(-offset);

2
Userland/Libraries/LibWeb/Painting/SVGSVGPaintable.cpp
View file

@ -30,7 +30,7 @@ void SVGSVGPaintable::before_children_paint(PaintContext& context, PaintPhase ph
return; return;
if (!context.has_svg_context()) if (!context.has_svg_context())
context.set_svg_context(SVGContext(absolute_rect().to_type<float>())); context.set_svg_context(SVGContext(absolute_rect()));
PaintableBox::before_children_paint(context, phase); PaintableBox::before_children_paint(context, phase);
} }

6
Userland/Libraries/LibWeb/SVG/SVGContext.h
View file

@ -14,7 +14,7 @@ namespace Web {
class SVGContext { class SVGContext {
public: public:
SVGContext(Gfx::FloatRect svg_element_bounds) SVGContext(CSSPixelRect svg_element_bounds)
: m_svg_element_bounds(svg_element_bounds) : m_svg_element_bounds(svg_element_bounds)
{ {
m_states.append(State()); m_states.append(State());
@ -28,7 +28,7 @@ public:
void set_stroke_color(Gfx::Color color) { state().stroke_color = color; } void set_stroke_color(Gfx::Color color) { state().stroke_color = color; }
void set_stroke_width(float width) { state().stroke_width = width; } void set_stroke_width(float width) { state().stroke_width = width; }
Gfx::FloatPoint svg_element_position() const { return m_svg_element_bounds.top_left(); } CSSPixelPoint svg_element_position() const { return m_svg_element_bounds.top_left(); }
void save() { m_states.append(m_states.last()); } void save() { m_states.append(m_states.last()); }
void restore() { m_states.take_last(); } void restore() { m_states.take_last(); }
@ -43,7 +43,7 @@ private:
State const& state() const { return m_states.last(); } State const& state() const { return m_states.last(); }
State& state() { return m_states.last(); } State& state() { return m_states.last(); }
Gfx::FloatRect m_svg_element_bounds; CSSPixelRect m_svg_element_bounds;
Vector<State> m_states; Vector<State> m_states;
}; };