RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 15:07:45 +00:00
Code Issues Activity Actions

LibWeb: Implement CSS transforms on stacking contexts

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibWeb/Painting/StackingContext.h
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;
};
}