Skip to content

feat: add transform-skew-x/y support - #12660

Open
NLazyCat wants to merge 7 commits into
slint-ui:masterfrom
NLazyCat:skew-transform
Open

feat: add transform-skew-x/y support#12660
NLazyCat wants to merge 7 commits into
slint-ui:masterfrom
NLazyCat:skew-transform

Conversation

@NLazyCat

@NLazyCat NLazyCat commented Jul 27, 2026

Copy link
Copy Markdown

Add transform-skew-x and transform-skew-y properties to Slint, enabling CSS-like skew/oblique transforms on any element.

Closes the missing SkewTransform from the WinUI → Slint mapping.

Changes:

  • Runtime: Added transform_skew_x/transform_skew_y properties to the Transform item and skew() method to the ItemRenderer trait
  • Skia renderer: Implemented via canvas.skew() + euclid pre_skew
  • FemtoVG renderer: Implemented via skew_x()/skew_y() with clip bounding box recomputation
  • Software renderer: Stub (tracked in Path: fix panic when accessing properties on sub commands #6068, same as rotate/scale)
  • Compiler: Registered transform-skew-x/transform-skew-y as reserved transform properties (typeregister, builtins, lowering, debug hooks)
  • Coordinate mapping: Composed skew into children_transform() for correct input event handling

Usage:

Rectangle {
transform-skew-x: 20deg;
transform-skew-y: -10deg;
}

Testing:

  • Added screenshot test (tests/screenshots/cases/transforms/skew.slint)
  • All 3 backends pass: software, software_embed_assets, skia

NLazyCat and others added 7 commits July 27, 2026 22:05
Add skew transform properties to Slint, enabling CSS-like skew/oblique
transforms on any element.

- Add transform_skew_x/y properties to Transform item
- Add skew() method to ItemRenderer trait
- Implement skew in Skia renderer (canvas.skew + euclid pre_skew)
- Implement skew in FemtoVG renderer (skew_x/skew_y + clip recomputation)
- Add stub in Software renderer (tracked in slint-ui#6068)
- Register transform-skew-x/y in compiler (typeregister, builtins, lowering)
- Compose skew into children_transform for coordinate mapping
- Add screenshot tests (3/3 passing: software, software_embed_assets, skia)
- Add skew() to Qt renderer using QTransform::shear
- Import num_traits::Float in item_tree.rs for no_std compatibility
@ogoffart

Copy link
Copy Markdown
Member

Thanks for the PR. What is the use case for this feature?

@NLazyCat

Copy link
Copy Markdown
Author

I'm doing a mechanical migration of a WinUI3 component library to Slint. WinUI3 has SkewTransform (AngleX/AngleY) and CompositeTransform (which includes SkewX/SkewY) — Slint currently has no equivalent for these, so transform-skew-x/y is needed to unblock the migration path.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants