1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 05:17:35 +00:00

LibWeb: Apply SVG transform to path when painting (SVG) elements

This also combines the viewbox mapping into the same transform and
reuses some code by using Path::copy_transformed() rather than manually
mapping each segment of the path.
This commit is contained in:
MacDue 2023-04-10 12:32:55 +01:00 committed by Andreas Kling
parent 3484db0dc1
commit cf23a2b82d
3 changed files with 27 additions and 67 deletions

View file

@ -17,27 +17,6 @@ SVGGeometryBox::SVGGeometryBox(DOM::Document& document, SVG::SVGGeometryElement&
{
}
float SVGGeometryBox::viewbox_scaling() const
{
auto* svg_box = dom_node().first_ancestor_of_type<SVG::SVGSVGElement>();
if (!svg_box || !svg_box->view_box().has_value())
return 1;
auto view_box = svg_box->view_box().value();
bool has_specified_width = svg_box->has_attribute(HTML::AttributeNames::width);
auto specified_width = paint_box()->content_width().value();
bool has_specified_height = svg_box->has_attribute(HTML::AttributeNames::height);
auto specified_height = paint_box()->content_height().value();
auto scale_width = has_specified_width ? specified_width / view_box.width : 1;
auto scale_height = has_specified_height ? specified_height / view_box.height : 1;
return min(scale_width, scale_height);
}
CSSPixelPoint SVGGeometryBox::viewbox_origin() const
{
auto* svg_box = dom_node().first_ancestor_of_type<SVG::SVGSVGElement>();
@ -46,6 +25,28 @@ CSSPixelPoint SVGGeometryBox::viewbox_origin() const
return { svg_box->view_box().value().min_x, svg_box->view_box().value().min_y };
}
Gfx::AffineTransform SVGGeometryBox::layout_transform() const
{
auto& geometry_element = dom_node();
auto transform = geometry_element.get_transform();
auto* svg_box = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
float scaling = 1;
auto origin = viewbox_origin().to_type<float>();
Gfx::FloatPoint paint_offset = {};
if (svg_box && svg_box->view_box().has_value()) {
// Note: SVGFormattingContext has already done the scaling based on the viewbox,
// we now have to derive what it was from the original bounding box size.
// FIXME: It would be nice if we could store the transform from layout somewhere, so we don't have to solve for it here.
auto scaled_width = paint_box()->content_width().value();
auto scaled_height = paint_box()->content_height().value();
auto original_bounding_box = Gfx::AffineTransform {}.translate(-origin).multiply(transform).map(const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().bounding_box());
scaling = min(scaled_width / original_bounding_box.width(), scaled_height / original_bounding_box.height());
auto scaled_bounding_box = original_bounding_box.scaled(scaling, scaling);
paint_offset = (paint_box()->absolute_rect().location() - svg_box->paint_box()->absolute_rect().location()).to_type<float>() - scaled_bounding_box.location();
}
return Gfx::AffineTransform {}.translate(paint_offset).scale(scaling, scaling).translate(-origin).multiply(transform);
}
JS::GCPtr<Painting::Paintable> SVGGeometryBox::create_paintable() const
{
return Painting::SVGGeometryPaintable::create(*this);

View file

@ -21,12 +21,13 @@ public:
SVG::SVGGeometryElement& dom_node() { return static_cast<SVG::SVGGeometryElement&>(SVGGraphicsBox::dom_node()); }
SVG::SVGGeometryElement const& dom_node() const { return static_cast<SVG::SVGGeometryElement const&>(SVGGraphicsBox::dom_node()); }
float viewbox_scaling() const;
CSSPixelPoint viewbox_origin() const;
Gfx::AffineTransform layout_transform() const;
virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
private:
CSSPixelPoint viewbox_origin() const;
virtual bool is_svg_geometry_box() const final { return true; }
};

View file

@ -1,5 +1,6 @@
/*
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -49,50 +50,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
context.painter().add_clip_rect(context.enclosing_device_rect(absolute_rect()).to_type<int>());
Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path();
if (maybe_view_box.has_value()) {
Gfx::Path new_path;
auto scaling = layout_box().viewbox_scaling();
auto origin = layout_box().viewbox_origin();
auto transform_point = [&scaling, &origin](Gfx::FloatPoint point) -> Gfx::FloatPoint {
auto new_point = point;
new_point.translate_by({ -origin.x(), -origin.y() });
new_point.scale_by(scaling);
return new_point;
};
for (auto& segment : path.segments()) {
switch (segment->type()) {
case Gfx::Segment::Type::Invalid:
break;
case Gfx::Segment::Type::MoveTo:
new_path.move_to(transform_point(segment->point()));
break;
case Gfx::Segment::Type::LineTo:
new_path.line_to(transform_point(segment->point()));
break;
case Gfx::Segment::Type::QuadraticBezierCurveTo: {
auto& quadratic_bezier_segment = static_cast<Gfx::QuadraticBezierCurveSegment const&>(*segment);
new_path.quadratic_bezier_curve_to(transform_point(quadratic_bezier_segment.through()), transform_point(quadratic_bezier_segment.point()));
break;
}
case Gfx::Segment::Type::CubicBezierCurveTo: {
auto& cubic_bezier_segment = static_cast<Gfx::CubicBezierCurveSegment const&>(*segment);
new_path.cubic_bezier_curve_to(transform_point(cubic_bezier_segment.through_0()), transform_point(cubic_bezier_segment.through_1()), transform_point(cubic_bezier_segment.point()));
break;
}
case Gfx::Segment::Type::EllipticalArcTo: {
auto& elliptical_arc_segment = static_cast<Gfx::EllipticalArcSegment const&>(*segment);
new_path.elliptical_arc_to(transform_point(elliptical_arc_segment.point()), elliptical_arc_segment.radii().scaled_by(scaling, scaling), elliptical_arc_segment.x_axis_rotation(), elliptical_arc_segment.large_arc(), elliptical_arc_segment.sweep());
break;
}
}
}
path = new_path;
}
Gfx::Path path = const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().copy_transformed(Gfx::AffineTransform {}.multiply(layout_box().layout_transform()));
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