mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 00:57:44 +00:00
LibWeb: Resolve and paint simple SVG masks
This allows applying SVG <mask>s to elements. It is only implemented for the simplest (and default) case: - mask-type = luminance - maskContentUnits = maskContentUnits - maskUnits = objectBoundingBox - Default masking area It should be possible to extend to cover more cases. Though the layout for maskContentUnits = objectBoundingBox will be tricky to figure out.
This commit is contained in:
parent
650180811e
commit
909bcfe9a4
12 changed files with 123 additions and 17 deletions
|
@ -34,6 +34,16 @@ public:
|
|||
bool has_focus() const { return m_focus; }
|
||||
void set_has_focus(bool focus) { m_focus = focus; }
|
||||
|
||||
void set_svg_transform(Gfx::AffineTransform transform)
|
||||
{
|
||||
m_svg_transform = transform;
|
||||
}
|
||||
|
||||
Gfx::AffineTransform const& svg_transform() const
|
||||
{
|
||||
return m_svg_transform;
|
||||
}
|
||||
|
||||
DevicePixels enclosing_device_pixels(CSSPixels css_pixels) const;
|
||||
DevicePixels floored_device_pixels(CSSPixels css_pixels) const;
|
||||
DevicePixels rounded_device_pixels(CSSPixels css_pixels) const;
|
||||
|
@ -70,6 +80,7 @@ private:
|
|||
bool m_should_show_line_box_borders { false };
|
||||
bool m_focus { false };
|
||||
CSSPixelPoint m_scroll_offset;
|
||||
Gfx::AffineTransform m_svg_transform;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -27,6 +27,9 @@ public:
|
|||
|
||||
[[nodiscard]] bool is_visible() const;
|
||||
|
||||
virtual Optional<CSSPixelRect> get_masking_area() const { return {}; }
|
||||
virtual void apply_mask(PaintContext&, Gfx::Bitmap&, CSSPixelRect const&) const {};
|
||||
|
||||
Layout::Box& layout_box() { return static_cast<Layout::Box&>(Paintable::layout_node()); }
|
||||
Layout::Box const& layout_box() const { return static_cast<Layout::Box const&>(Paintable::layout_node()); }
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@ Optional<HitTestResult> SVGGeometryPaintable::hit_test(CSSPixelPoint position, H
|
|||
if (!result.has_value())
|
||||
return {};
|
||||
auto& geometry_element = layout_box().dom_node();
|
||||
if (auto transform = layout_box().layout_transform(); transform.has_value()) {
|
||||
if (auto transform = layout_box().layout_transform({}); transform.has_value()) {
|
||||
auto transformed_bounding_box = transform->map_to_quad(
|
||||
const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().bounding_box());
|
||||
if (!transformed_bounding_box.contains(position.to_type<float>()))
|
||||
|
@ -78,7 +78,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
|
|||
|
||||
auto maybe_view_box = geometry_element.view_box();
|
||||
|
||||
auto transform = layout_box().layout_transform();
|
||||
auto transform = layout_box().layout_transform(context.svg_transform());
|
||||
if (!transform.has_value())
|
||||
return;
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
#include <LibWeb/Layout/ImageBox.h>
|
||||
#include <LibWeb/Painting/SVGGraphicsPaintable.h>
|
||||
#include <LibWeb/Painting/StackingContext.h>
|
||||
#include <LibWeb/SVG/SVGMaskElement.h>
|
||||
|
||||
namespace Web::Painting {
|
||||
|
@ -31,4 +32,43 @@ Layout::SVGGraphicsBox const& SVGGraphicsPaintable::layout_box() const
|
|||
return static_cast<Layout::SVGGraphicsBox const&>(layout_node());
|
||||
}
|
||||
|
||||
Optional<CSSPixelRect> SVGGraphicsPaintable::get_masking_area() const
|
||||
{
|
||||
auto const& graphics_element = verify_cast<SVG::SVGGraphicsElement const>(*dom_node());
|
||||
if (auto mask = graphics_element.mask())
|
||||
return mask->resolve_masking_area(absolute_border_box_rect());
|
||||
return {};
|
||||
}
|
||||
|
||||
void SVGGraphicsPaintable::apply_mask(PaintContext& context, Gfx::Bitmap& target, CSSPixelRect const& masking_area) const
|
||||
{
|
||||
auto const& graphics_element = verify_cast<SVG::SVGGraphicsElement const>(*dom_node());
|
||||
auto mask = graphics_element.mask();
|
||||
VERIFY(mask);
|
||||
if (mask->mask_content_units() != SVG::MaskContentUnits::UserSpaceOnUse) {
|
||||
dbgln("SVG: maskContentUnits=objectBoundingBox is not supported");
|
||||
return;
|
||||
}
|
||||
auto mask_rect = context.enclosing_device_rect(masking_area);
|
||||
RefPtr<Gfx::Bitmap> mask_bitmap = {};
|
||||
if (mask && mask->layout_node() && is<PaintableBox>(mask->layout_node()->paintable())) {
|
||||
auto& mask_paintable = static_cast<PaintableBox const&>(*mask->layout_node()->paintable());
|
||||
auto mask_bitmap_or_error = Gfx::Bitmap::create(Gfx::BitmapFormat::BGRA8888, mask_rect.size().to_type<int>());
|
||||
if (mask_bitmap_or_error.is_error())
|
||||
return;
|
||||
mask_bitmap = mask_bitmap_or_error.release_value();
|
||||
{
|
||||
Gfx::Painter painter(*mask_bitmap);
|
||||
painter.translate(-mask_rect.location().to_type<int>());
|
||||
auto paint_context = context.clone(painter);
|
||||
paint_context.set_svg_transform(graphics_element.get_transform());
|
||||
StackingContext::paint_node_as_stacking_context(mask_paintable, paint_context);
|
||||
}
|
||||
}
|
||||
// TODO: Follow mask-type attribute to select between alpha/luminance masks.
|
||||
if (mask_bitmap)
|
||||
target.apply_mask(*mask_bitmap, Gfx::Bitmap::MaskKind::Luminance);
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -21,6 +21,9 @@ public:
|
|||
|
||||
virtual bool forms_unconnected_subtree() const override;
|
||||
|
||||
virtual Optional<CSSPixelRect> get_masking_area() const override;
|
||||
virtual void apply_mask(PaintContext&, Gfx::Bitmap& target, CSSPixelRect const& masking_area) const override;
|
||||
|
||||
protected:
|
||||
SVGGraphicsPaintable(Layout::SVGGraphicsBox const&);
|
||||
};
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
#include <LibWeb/Layout/ImageBox.h>
|
||||
#include <LibWeb/Layout/SVGSVGBox.h>
|
||||
#include <LibWeb/Painting/SVGPaintable.h>
|
||||
#include <LibWeb/SVG/SVGMaskElement.h>
|
||||
|
||||
namespace Web::Painting {
|
||||
|
||||
|
|
|
@ -58,16 +58,18 @@ void SVGTextPaintable::paint(PaintContext& context, PaintPhase phase) const
|
|||
|
||||
auto child_text_content = dom_node.child_text_content();
|
||||
|
||||
auto transform = layout_box().layout_transform();
|
||||
if (!transform.has_value())
|
||||
auto maybe_transform = layout_box().layout_transform();
|
||||
if (!maybe_transform.has_value())
|
||||
return;
|
||||
|
||||
auto transform = Gfx::AffineTransform(context.svg_transform()).multiply(*maybe_transform);
|
||||
|
||||
// FIXME: Support arbitrary path transforms for fonts.
|
||||
// FIMXE: This assumes transform->x_scale() == transform->y_scale().
|
||||
auto& scaled_font = layout_node().scaled_font(static_cast<float>(context.device_pixels_per_css_pixel()) * transform->x_scale());
|
||||
auto& scaled_font = layout_node().scaled_font(static_cast<float>(context.device_pixels_per_css_pixel()) * transform.x_scale());
|
||||
|
||||
Utf8View text_content { child_text_content };
|
||||
auto text_offset = context.floored_device_point(dom_node.get_offset().transformed(*transform).to_type<CSSPixels>());
|
||||
auto text_offset = context.floored_device_point(dom_node.get_offset().transformed(transform).to_type<CSSPixels>());
|
||||
|
||||
// FIXME: Once SVGFormattingContext does text layout this logic should move there.
|
||||
// https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties
|
||||
|
|
|
@ -19,8 +19,10 @@
|
|||
#include <LibWeb/Layout/ReplacedBox.h>
|
||||
#include <LibWeb/Layout/Viewport.h>
|
||||
#include <LibWeb/Painting/PaintableBox.h>
|
||||
#include <LibWeb/Painting/SVGPaintable.h>
|
||||
#include <LibWeb/Painting/StackingContext.h>
|
||||
#include <LibWeb/Painting/TableBordersPainting.h>
|
||||
#include <LibWeb/SVG/SVGMaskElement.h>
|
||||
|
||||
namespace Web::Painting {
|
||||
|
||||
|
@ -435,6 +437,27 @@ void StackingContext::paint(PaintContext& context) const
|
|||
if (opacity == 0.0f)
|
||||
return;
|
||||
|
||||
if (auto masking_area = paintable_box().get_masking_area(); masking_area.has_value()) {
|
||||
// TODO: Support masks and CSS transforms at the same time.
|
||||
// Note: Currently only SVG masking is implemented (which does not use CSS transforms anyway).
|
||||
if (masking_area->is_empty())
|
||||
return;
|
||||
auto paint_rect = context.enclosing_device_rect(*masking_area);
|
||||
auto bitmap_or_error = Gfx::Bitmap::create(Gfx::BitmapFormat::BGRA8888, paint_rect.size().to_type<int>());
|
||||
if (bitmap_or_error.is_error())
|
||||
return;
|
||||
auto bitmap = bitmap_or_error.release_value();
|
||||
{
|
||||
Gfx::Painter painter(bitmap);
|
||||
painter.translate(-paint_rect.location().to_type<int>());
|
||||
auto paint_context = context.clone(painter);
|
||||
paint_internal(paint_context);
|
||||
}
|
||||
paintable_box().apply_mask(context, bitmap, *masking_area);
|
||||
context.painter().blit(paint_rect.location().to_type<int>(), *bitmap, bitmap->rect(), opacity);
|
||||
return;
|
||||
}
|
||||
|
||||
auto affine_transform = affine_transform_matrix();
|
||||
auto translation = context.rounded_device_point(affine_transform.translation().to_type<CSSPixels>()).to_type<int>().to_type<float>();
|
||||
affine_transform.set_translation(translation);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue