1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 01:27:34 +00:00

LibWeb: Implement CSS transforms on stacking contexts

Since there is currently no easy way to handle rotations and skews
with LibGfx this only implements translation and scaling by first
constructing a general 4x4 transformation matrix like outlined in
the css-transforms-1 specification. This is then downgraded to a
Gfx::AffineTransform in order to transform the destination rectangle
used with draw_scaled_bitmap()

While rotation would be nice this already looks pretty good :^)
This commit is contained in:
Simon Wanner 2022-03-18 01:29:20 +01:00 committed by Andreas Kling
parent 7c79fc209f
commit a2331e8dd3
4 changed files with 121 additions and 42 deletions

View file

@ -7,6 +7,7 @@
#pragma once
#include <AK/Vector.h>
#include <LibGfx/Matrix4x4.h>
#include <LibWeb/Layout/Node.h>
#include <LibWeb/Painting/Paintable.h>
@ -41,6 +42,9 @@ private:
Vector<StackingContext*> m_children;
void paint_internal(PaintContext&) const;
Gfx::FloatMatrix4x4 get_transformation_matrix(CSS::Transformation const& transformation) const;
Gfx::FloatMatrix4x4 combine_transformations(Vector<CSS::Transformation> const& transformations) const;
Gfx::AffineTransform combine_transformations_2d(Vector<CSS::Transformation> const& transformations) const;
};
}