Skip to content

Commit 2903860

Browse files
MartinZikmundMartinZikmund
authored
Merge pull request #22449 from unoplatform/dev/mazi/planeprojection
feat(Skia): Implement `PlaneProjection` and `Matrix3DProjection`
2 parents 2fc3adf + 8453f3b commit 2903860

File tree

21 files changed

+2306
-199
lines changed

21 files changed

+2306
-199
lines changed

‎src/SamplesApp/UITests.Shared/UITests.Shared.projitems‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4856,6 +4856,14 @@
48564856
<SubType>Designer</SubType>
48574857
<Generator>MSBuild:Compile</Generator>
48584858
</Page>
4859+
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\PlaneProjection_Basic.xaml">
4860+
<SubType>Designer</SubType>
4861+
<Generator>MSBuild:Compile</Generator>
4862+
</Page>
4863+
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\Matrix3DProjection_Basic.xaml">
4864+
<SubType>Designer</SubType>
4865+
<Generator>MSBuild:Compile</Generator>
4866+
</Page>
48594867
<Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\BrushesTests\Brushes_ImplicitConvert.xaml">
48604868
<SubType>Designer</SubType>
48614869
<Generator>MSBuild:Compile</Generator>
@@ -8801,6 +8809,12 @@
88018809
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\LoadedImageSurface\LoadedImageSurfaceTests.xaml.cs">
88028810
<DependentUpon>LoadedImageSurfaceTests.xaml</DependentUpon>
88038811
</Compile>
8812+
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\PlaneProjection_Basic.xaml.cs">
8813+
<DependentUpon>PlaneProjection_Basic.xaml</DependentUpon>
8814+
</Compile>
8815+
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Projection\Matrix3DProjection_Basic.xaml.cs">
8816+
<DependentUpon>Matrix3DProjection_Basic.xaml</DependentUpon>
8817+
</Compile>
88048818
<Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Media\Geometry\ArcSegmentPage.xaml.cs">
88058819
<DependentUpon>ArcSegmentPage.xaml</DependentUpon>
88068820
</Compile>

‎src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/Projection/Matrix3DProjection_Basic.xaml‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<Page
2+
x:Class="UITests.Shared.Windows_UI_Xaml_Media.Projection.Matrix3DProjection_Basic"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7+
mc:Ignorable="d"
8+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
9+
10+
<ScrollViewer>
11+
<StackPanel Spacing="20" Padding="20">
12+
<TextBlock Text="Matrix3DProjection - Custom 3D Matrix" FontSize="24" FontWeight="Bold" />
13+
<TextBlock Text="Matrix3DProjection allows you to apply a custom 4x4 transformation matrix for advanced 3D effects." TextWrapping="Wrap" />
14+
15+
<!-- Identity Matrix -->
16+
<Border Background="#E8F5E9" Padding="15" CornerRadius="8">
17+
<StackPanel>
18+
<TextBlock Text="Identity Matrix (No Transform)" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
19+
<Border Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center">
20+
<Rectangle x:Name="IdentityRect" Fill="#4CAF50" Width="100" Height="100" />
21+
</Border>
22+
<Button Content="Apply Identity Matrix" Click="OnApplyIdentity" Margin="0,10,0,0" HorizontalAlignment="Center" />
23+
</StackPanel>
24+
</Border>
25+
26+
<!-- Translation Matrix -->
27+
<Border Background="#E3F2FD" Padding="15" CornerRadius="8">
28+
<StackPanel>
29+
<TextBlock Text="Translation via Matrix3D" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
30+
<Grid>
31+
<Grid.ColumnDefinitions>
32+
<ColumnDefinition Width="*" />
33+
<ColumnDefinition Width="200" />
34+
</Grid.ColumnDefinitions>
35+
36+
<StackPanel Grid.Column="0" Spacing="5">
37+
<Slider x:Name="TranslateXSlider" Header="Translate X" Minimum="-50" Maximum="50" Value="0" />
38+
<Slider x:Name="TranslateYSlider" Header="Translate Y" Minimum="-50" Maximum="50" Value="0" />
39+
<Slider x:Name="TranslateZSlider" Header="Translate Z" Minimum="-100" Maximum="100" Value="0" />
40+
<Button Content="Apply Translation" Click="OnApplyTranslation" Margin="0,10,0,0" />
41+
</StackPanel>
42+
43+
<Border Grid.Column="1" Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center" VerticalAlignment="Center">
44+
<Rectangle x:Name="TranslationRect" Fill="#2196F3" Width="80" Height="80" />
45+
</Border>
46+
</Grid>
47+
</StackPanel>
48+
</Border>
49+
50+
<!-- Scale Matrix -->
51+
<Border Background="#FFF3E0" Padding="15" CornerRadius="8">
52+
<StackPanel>
53+
<TextBlock Text="Scale via Matrix3D" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
54+
<Grid>
55+
<Grid.ColumnDefinitions>
56+
<ColumnDefinition Width="*" />
57+
<ColumnDefinition Width="200" />
58+
</Grid.ColumnDefinitions>
59+
60+
<StackPanel Grid.Column="0" Spacing="5">
61+
<Slider x:Name="ScaleXSlider" Header="Scale X" Minimum="0.5" Maximum="2" Value="1" StepFrequency="0.1" />
62+
<Slider x:Name="ScaleYSlider" Header="Scale Y" Minimum="0.5" Maximum="2" Value="1" StepFrequency="0.1" />
63+
<Button Content="Apply Scale" Click="OnApplyScale" Margin="0,10,0,0" />
64+
</StackPanel>
65+
66+
<Border Grid.Column="1" Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center" VerticalAlignment="Center">
67+
<Rectangle x:Name="ScaleRect" Fill="#FF9800" Width="80" Height="80" />
68+
</Border>
69+
</Grid>
70+
</StackPanel>
71+
</Border>
72+
73+
<!-- Perspective Matrix -->
74+
<Border Background="#F3E5F5" Padding="15" CornerRadius="8">
75+
<StackPanel>
76+
<TextBlock Text="Perspective Effect" FontSize="18" FontWeight="SemiBold" Margin="0,0,0,10" />
77+
<TextBlock Text="Adjusting M34 creates a perspective effect" TextWrapping="Wrap" Margin="0,0,0,10" />
78+
<Grid>
79+
<Grid.ColumnDefinitions>
80+
<ColumnDefinition Width="*" />
81+
<ColumnDefinition Width="200" />
82+
</Grid.ColumnDefinitions>
83+
84+
<StackPanel Grid.Column="0" Spacing="5">
85+
<Slider x:Name="PerspectiveSlider" Header="Perspective (M34)" Minimum="-0.005" Maximum="0" Value="-0.001" StepFrequency="0.0001" />
86+
<Slider x:Name="PerspectiveRotationY" Header="Rotation Y" Minimum="-60" Maximum="60" Value="30" />
87+
<Button Content="Apply Perspective" Click="OnApplyPerspective" Margin="0,10,0,0" />
88+
</StackPanel>
89+
90+
<Border Grid.Column="1" Background="White" CornerRadius="4" Padding="30" HorizontalAlignment="Center" VerticalAlignment="Center">
91+
<Rectangle x:Name="PerspectiveRect" Fill="#9C27B0" Width="80" Height="80" />
92+
</Border>
93+
</Grid>
94+
</StackPanel>
95+
</Border>
96+
</StackPanel>
97+
</ScrollViewer>
98+
</Page>

‎src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Media/Projection/Matrix3DProjection_Basic.xaml.cs‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
using System;
2+
using Microsoft.UI.Xaml;
3+
using Microsoft.UI.Xaml.Controls;
4+
using Microsoft.UI.Xaml.Media;
5+
using Microsoft.UI.Xaml.Media.Media3D;
6+
using Uno.UI.Samples.Controls;
7+
8+
namespace UITests.Shared.Windows_UI_Xaml_Media.Projection;
9+
10+
[Sample("Projection", Name = "Matrix3DProjection_Basic", Description = "Matrix3DProjection with custom 4x4 transformation matrix")]
11+
public sealed partial class Matrix3DProjection_Basic : Page
12+
{
13+
public Matrix3DProjection_Basic()
14+
{
15+
this.InitializeComponent();
16+
}
17+
18+
private void OnApplyIdentity(object sender, RoutedEventArgs e)
19+
{
20+
IdentityRect.Projection = new Matrix3DProjection
21+
{
22+
ProjectionMatrix = Matrix3D.Identity
23+
};
24+
}
25+
26+
private void OnApplyTranslation(object sender, RoutedEventArgs e)
27+
{
28+
var translateX = TranslateXSlider.Value;
29+
var translateY = TranslateYSlider.Value;
30+
var translateZ = TranslateZSlider.Value;
31+
32+
// Create a translation matrix
33+
var matrix = new Matrix3D(
34+
1, 0, 0, 0,
35+
0, 1, 0, 0,
36+
0, 0, 1, 0,
37+
translateX, translateY, translateZ, 1);
38+
39+
TranslationRect.Projection = new Matrix3DProjection
40+
{
41+
ProjectionMatrix = matrix
42+
};
43+
}
44+
45+
private void OnApplyScale(object sender, RoutedEventArgs e)
46+
{
47+
var scaleX = ScaleXSlider.Value;
48+
var scaleY = ScaleYSlider.Value;
49+
50+
// Create a scale matrix
51+
var matrix = new Matrix3D(
52+
scaleX, 0, 0, 0,
53+
0, scaleY, 0, 0,
54+
0, 0, 1, 0,
55+
0, 0, 0, 1);
56+
57+
ScaleRect.Projection = new Matrix3DProjection
58+
{
59+
ProjectionMatrix = matrix
60+
};
61+
}
62+
63+
private void OnApplyPerspective(object sender, RoutedEventArgs e)
64+
{
65+
var perspective = PerspectiveSlider.Value;
66+
var rotationY = PerspectiveRotationY.Value * Math.PI / 180.0;
67+
68+
// Create rotation Y matrix
69+
var cosY = Math.Cos(rotationY);
70+
var sinY = Math.Sin(rotationY);
71+
72+
// Combine rotation with perspective
73+
var matrix = new Matrix3D(
74+
cosY, 0, sinY, 0,
75+
0, 1, 0, 0,
76+
-sinY, 0, cosY, perspective,
77+
0, 0, 0, 1);
78+
79+
PerspectiveRect.Projection = new Matrix3DProjection
80+
{
81+
ProjectionMatrix = matrix
82+
};
83+
}
84+
}

0 commit comments

Comments
 (0)