TRANSFORM Archives - icodebroker

[C#/WINUI3/.NET8] PlaneProjection 엘리먼트 : RotationX/RotationY/RotationZ/CenterOfRotationX/CenterOfRotationY 속성 사용하기

■ PlaneProjection 엘리먼트의 RotationX/RotationY/RotationZ/CenterOfRotationX/CenterOfRotationY 속성을 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

[C#/WINUI3/.NET8] Rectangle 엘리먼트 : RenderTransform 속성에서 RotateTransform 객체를 사용해 사각형 회전 애니메이션 만들기 2

■ Rectangle 엘리먼트의 RenderTransform 속성에서 RotateTransform 객체를 사용해 사각형 회전 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj

[C#/WINUI3/.NET8] PlaneProjection 엘리먼트 : RotationX/RotationY/RotationZ 속성 사용하기

■ PlaneProjection 엘리먼트의 RotationX/RotationY/RotationZ 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        Margin="50"
        Background="Gray">
        <StackPanel.Projection>
            <PlaneProjection
                RotationX="-35"
                RotationY="-35"
                RotationZ="15" />
        </StackPanel.Projection>
        <TextBlock Margin="10">Type Something Below</TextBlock>
        <TextBox Margin="10" />
        <Button
            Margin="10"
            Width="100"
            Content="Click" />
    </StackPanel>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

Margin="50"

Background="Gray">

<StackPanel.Projection>

<PlaneProjection

RotationX="-35"

RotationY="-35"

RotationZ="15" />

</StackPanel.Projection>

<TextBlock Margin="10">Type Something Below</TextBlock>

<Button

Margin="10"

Width="100"

Content="Click" />

</StackPanel>

</Page>

[C#/WINUI3/.NET8] StackPanel 엘리먼트 : Projection 속성에서 PlaneProjection 객체 사용하기

■ StackPanel 엘리먼트의 Projection 속성에서 PlaneProjection 객체를 사용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/.NET8] Rectangle 엘리먼트 : RenderTransform 속성에서 RotateTransform 객체를 사용해 사각형 회전 애니메이션 만들기 1

[HTML/HTML5] canvas 엘리먼트 : 복합 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 복합 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillRect(0, 0, 100, 100);

                var angle = Math.PI * 45 / 180;

                context.transform(1, 0, 0, 1, 200, 10);
                context.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0);
                context.transform(2, 0, 0, 2, 0, 0);

                context.fillRect(0, 0, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillRect(0, 0, 100, 100);

var angle = Math.PI * 45 / 180;

context.transform(1, 0, 0, 1, 200, 10);

context.transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0);

context.transform(2, 0, 0, 2, 0, 0);

context.fillRect(0, 0, 100, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 크기 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 크기 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillRect(100, 100, 100, 100);
                context.fillRect(200, 200, 200, 200);

                context.scale(0.5, 1);

                context.fillStyle = 'blue';

                context.fillRect(200, 200, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillRect(100, 100, 100, 100);

context.fillRect(200, 200, 200, 200);

context.scale(0.5, 1);

context.fillStyle = 'blue';

context.fillRect(200, 200, 100, 100);

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 회전 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 회전 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                for(var i = 0; i < 12; i++)
                {
                    context.save();

                    context.translate(100, 100);

                    var angle = (Math.PI * 30 * i) / 180;

                    context.rotate(angle);

                    context.fillStyle = 'rgb(0, 0, 255)';

                    context.fillRect(0, 0, 100, 10);

                    context.restore();
                }
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

for(var i = 0; i < 12; i++)

{

context.save();

context.translate(100, 100);

var angle = (Math.PI * 30 * i) / 180;

context.rotate(angle);

context.fillStyle = 'rgb(0, 0, 255)';

context.fillRect(0, 0, 100, 10);

context.restore();

}

</script>

</head>

</body>

</html>

[HTML/HTML5] canvas 엘리먼트 : 이동 변환을 사용해 사각형 그리기

■ canvas 엘리먼트에서 이동 변환을 사용해 사각형을 그리는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onLoad()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.fillRect(0, 0, 100, 100);
                context.translate(100, 100);
                context.fillRect(0, 0, 100, 100);
            }
        </script>
    </head>
    <body onload="onLoad();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function onLoad()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.fillRect(0, 0, 100, 100);

context.translate(100, 100);

context.fillRect(0, 0, 100, 100);

}

</script>

</head>

</body>

</html>

[C#/WPF] GeometryModel3D 엘리먼트 : Transform 속성에서 Transform3DGroup 객체를 사용해 복수 변환 설정하기

■ GeometryModel3D 엘리먼트의 Transform 속성에서 Transform3DGroup 객체를 사용해 복수 변환을 설정하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Viewport3D
        Width="500"
        Height="500"
        ClipToBounds="True">
        <Viewport3D.Camera>
            <PerspectiveCamera
                Position="0 0 2"
                LookDirection="0 0 -1"
                FieldOfView="60" />
        </Viewport3D.Camera>
        <Viewport3D.Children>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <DirectionalLight
                        Direction="-0.612372 -0.5 -0.612372"
                        Color="#ffffff" />
                </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D
                                TriangleIndices="0 1 2 3 4 5"
                                Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"
                                TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"
                                Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />
                        </GeometryModel3D.Geometry>
                        <GeometryModel3D.Material>
                            <MaterialGroup>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <LinearGradientBrush
                                            StartPoint="0 0.5"
                                            EndPoint="1 0.5">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0"    Color="Yellow"    />
                                                <GradientStop Offset="0.25" Color="Red"       />
                                                <GradientStop Offset="0.75" Color="Blue"      />
                                                <GradientStop Offset="1"    Color="LimeGreen" />
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </MaterialGroup>
                        </GeometryModel3D.Material>
                        <GeometryModel3D.Transform>
                            <Transform3DGroup>
                                <Transform3DGroup.Children>
                                    <RotateTransform3D>
                                        <RotateTransform3D.Rotation>
                                            <AxisAngleRotation3D
                                                Axis="0 3 0"
                                                Angle="40" />
                                        </RotateTransform3D.Rotation>
                                    </RotateTransform3D>
                                    <ScaleTransform3D
                                        CenterX="0"
                                        CenterY="0"
                                        CenterZ="0"
                                        ScaleX="2"
                                        ScaleY="0.5"
                                        ScaleZ="1" />
                                </Transform3DGroup.Children>
                            </Transform3DGroup>
                        </GeometryModel3D.Transform>
                    </GeometryModel3D>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D.Children>
    </Viewport3D>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Viewport3D

Width="500"

Height="500"

ClipToBounds="True">

<Viewport3D.Camera>

<PerspectiveCamera

Position="0 0 2"

LookDirection="0 0 -1"

FieldOfView="60" />

</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D.Content>

<DirectionalLight

Direction="-0.612372 -0.5 -0.612372"

Color="#ffffff" />

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D.Content>

<GeometryModel3D.Geometry>

<MeshGeometry3D

TriangleIndices="0 1 2 3 4 5"

Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"

TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"

Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial.Brush>

<LinearGradientBrush

StartPoint="0 0.5"

EndPoint="1 0.5">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</MaterialGroup>

</GeometryModel3D.Material>

<GeometryModel3D.Transform>

<Transform3DGroup.Children>

<RotateTransform3D.Rotation>

<AxisAngleRotation3D

Axis="0 3 0"

Angle="40" />

</RotateTransform3D.Rotation>

</RotateTransform3D>

<ScaleTransform3D

CenterX="0"

CenterY="0"

CenterZ="0"

ScaleX="2"

ScaleY="0.5"

ScaleZ="1" />

</Transform3DGroup.Children>

</Transform3DGroup>

</GeometryModel3D.Transform>

</GeometryModel3D>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D.Children>

</Viewport3D>

</Window>

TestProject.zip

[C#/WPF] GeometryModel3D 엘리먼트 : Transform 속성에서 ScaleTransform3D 객체를 사용해 애니메이션 만들기

■ GeometryModel3D 엘리먼트의 Transform 속성에서 ScaleTransform3D 객체를 사용해 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Viewport3D
        Width="500"
        Height="500"
        ClipToBounds="True">
        <Viewport3D.Camera>
            <PerspectiveCamera
                Position="0 0 2"
                LookDirection="0 0 -1"
                FieldOfView="60" />
        </Viewport3D.Camera>
        <Viewport3D.Children>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <DirectionalLight
                        Direction="-0.612372 -0.5 -0.612372"
                        Color="#ffffff" />
                </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D
                                TriangleIndices="0 1 2 3 4 5"
                                Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"
                                TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"
                                Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />
                        </GeometryModel3D.Geometry>
                        <GeometryModel3D.Material>
                            <MaterialGroup>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <LinearGradientBrush
                                            StartPoint="0 0.5"
                                            EndPoint="1 0.5">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0"    Color="Yellow"    />
                                                <GradientStop Offset="0.25" Color="Red"       />
                                                <GradientStop Offset="0.75" Color="Blue"      />
                                                <GradientStop Offset="1"    Color="LimeGreen" />
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </MaterialGroup>
                        </GeometryModel3D.Material>
                        <GeometryModel3D.Transform>
                            <ScaleTransform3D x:Name="scaleTransform3D"
                                CenterX="0"
                                CenterY="0"
                                CenterZ="0"
                                ScaleX="1"
                                ScaleY="1"
                                ScaleZ="1" />
                        </GeometryModel3D.Transform>
                    </GeometryModel3D>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D.Children>
        <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="scaleTransform3D"
                            Storyboard.TargetProperty="ScaleX"
                            Duration="00:00:03"
                            From="1"
                            To="5"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                        <DoubleAnimation
                            Storyboard.TargetName="scaleTransform3D"
                            Storyboard.TargetProperty="ScaleY"
                            Duration="00:00:03"
                            From="1"
                            To="5"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Viewport3D.Triggers>
    </Viewport3D>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Viewport3D

Width="500"

Height="500"

ClipToBounds="True">

<Viewport3D.Camera>

<PerspectiveCamera

Position="0 0 2"

LookDirection="0 0 -1"

FieldOfView="60" />

</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D.Content>

<DirectionalLight

Direction="-0.612372 -0.5 -0.612372"

Color="#ffffff" />

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D.Content>

<GeometryModel3D.Geometry>

<MeshGeometry3D

TriangleIndices="0 1 2 3 4 5"

Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"

TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"

Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial.Brush>

<LinearGradientBrush

StartPoint="0 0.5"

EndPoint="1 0.5">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</MaterialGroup>

</GeometryModel3D.Material>

<GeometryModel3D.Transform>

<ScaleTransform3D x:Name="scaleTransform3D"

CenterX="0"

CenterY="0"

CenterZ="0"

ScaleX="1"

ScaleY="1"

ScaleZ="1" />

</GeometryModel3D.Transform>

</GeometryModel3D>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D.Children>

<Viewport3D.Triggers>

<DoubleAnimation

Storyboard.TargetName="scaleTransform3D"

Storyboard.TargetProperty="ScaleX"

Duration="00:00:03"

From="1"

To="5"

AutoReverse="True"

RepeatBehavior="Forever" />

<DoubleAnimation

Storyboard.TargetName="scaleTransform3D"

Storyboard.TargetProperty="ScaleY"

Duration="00:00:03"

From="1"

To="5"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Viewport3D.Triggers>

</Viewport3D>

</Window>

TestProject.zip

[C#/WPF] GeometryModel3D 엘리먼트 : Transform 속성에서 RotateTransform3D 객체를 사용해 애니메이션 만들기

■ GeometryModel3D 엘리먼트의 Transform 속성에서 RotateTransform3D 객체를 사용해 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Viewport3D
        Width="500"
        Height="500"
        ClipToBounds="True">
        <Viewport3D.Camera>
            <PerspectiveCamera
                Position="0 0 2"
                LookDirection="0 0 -1"
                FieldOfView="60" />
        </Viewport3D.Camera>
        <Viewport3D.Children>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <DirectionalLight
                        Direction="-0.612372 -0.5 -0.612372"
                        Color="#ffffff" />
                </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <DirectionalLight
                        Direction="0.612372 -0.5 -0.612372"
                        Color="#ffffff" />
                </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D
                                TriangleIndices="0 1 2 3 4 5"
                                Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"
                                TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"
                                Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />
                        </GeometryModel3D.Geometry>
                        <GeometryModel3D.Material>
                            <MaterialGroup>
                                <DiffuseMaterial>
                                    <DiffuseMaterial.Brush>
                                        <LinearGradientBrush
                                            StartPoint="0 0.5"
                                            EndPoint="1 0.5">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0"    Color="Yellow"    />
                                                <GradientStop Offset="0.25" Color="Red"       />
                                                <GradientStop Offset="0.75" Color="Blue"      />
                                                <GradientStop Offset="1"    Color="LimeGreen" />
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </DiffuseMaterial.Brush>
                                </DiffuseMaterial>
                            </MaterialGroup>
                        </GeometryModel3D.Material>
                        <GeometryModel3D.Transform>
                            <RotateTransform3D>
                                <RotateTransform3D.Rotation>
                                    <AxisAngleRotation3D x:Name="axisAngleRotation3D"
                                        Axis="0 3 0"
                                        Angle="40" />
                                </RotateTransform3D.Rotation>
                            </RotateTransform3D>
                        </GeometryModel3D.Transform>
                    </GeometryModel3D>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D.Children>
        <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="axisAngleRotation3D"
                            Storyboard.TargetProperty="Angle"
                            Duration="00:00:04"
                            From="-60"
                            To="60"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                        <Vector3DAnimation
                            Storyboard.TargetName="axisAngleRotation3D"
                            Storyboard.TargetProperty="Axis"
                            Duration="00:00:04"
                            From="0 3 0"
                            To="1 0 1"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Viewport3D.Triggers>
    </Viewport3D>
</Window>

100

101

102

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Viewport3D

Width="500"

Height="500"

ClipToBounds="True">

<Viewport3D.Camera>

<PerspectiveCamera

Position="0 0 2"

LookDirection="0 0 -1"

FieldOfView="60" />

</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D.Content>

<DirectionalLight

Direction="-0.612372 -0.5 -0.612372"

Color="#ffffff" />

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D.Content>

<DirectionalLight

Direction="0.612372 -0.5 -0.612372"

Color="#ffffff" />

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D.Content>

<GeometryModel3D.Geometry>

<MeshGeometry3D

TriangleIndices="0 1 2 3 4 5"

Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"

TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"

Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial.Brush>

<LinearGradientBrush

StartPoint="0 0.5"

EndPoint="1 0.5">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</MaterialGroup>

</GeometryModel3D.Material>

<GeometryModel3D.Transform>

<RotateTransform3D.Rotation>

<AxisAngleRotation3D x:Name="axisAngleRotation3D"

Axis="0 3 0"

Angle="40" />

</RotateTransform3D.Rotation>

</RotateTransform3D>

</GeometryModel3D.Transform>

</GeometryModel3D>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D.Children>

<Viewport3D.Triggers>

<DoubleAnimation

Storyboard.TargetName="axisAngleRotation3D"

Storyboard.TargetProperty="Angle"

Duration="00:00:04"

From="-60"

To="60"

AutoReverse="True"

RepeatBehavior="Forever" />

<Vector3DAnimation

Storyboard.TargetName="axisAngleRotation3D"

Storyboard.TargetProperty="Axis"

Duration="00:00:04"

From="0 3 0"

To="1 0 1"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Viewport3D.Triggers>

</Viewport3D>

</Window>

TestProject.zip

[C#/WPF] GeometryModel3D 엘리먼트 : Transform 속성에서 TranslateTransform3D 객체를 사용해 애니메이션 만들기

■ GeometryModel3D 엘리먼트의 Transform 속성에서 TranslateTransform3D 객체를 사용해 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Margin="10"
        Height="300">
        <Viewport3D
            Width="600"
            Height="150"
            ClipToBounds="True">
            <Viewport3D.Camera>
                <PerspectiveCamera
                    Position="0 0 2"
                    LookDirection="0 0 -1"
                    FieldOfView="60" />
            </Viewport3D.Camera>
            <Viewport3D.Children>
                <ModelVisual3D>
                    <ModelVisual3D.Content>
                        <DirectionalLight
                            Direction="-0.612372 -0.5 -0.612372"
                            Color="#ffffff" />
                    </ModelVisual3D.Content>
                </ModelVisual3D>
                <ModelVisual3D>
                    <ModelVisual3D.Content>
                        <GeometryModel3D>
                            <GeometryModel3D.Geometry>
                                <MeshGeometry3D
                                    TriangleIndices="0 1 2 3 4 5"
                                    Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"
                                    TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"
                                    Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />
                            </GeometryModel3D.Geometry>
                            <GeometryModel3D.Material>
                                <MaterialGroup>
                                    <DiffuseMaterial>
                                        <DiffuseMaterial.Brush>
                                            <SolidColorBrush
                                                Opacity="0.3"
                                                Color="Cyan" />
                                        </DiffuseMaterial.Brush>
                                    </DiffuseMaterial>
                                </MaterialGroup>
                            </GeometryModel3D.Material>
                            <GeometryModel3D.Transform>
                                <TranslateTransform3D x:Name="translateTransform3D"
                                    OffsetX="0"
                                    OffsetY="0"
                                    OffsetZ="0" />
                            </GeometryModel3D.Transform>
                        </GeometryModel3D>
                    </ModelVisual3D.Content>
                </ModelVisual3D>
            </Viewport3D.Children>
            <Viewport3D.Triggers>
                <EventTrigger RoutedEvent="Viewport3D.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="translateTransform3D"
                                Storyboard.TargetProperty="OffsetX"
                                To="-0.8"
                                AutoReverse="True"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Viewport3D.Triggers>
        </Viewport3D>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Margin="10"

Height="300">

<Viewport3D

Width="600"

Height="150"

ClipToBounds="True">

<Viewport3D.Camera>

<PerspectiveCamera

Position="0 0 2"

LookDirection="0 0 -1"

FieldOfView="60" />

</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D.Content>

<DirectionalLight

Direction="-0.612372 -0.5 -0.612372"

Color="#ffffff" />

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D.Content>

<GeometryModel3D.Geometry>

<MeshGeometry3D

TriangleIndices="0 1 2 3 4 5"

Normals="0 0 1 0 0 1 0 0 1 0 0 1 0 0 1 0 0 1"

TextureCoordinates="0 0 1 0 1 1 1 1 0 1 0 0"

Positions="-0.5 -0.5 0.5 0.5 -0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 -0.5 0.5 0.5 -0.5 -0.5 0.5" />

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial.Brush>

<SolidColorBrush

Opacity="0.3"

Color="Cyan" />

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</MaterialGroup>

</GeometryModel3D.Material>

<GeometryModel3D.Transform>

<TranslateTransform3D x:Name="translateTransform3D"

OffsetX="0"

OffsetY="0"

OffsetZ="0" />

</GeometryModel3D.Transform>

</GeometryModel3D>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D.Children>

<Viewport3D.Triggers>

<DoubleAnimation

Storyboard.TargetName="translateTransform3D"

Storyboard.TargetProperty="OffsetX"

To="-0.8"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Viewport3D.Triggers>

</Viewport3D>

</Canvas>

</Window>

TestProject.zip

[C#/WPF] MatrixConverter 클래스 : ConvertFromString 메소드를 사용해 문자열에서 Matrix 객체 구하기

■ MatrixConverter 클래스의 ConvertFromString 메소드를 사용해 문자열에서 Matrix 객체를 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using System.Windows.Media;

MatrixConverter converter = new MatrixConverter();

string sourceString = "10,20,30,40,50,60";

Matrix targetMartix = (Matrix)converter.ConvertFromString(sourceString);

using System.Windows.Media;

MatrixConverter converter = new MatrixConverter();

string sourceString = "10,20,30,40,50,60";

Matrix targetMartix = (Matrix)converter.ConvertFromString(sourceString);

[C#/WPF] TransformGroup 엘리먼트 사용하기

■ TransformGroup 엘리먼트를 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DrawingBrush x:Key="BlueGridDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="TextWrapping" Value="Wrap" />
        </Style>
    </Window.Resources>
    <ScrollViewer>
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="10"   />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="10"   />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="10"   />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0">No transform</TextBlock>
            <Border Grid.Row="1" Grid.Column="0"
                Margin="0 5 0 0"
                BorderThickness="1"
                BorderBrush="Black"
                Background="{StaticResource BlueGridDrawingBrushKey}">
                <Canvas
                    Width="200"
                    Height="200">
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0" />
                </Canvas>
            </Border>
            <TextBlock Grid.Row="3" Grid.Column="0">Rotate</TextBlock>
            <Border Grid.Row="4" Grid.Column="0"
                Margin="0 5 0 0"
                BorderThickness="1"
                BorderBrush="Black"
                Background="{StaticResource BlueGridDrawingBrushKey}">
                <Canvas
                    Width="200"
                    Height="200">
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0">
                        <Polyline.RenderTransform>
                            <RotateTransform
                                CenterX="25"
                                CenterY="50"
                                Angle="45" />
                        </Polyline.RenderTransform>
                    </Polyline>
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Opacity="0.25" />
                </Canvas>
            </Border>
            <TextBlock Grid.Row="6" Grid.Column="0">Translate</TextBlock>
            <Border Grid.Row="7" Grid.Column="0"
                Margin="0 5 0 0"
                BorderThickness="1"
                BorderBrush="Black"
                Background="{StaticResource BlueGridDrawingBrushKey}">
                <Canvas
                    Width="200"
                    Height="200">
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0"
                        StrokeThickness="10"
                        Stroke="Blue">
                        <Polyline.RenderTransform>
                            <TranslateTransform
                                X="50"
                                Y="0" />
                        </Polyline.RenderTransform>
                    </Polyline>
                    <Polyline  Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Opacity="0.25"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0" />
                </Canvas>
            </Border>
            <TextBlock Grid.Row="0" Grid.Column="2">Rotate then Translate</TextBlock>
            <Border Grid.Row="1" Grid.Column="2"
                Margin="0 5 0 0"
                BorderThickness="1"
                BorderBrush="Black"
                Background="{StaticResource BlueGridDrawingBrushKey}">
                <Canvas
                    Width="200"
                    Height="200">
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0">
                        <Polyline.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <TransformCollection>
                                        <RotateTransform
                                            CenterX="25"
                                            CenterY="50"
                                            Angle="45" />
                                        <TranslateTransform
                                            X="50"
                                            Y="0" />
                                    </TransformCollection>
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Polyline.RenderTransform>
                    </Polyline>
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Opacity="0.25"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0" />
                </Canvas>
            </Border>
            <TextBlock Grid.Row="3" Grid.Column="2">Translate then Rotate</TextBlock>
            <Border Grid.Row="4" Grid.Column="2"
                Margin="0 5 0 0"
                BorderThickness="1"
                BorderBrush="Black"
                Background="{StaticResource BlueGridDrawingBrushKey}">
                <Canvas
                    Width="200"
                    Height="200">
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0">
                        <Polyline.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <TransformCollection>
                                        <TranslateTransform
                                            X="50"
                                            Y="0" />
                                        <RotateTransform
                                            CenterX="25"
                                            CenterY="50"
                                            Angle="45" />
                                    </TransformCollection>
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Polyline.RenderTransform>
                    </Polyline>
                    <Polyline Canvas.Left="75" Canvas.Top="50"
                        StrokeThickness="10"
                        Stroke="Blue"
                        Opacity="0.25"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0" />
                </Canvas>
            </Border>
            <TextBlock Grid.Row="6" Grid.Column="2">Animation</TextBlock>
            <Border Grid.Row="7" Grid.Column="2"
                Margin="0 5 0 0"
                BorderThickness="1"
                BorderBrush="Black"
                Background="{StaticResource BlueGridDrawingBrushKey}">
                <Canvas
                    Width="200"
                    Height="200">
                    <Polyline Name="targetPolyline" Canvas.Left="75" Canvas.Top="50"
                        Points="25 25 0 50 25 75 50 50 25 25 25 0"
                        StrokeThickness="10"
                        Stroke="Blue">
                        <Polyline.RenderTransform>
                            <TransformGroup>
                                <TransformGroup.Children>
                                    <TransformCollection>
                                        <RotateTransform x:Name="targetRotateTransform"
                                            CenterX="25"
                                            CenterY="50"
                                            Angle="0" />
                                        <ScaleTransform x:Name="targetScaleTransform"
                                            CenterX="25"
                                            CenterY="50"
                                            ScaleX="1"
                                            ScaleY="1" />
                                     </TransformCollection>
                                </TransformGroup.Children>
                            </TransformGroup>
                        </Polyline.RenderTransform>
                    </Polyline>
                </Canvas>
            </Border>
            <StackPanel Grid.Row="8" Grid.Column="2"
                Margin="0 5 0 0"
                Orientation="Horizontal">
                <Button Name="startButton"
                    Width="50"
                    Height="25">
                    Start
                </Button>
                <Button Name="stopButton"
                    Margin="5 0 0 0"
                    Width="50"
                    Height="25">
                    Stop
                </Button>
                <StackPanel.Triggers>
                    <EventTrigger
                        SourceName="startButton"
                        RoutedEvent="Button.Click">
                        <BeginStoryboard Name="startBeginStoryboard">
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="targetRotateTransform"
                                    Storyboard.TargetProperty="Angle"
                                    Duration="00:00:05"
                                    From="0"
                                    To="360"
                                    RepeatBehavior="Forever" />
                                <DoubleAnimation
                                    Storyboard.TargetName="targetScaleTransform"
                                    Storyboard.TargetProperty="ScaleX"
                                    Duration="00:00:05"
                                    From="0"
                                    To="3"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True" />
                                <DoubleAnimation
                                    Storyboard.TargetName="targetScaleTransform"
                                    Storyboard.TargetProperty="ScaleY"
                                    Duration="00:00:05"
                                    From="0"
                                    To="3"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger
                        SourceName="stopButton"
                        RoutedEvent="Button.Click">
                        <StopStoryboard BeginStoryboardName="startBeginStoryboard" />
                    </EventTrigger>
                </StackPanel.Triggers>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<DrawingBrush x:Key="BlueGridDrawingBrushKey"

ViewportUnits="Absolute"

Viewport="0 0 10 10"

TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Style>

</Window.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0">No transform</TextBlock>

<Border Grid.Row="1" Grid.Column="0"

Margin="0 5 0 0"

BorderThickness="1"

BorderBrush="Black"

Background="{StaticResource BlueGridDrawingBrushKey}">

<Canvas

Width="200"

Height="200">

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Points="25 25 0 50 25 75 50 50 25 25 25 0" />

</Canvas>

</Border>

<TextBlock Grid.Row="3" Grid.Column="0">Rotate</TextBlock>

<Border Grid.Row="4" Grid.Column="0"

Margin="0 5 0 0"

BorderThickness="1"

BorderBrush="Black"

Background="{StaticResource BlueGridDrawingBrushKey}">

<Canvas

Width="200"

Height="200">

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Points="25 25 0 50 25 75 50 50 25 25 25 0">

<Polyline.RenderTransform>

<RotateTransform

CenterX="25"

CenterY="50"

Angle="45" />

</Polyline.RenderTransform>

</Polyline>

<Polyline Canvas.Left="75" Canvas.Top="50"

Points="25 25 0 50 25 75 50 50 25 25 25 0"

StrokeThickness="10"

Stroke="Blue"

Opacity="0.25" />

</Canvas>

</Border>

<TextBlock Grid.Row="6" Grid.Column="0">Translate</TextBlock>

<Border Grid.Row="7" Grid.Column="0"

Margin="0 5 0 0"

BorderThickness="1"

BorderBrush="Black"

Background="{StaticResource BlueGridDrawingBrushKey}">

<Canvas

Width="200"

Height="200">

<Polyline Canvas.Left="75" Canvas.Top="50"

Points="25 25 0 50 25 75 50 50 25 25 25 0"

StrokeThickness="10"

Stroke="Blue">

<Polyline.RenderTransform>

<TranslateTransform

X="50"

Y="0" />

</Polyline.RenderTransform>

</Polyline>

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Opacity="0.25"

Points="25 25 0 50 25 75 50 50 25 25 25 0" />

</Canvas>

</Border>

<TextBlock Grid.Row="0" Grid.Column="2">Rotate then Translate</TextBlock>

<Border Grid.Row="1" Grid.Column="2"

Margin="0 5 0 0"

BorderThickness="1"

BorderBrush="Black"

Background="{StaticResource BlueGridDrawingBrushKey}">

<Canvas

Width="200"

Height="200">

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Points="25 25 0 50 25 75 50 50 25 25 25 0">

<Polyline.RenderTransform>

<TransformGroup.Children>

<RotateTransform

CenterX="25"

CenterY="50"

Angle="45" />

<TranslateTransform

X="50"

Y="0" />

</TransformCollection>

</TransformGroup.Children>

</TransformGroup>

</Polyline.RenderTransform>

</Polyline>

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Opacity="0.25"

Points="25 25 0 50 25 75 50 50 25 25 25 0" />

</Canvas>

</Border>

<TextBlock Grid.Row="3" Grid.Column="2">Translate then Rotate</TextBlock>

<Border Grid.Row="4" Grid.Column="2"

Margin="0 5 0 0"

BorderThickness="1"

BorderBrush="Black"

Background="{StaticResource BlueGridDrawingBrushKey}">

<Canvas

Width="200"

Height="200">

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Points="25 25 0 50 25 75 50 50 25 25 25 0">

<Polyline.RenderTransform>

<TransformGroup.Children>

<TranslateTransform

X="50"

Y="0" />

<RotateTransform

CenterX="25"

CenterY="50"

Angle="45" />

</TransformCollection>

</TransformGroup.Children>

</TransformGroup>

</Polyline.RenderTransform>

</Polyline>

<Polyline Canvas.Left="75" Canvas.Top="50"

StrokeThickness="10"

Stroke="Blue"

Opacity="0.25"

Points="25 25 0 50 25 75 50 50 25 25 25 0" />

</Canvas>

</Border>

<TextBlock Grid.Row="6" Grid.Column="2">Animation</TextBlock>

<Border Grid.Row="7" Grid.Column="2"

Margin="0 5 0 0"

BorderThickness="1"

BorderBrush="Black"

Background="{StaticResource BlueGridDrawingBrushKey}">

<Canvas

Width="200"

Height="200">

<Polyline Name="targetPolyline" Canvas.Left="75" Canvas.Top="50"

Points="25 25 0 50 25 75 50 50 25 25 25 0"

StrokeThickness="10"

Stroke="Blue">

<Polyline.RenderTransform>

<TransformGroup.Children>

<RotateTransform x:Name="targetRotateTransform"

CenterX="25"

CenterY="50"

Angle="0" />

<ScaleTransform x:Name="targetScaleTransform"

CenterX="25"

CenterY="50"

ScaleX="1"

ScaleY="1" />

</TransformCollection>

</TransformGroup.Children>

</TransformGroup>

</Polyline.RenderTransform>

</Polyline>

</Canvas>

</Border>

<StackPanel Grid.Row="8" Grid.Column="2"

Margin="0 5 0 0"

Orientation="Horizontal">

<Button Name="startButton"

Width="50"

Height="25">

Start

</Button>

<Button Name="stopButton"

Margin="5 0 0 0"

Width="50"

Height="25">

Stop

</Button>

<StackPanel.Triggers>

<EventTrigger

SourceName="startButton"

RoutedEvent="Button.Click">

<DoubleAnimation

Storyboard.TargetName="targetRotateTransform"

Storyboard.TargetProperty="Angle"

Duration="00:00:05"

From="0"

To="360"

RepeatBehavior="Forever" />

<DoubleAnimation

Storyboard.TargetName="targetScaleTransform"

Storyboard.TargetProperty="ScaleX"

Duration="00:00:05"

From="0"

To="3"

RepeatBehavior="Forever"

AutoReverse="True" />

<DoubleAnimation

Storyboard.TargetName="targetScaleTransform"

Storyboard.TargetProperty="ScaleY"

Duration="00:00:05"

From="0"

To="3"

RepeatBehavior="Forever"

AutoReverse="True" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

<EventTrigger

SourceName="stopButton"

RoutedEvent="Button.Click">

</EventTrigger>

</StackPanel.Triggers>

</StackPanel>

</Grid>

</ScrollViewer>

</Window>

TestProject.zip

[C#/WPF] MatrixTransform 엘리먼트 : 대화형 매트릭스 변환 사용하기

■ MatrixTransform 엘리먼트를 사용해 대화형 매트릭스 변환을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DrawingBrush x:Key="BlueGridDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <DrawingBrush x:Key="GreenGridDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="Lime"
                            Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />
                        <GeometryDrawing
                            Brush="Lime"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="TextWrapping" Value="Wrap" />
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0">
            <Bold>Interactive MatrixTransform Example</Bold>
        </TextBlock>
        <Grid Grid.Row="1"
            Margin="0 10 0 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="0">M11</Label>
            <TextBox Name="m11TextBox" Grid.Row="0" Grid.Column="1"
                Width="50"
                Height="25"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Right">
                1.0
            </TextBox>
            <Label Grid.Row="0" Grid.Column="2"
                Margin="10 0 0 0">
                M21
            </Label>
            <TextBox Name="m21TextBox" Grid.Row="0" Grid.Column="3"
                Width="50"
                Height="25"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Right">
                0.0
            </TextBox>
            <Label Grid.Row="1" Grid.Column="0"
                Margin="0 10 0 0">
                M12
            </Label>
            <TextBox Name="m12TextBox" Grid.Row="1" Grid.Column="1"
                Margin="0 10 0 0"
                Width="50"
                Height="25"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Right">
                0.0
            </TextBox>
            <Label Grid.Row="1" Grid.Column="2"
                Margin="10 10 0 0">M22</Label>
            <TextBox Name="m22TextBox" Grid.Row="1" Grid.Column="3"
                Margin="0 10 0 0"
                Width="50"
                Height="25"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Right">
                1.0
            </TextBox>
            <Label Grid.Row="2" Grid.Column="0"
                Margin="0 10 0 0">
                OffsetX
            </Label>
            <TextBox Name="offsetXTextBox" Grid.Row="2" Grid.Column="1"
                Margin="0 10 0 0"
                Width="50"
                Height="25"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Right">
                0.0
            </TextBox>
            <Label Grid.Row="2" Grid.Column="2"
                Margin="10 10 0 0">
                OffsetY
            </Label>
            <TextBox Name="offsetYTextBox" Grid.Row="2" Grid.Column="3"
                Margin="0 10 0 0"
                Width="50"
                Height="25"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Right">
                0.0
            </TextBox>
            <Button Name="applyButton" Grid.Row="3" Grid.Column="0"
                Margin="0 10 0 0"
                Width="100"
                Height="30">
                Apply
            </Button>
            <Grid Grid.Column="4" Grid.Row="0" Grid.RowSpan="4"
                Margin="30 0">
                <Grid.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="HorizontalAlignment" Value="Stretch" />
                        <Setter Property="FontWeight" Value="Bold"             />
                    </Style>
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                    HorizontalAlignment="Left"
                    Width="10"
                    Height="1"
                    Fill="Black" />
                <Rectangle Grid.Row="0" Grid.RowSpan="6" Grid.Column="0"
                    Width="1"
                    Fill="Black" />
                <Rectangle Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
                    HorizontalAlignment="Left"
                    Width="10"
                    Height="1"
                    Fill="Black" />
                <TextBlock Grid.Row="1" Grid.Column="1"
                    Margin="10">
                    <TextBlock.Text>
                        <Binding ElementName="m11TextBox" Path="Text" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="2"
                    Margin="10">
                    <TextBlock.Text>
                        <Binding ElementName="m21TextBox" Path="Text" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="3"
                    Margin="10">
                    0.0
                </TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="1"
                    Margin="10">
                    <TextBlock.Text>
                        <Binding ElementName="m12TextBox" Path="Text" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="2"
                    Margin="10">
                    <TextBlock.Text>
                        <Binding ElementName="m22TextBox" Path="Text" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="3"
                    Margin="10">
                    0.0
                </TextBlock>
                <TextBlock Grid.Row="3" Grid.Column="1"
                    Margin="10">
                    <TextBlock.Text>
                        <Binding ElementName="offsetXTextBox" Path="Text" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Row="3" Grid.Column="2"
                    Margin="10">
                    <TextBlock.Text>
                        <Binding ElementName="offsetYTextBox" Path="Text" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Row="3" Grid.Column="3"
                    Margin="10">
                    1.0
                </TextBlock>
                <Rectangle Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2"
                    HorizontalAlignment="Right"
                    Width="10"
                    Height="1"
                    Fill="Black" />
                <Rectangle Grid.Row="0" Grid.RowSpan="6" Grid.Column="4"
                    Width="1"
                    Fill="Black" />
                <Rectangle Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="2"
                    HorizontalAlignment="Right"
                    Width="10"
                    Height="1"
                    Fill="Black" />
            </Grid>
        </Grid>
        <Border Grid.Row="2"
            Margin="0 10 0 0"
            BorderThickness="2"
            BorderBrush="Black">
            <Canvas Background="{StaticResource BlueGridDrawingBrushKey}">
                <TextBlock Canvas.Left="80" Canvas.Top="80">
                    Before Transform
                </TextBlock>
                <Rectangle Canvas.Left="100" Canvas.Top="100"
                    Width="100"
                    Height="100"
                    StrokeThickness="2"
                    Stroke="Black"
                    StrokeDashArray="2 1"
                    Fill="{StaticResource BlueGridDrawingBrushKey}"
                    Opacity="0.50" />
                <Rectangle Name="transformedRectangle" Canvas.Left="100" Canvas.Top="100"
                    Width="100"
                    Height="100"
                    StrokeThickness="2"
                    Stroke="Black"
                    Fill="{StaticResource GreenGridDrawingBrushKey}">
                    <Rectangle.RenderTransform>
                        <MatrixTransform x:Name="targetMatrixTransform" />
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Canvas>
        </Border>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<DrawingBrush x:Key="BlueGridDrawingBrushKey"

ViewportUnits="Absolute"

Viewport="0 0 10 10"

TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />

<GeometryDrawing

Brush="#ccccff"

Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

<DrawingBrush x:Key="GreenGridDrawingBrushKey"

ViewportUnits="Absolute"

Viewport="0 0 10 10"

TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing

Brush="Lime"

Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />

<GeometryDrawing

Brush="Lime"

Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Style>

</Window.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Bold>Interactive MatrixTransform Example</Bold>

</TextBlock>

<Grid Grid.Row="1"

Margin="0 10 0 0">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBox Name="m11TextBox" Grid.Row="0" Grid.Column="1"

Width="50"

Height="25"

VerticalContentAlignment="Center"

HorizontalContentAlignment="Right">

1.0

</TextBox>

<Label Grid.Row="0" Grid.Column="2"

Margin="10 0 0 0">

M21

</Label>

<TextBox Name="m21TextBox" Grid.Row="0" Grid.Column="3"

Width="50"

Height="25"

VerticalContentAlignment="Center"

HorizontalContentAlignment="Right">

0.0

</TextBox>

<Label Grid.Row="1" Grid.Column="0"

Margin="0 10 0 0">

M12

</Label>

<TextBox Name="m12TextBox" Grid.Row="1" Grid.Column="1"

Margin="0 10 0 0"

Width="50"

Height="25"

VerticalContentAlignment="Center"

HorizontalContentAlignment="Right">

0.0

</TextBox>

<Label Grid.Row="1" Grid.Column="2"

Margin="10 10 0 0">M22</Label>

<TextBox Name="m22TextBox" Grid.Row="1" Grid.Column="3"

Margin="0 10 0 0"

Width="50"

Height="25"

VerticalContentAlignment="Center"

HorizontalContentAlignment="Right">

1.0

</TextBox>

<Label Grid.Row="2" Grid.Column="0"

Margin="0 10 0 0">

OffsetX

</Label>

<TextBox Name="offsetXTextBox" Grid.Row="2" Grid.Column="1"

Margin="0 10 0 0"

Width="50"

Height="25"

VerticalContentAlignment="Center"

HorizontalContentAlignment="Right">

0.0

</TextBox>

<Label Grid.Row="2" Grid.Column="2"

Margin="10 10 0 0">

OffsetY

</Label>

<TextBox Name="offsetYTextBox" Grid.Row="2" Grid.Column="3"

Margin="0 10 0 0"

Width="50"

Height="25"

VerticalContentAlignment="Center"

HorizontalContentAlignment="Right">

0.0

</TextBox>

<Button Name="applyButton" Grid.Row="3" Grid.Column="0"

Margin="0 10 0 0"

Width="100"

Height="30">

Apply

</Button>

<Grid Grid.Column="4" Grid.Row="0" Grid.RowSpan="4"

Margin="30 0">

<Grid.Resources>

</Style>

</Grid.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalAlignment="Left"

Width="10"

Height="1"

Fill="Black" />

<Rectangle Grid.Row="0" Grid.RowSpan="6" Grid.Column="0"

Width="1"

Fill="Black" />

<Rectangle Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalAlignment="Left"

Width="10"

Height="1"

Fill="Black" />

<TextBlock Grid.Row="1" Grid.Column="1"

Margin="10">

<TextBlock.Text>

</TextBlock.Text>

</TextBlock>

<TextBlock Grid.Row="1" Grid.Column="2"

Margin="10">

<TextBlock.Text>

</TextBlock.Text>

</TextBlock>

<TextBlock Grid.Row="1" Grid.Column="3"

Margin="10">

0.0

</TextBlock>

<TextBlock Grid.Row="2" Grid.Column="1"

Margin="10">

<TextBlock.Text>

</TextBlock.Text>

</TextBlock>

<TextBlock Grid.Row="2" Grid.Column="2"

Margin="10">

<TextBlock.Text>

</TextBlock.Text>

</TextBlock>

<TextBlock Grid.Row="2" Grid.Column="3"

Margin="10">

0.0

</TextBlock>

<TextBlock Grid.Row="3" Grid.Column="1"

Margin="10">

<TextBlock.Text>

</TextBlock.Text>

</TextBlock>

<TextBlock Grid.Row="3" Grid.Column="2"

Margin="10">

<TextBlock.Text>

</TextBlock.Text>

</TextBlock>

<TextBlock Grid.Row="3" Grid.Column="3"

Margin="10">

1.0

</TextBlock>

<Rectangle Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2"

HorizontalAlignment="Right"

Width="10"

Height="1"

Fill="Black" />

<Rectangle Grid.Row="0" Grid.RowSpan="6" Grid.Column="4"

Width="1"

Fill="Black" />

<Rectangle Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="2"

HorizontalAlignment="Right"

Width="10"

Height="1"

Fill="Black" />

</Grid>

<Border Grid.Row="2"

Margin="0 10 0 0"

BorderThickness="2"

BorderBrush="Black">

Before Transform

</TextBlock>

<Rectangle Canvas.Left="100" Canvas.Top="100"

Width="100"

Height="100"

StrokeThickness="2"

Stroke="Black"

StrokeDashArray="2 1"

Fill="{StaticResource BlueGridDrawingBrushKey}"

Opacity="0.50" />

<Rectangle Name="transformedRectangle" Canvas.Left="100" Canvas.Top="100"

Width="100"

Height="100"

StrokeThickness="2"

Stroke="Black"

Fill="{StaticResource GreenGridDrawingBrushKey}">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

</Border>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Windows;
using System.Windows.Media;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.applyButton.Click += applyButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region Apply 버튼 클릭시 처리하기 - applyButton_Click(sender, e)

        /// <summary>
        /// Apply 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void applyButton_Click(object sender, EventArgs e)
        {
            UpdateTargetMatrixTransform();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 타겟 매트릭스 변환 업데이트하기 - UpdateTargetMatrixTransform()

        /// <summary>
        /// 타겟 매트릭스 변환 업데이트하기
        /// </summary>
        private void UpdateTargetMatrixTransform()
        {
            Matrix matrix = new Matrix
            {
                M11     = double.Parse(this.m11TextBox.Text    ),
                M12     = double.Parse(this.m12TextBox.Text    ),
                M21     = double.Parse(this.m21TextBox.Text    ),
                M22     = double.Parse(this.m22TextBox.Text    ),
                OffsetX = double.Parse(this.offsetXTextBox.Text),
                OffsetY = double.Parse(this.offsetYTextBox.Text)
            };

            this.targetMatrixTransform.Matrix = matrix;
        }

        #endregion
    }
}

using System;

using System.Windows;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.applyButton.Click += applyButton_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region Apply 버튼 클릭시 처리하기 - applyButton_Click(sender, e)

/// <summary>

/// Apply 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void applyButton_Click(object sender, EventArgs e)

{

UpdateTargetMatrixTransform();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 타겟 매트릭스 변환 업데이트하기 - UpdateTargetMatrixTransform()

/// <summary>

/// 타겟 매트릭스 변환 업데이트하기

/// </summary>

private void UpdateTargetMatrixTransform()

{

Matrix matrix = new Matrix

{

M11 = double.Parse(this.m11TextBox.Text ),

M12 = double.Parse(this.m12TextBox.Text ),

M21 = double.Parse(this.m21TextBox.Text ),

M22 = double.Parse(this.m22TextBox.Text ),

OffsetX = double.Parse(this.offsetXTextBox.Text),

OffsetY = double.Parse(this.offsetYTextBox.Text)

};

this.targetMatrixTransform.Matrix = matrix;

}

#endregion

}

TestProject.zip

[C#/WPF] DrawingBrush 엘리먼트 : Transform/RelativeTransform 속성 사용하기

■ DrawingBrush 엘리먼트의 Transform/RelativeTransform 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<Window Name="window" x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <Rectangle
            Margin="10"
            Width="100"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Rectangle.Fill>
                <DrawingBrush
                    Viewport="0 0 0.5 0.5"
                    TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing
                                    Brush="Gray"
                                    Geometry="M 0 0.1 L 0.1 0 1 0.9 0.9 1 z" />
                                <GeometryDrawing
                                    Brush="Gray"
                                    Geometry="M 0.9 0 L 1 0.1 0.1 1 0 0.9 z" />
                                <GeometryDrawing
                                    Brush="#ffff00"
                                    Geometry="M 0.25 0.25 L 0.5 0.125 0.75 0.25 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="Black"
                                    Geometry="M 0.25 0.75 L 0.5 0.875 0.75 0.75 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="#ff0000"
                                    Geometry="M 0.25 0.75 L 0.125 0.5 0.25 0.25 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="MediumBlue"
                                    Geometry="M 0.75 0.25 L 0.875 0.5 0.75 0.75 0.5 0.5 z" />
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle
            Margin="10"
            Width="100"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Rectangle.Fill>
                <DrawingBrush
                    Viewport="0 0 0.5 0.5"
                    TileMode="Tile">
                    <DrawingBrush.Transform>
                        <SkewTransform
                            AngleX="45"
                            AngleY="0" />
                    </DrawingBrush.Transform>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing
                                    Brush="Gray"
                                    Geometry="M 0 0.1 L 0.1 0 1 0.9 0.9 1 z" />
                                <GeometryDrawing
                                    Brush="Gray"
                                    Geometry="M 0.9 0 L 1 0.1 0.1 1 0 0.9 z" />
                                <GeometryDrawing
                                    Brush="#ffff00"
                                    Geometry="M 0.25 0.25 L 0.5 0.125 0.75 0.25 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="Black"
                                    Geometry="M 0.25 0.75 L 0.5 0.875 0.75 0.75 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="#ff0000"
                                    Geometry="M 0.25 0.75 L 0.125 0.5 0.25 0.25 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="MediumBlue"
                                    Geometry="M 0.75 0.25 L 0.875 0.5 0.75 0.75 0.5 0.5 z" />
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle
            Margin="10"
            Width="100"
            Height="100"
            StrokeThickness="1"
            Stroke="Black">
            <Rectangle.Fill>
                <DrawingBrush
                    Viewport="0 0 0.5 0.5"
                    TileMode="Tile">
                    <DrawingBrush.RelativeTransform>
                        <RotateTransform
                            CenterX="0.5"
                            CenterY="0.5"
                            Angle="45" />
                    </DrawingBrush.RelativeTransform>
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <DrawingGroup.Children>
                                <GeometryDrawing
                                    Brush="Gray"
                                    Geometry="M 0 0.1 L 0.1 0 1 0.9 0.9 1 z" />
                                <GeometryDrawing
                                    Brush="Gray"
                                    Geometry="M 0.9 0 L 1 0.1 0.1 1 0 0.9 z" />
                                <GeometryDrawing
                                    Brush="#ffff00"
                                    Geometry="M 0.25 0.25 L 0.5 0.125 0.75 0.25 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="Black"
                                    Geometry="M 0.25 0.75 L 0.5 0.875 0.75 0.75 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="#ff0000"
                                    Geometry="M 0.25 0.75 L 0.125 0.5 0.25 0.25 0.5 0.5 z" />
                                <GeometryDrawing
                                    Brush="MediumBlue"
                                    Geometry="M 0.75 0.25 L 0.875 0.5 0.75 0.75 0.5 0.5 z" />
                            </DrawingGroup.Children>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

<Window Name="window" x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Rectangle

Margin="10"

Width="100"

Height="100"

StrokeThickness="1"

Stroke="Black">

<Rectangle.Fill>

<DrawingBrush

Viewport="0 0 0.5 0.5"

TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing

Brush="Gray"

Geometry="M 0 0.1 L 0.1 0 1 0.9 0.9 1 z" />

<GeometryDrawing

Brush="Gray"

Geometry="M 0.9 0 L 1 0.1 0.1 1 0 0.9 z" />

<GeometryDrawing

Brush="#ffff00"

Geometry="M 0.25 0.25 L 0.5 0.125 0.75 0.25 0.5 0.5 z" />

<GeometryDrawing

Brush="Black"

Geometry="M 0.25 0.75 L 0.5 0.875 0.75 0.75 0.5 0.5 z" />

<GeometryDrawing

Brush="#ff0000"

Geometry="M 0.25 0.75 L 0.125 0.5 0.25 0.25 0.5 0.5 z" />

<GeometryDrawing

Brush="MediumBlue"

Geometry="M 0.75 0.25 L 0.875 0.5 0.75 0.75 0.5 0.5 z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle

Margin="10"

Width="100"

Height="100"

StrokeThickness="1"

Stroke="Black">

<Rectangle.Fill>

<DrawingBrush

Viewport="0 0 0.5 0.5"

TileMode="Tile">

<DrawingBrush.Transform>

<SkewTransform

AngleX="45"

AngleY="0" />

</DrawingBrush.Transform>

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing

Brush="Gray"

Geometry="M 0 0.1 L 0.1 0 1 0.9 0.9 1 z" />

<GeometryDrawing

Brush="Gray"

Geometry="M 0.9 0 L 1 0.1 0.1 1 0 0.9 z" />

<GeometryDrawing

Brush="#ffff00"

Geometry="M 0.25 0.25 L 0.5 0.125 0.75 0.25 0.5 0.5 z" />

<GeometryDrawing

Brush="Black"

Geometry="M 0.25 0.75 L 0.5 0.875 0.75 0.75 0.5 0.5 z" />

<GeometryDrawing

Brush="#ff0000"

Geometry="M 0.25 0.75 L 0.125 0.5 0.25 0.25 0.5 0.5 z" />

<GeometryDrawing

Brush="MediumBlue"

Geometry="M 0.75 0.25 L 0.875 0.5 0.75 0.75 0.5 0.5 z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle

Margin="10"

Width="100"

Height="100"

StrokeThickness="1"

Stroke="Black">

<Rectangle.Fill>

<DrawingBrush

Viewport="0 0 0.5 0.5"

TileMode="Tile">

<DrawingBrush.RelativeTransform>

<RotateTransform

CenterX="0.5"

CenterY="0.5"

Angle="45" />

</DrawingBrush.RelativeTransform>

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing

Brush="Gray"

Geometry="M 0 0.1 L 0.1 0 1 0.9 0.9 1 z" />

<GeometryDrawing

Brush="Gray"

Geometry="M 0.9 0 L 1 0.1 0.1 1 0 0.9 z" />

<GeometryDrawing

Brush="#ffff00"

Geometry="M 0.25 0.25 L 0.5 0.125 0.75 0.25 0.5 0.5 z" />

<GeometryDrawing

Brush="Black"

Geometry="M 0.25 0.75 L 0.5 0.875 0.75 0.75 0.5 0.5 z" />

<GeometryDrawing

Brush="#ff0000"

Geometry="M 0.25 0.75 L 0.125 0.5 0.25 0.25 0.5 0.5 z" />

<GeometryDrawing

Brush="MediumBlue"

Geometry="M 0.75 0.25 L 0.875 0.5 0.75 0.75 0.5 0.5 z" />

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

</DrawingBrush>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

</Window>

TestProject.zip

[C#/MAUI/.NET6] ICanvas 인터페이스 : ConcatenateTransform 메소드를 사용해 변환하기

■ ICanvas 인터페이스의 ConcatenateTransform 메소드를 사용해 변환하는 방법을 보여준다. ▶ GraphicsDrawable.cs


using System.Numerics;

namespace TestProject;

/// <summary>
/// 그래픽스 그리기 가능형
/// </summary>
public class GraphicsDrawable : IDrawable
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 그리기 - Draw(canvas, dirtyRectangle)

    /// <summary>
    /// 그리기
    /// </summary>
    /// <param name="canvas">캔버스</param>
    /// <param name="dirtyRectangle">더티 사각형</param>
    public void Draw(ICanvas canvas, RectF dirtyRectangle)
    {
        PathF path = new PathF();

        for(int i = 0; i < 11; i++)
        {
            double angle = 5 * i * 2 * Math.PI / 11;

            PointF point = new PointF(100 * (float)Math.Sin(angle), -100 * (float)Math.Cos(angle));

            if(i == 0)
            {
                path.MoveTo(point);
            }
            else
            {
                path.LineTo(point);
            }
        }

        Matrix3x2 matrix = new Matrix3x2
        (
            1,   // M11, ScaleX
            1,   // M12, ShearY
            0,   // M21, ShearX
            1,   // M22, SacleY
            150, // M31, TranslateX
            150  // M32, TranslateY
        );

        canvas.ConcatenateTransform(matrix);

        canvas.FillColor = Colors.Yellow;

        canvas.FillRectangle(dirtyRectangle);

        canvas.Translate(175, 175);

        canvas.FillColor = Colors.Red;

        canvas.FillPath(path);
    }

    #endregion
}

using System.Numerics;

namespace TestProject;

/// <summary>

/// 그래픽스 그리기 가능형

/// </summary>

public class GraphicsDrawable : IDrawable

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 그리기 - Draw(canvas, dirtyRectangle)

/// <summary>

/// 그리기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="dirtyRectangle">더티 사각형</param>

public void Draw(ICanvas canvas, RectF dirtyRectangle)

{

PathF path = new PathF();

for(int i = 0; i < 11; i++)

{

double angle = 5 * i * 2 * Math.PI / 11;

PointF point = new PointF(100 * (float)Math.Sin(angle), -100 * (float)Math.Cos(angle));

if(i == 0)

{

path.MoveTo(point);

}

else

{

path.LineTo(point);

}

Matrix3x2 matrix = new Matrix3x2

(

1, // M11, ScaleX

1, // M12, ShearY

0, // M21, ShearX

1, // M22, SacleY

150, // M31, TranslateX

150 // M32, TranslateY

);

canvas.ConcatenateTransform(matrix);

canvas.FillColor = Colors.Yellow;

canvas.FillRectangle(dirtyRectangle);

canvas.Translate(175, 175);

canvas.FillColor = Colors.Red;

canvas.FillPath(path);

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawableKey" />
    </ContentPage.Resources>
    <GraphicsView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="350"
        HeightRequest="350"
        Drawable="{StaticResource GraphicsDrawableKey}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.Resources>

<local:GraphicsDrawable x:Key="GraphicsDrawableKey" />

</ContentPage.Resources>

<GraphicsView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="350"

HeightRequest="350"

Drawable="{StaticResource GraphicsDrawableKey}" />

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ICanvas 인터페이스 : Translate/Scale/Rotate 메소드를 사용해 시계 만들기

■ ICanvas 인터페이스의 Translate/Scale/Rotate 메소드를 사용해 시계를 만드는 방법을 보여준다. ▶ GraphicsDrawable.cs


namespace TestProject;

/// <summary>
/// 그래픽스 그리기 가능형
/// </summary>
public class GraphicsDrawable : IDrawable
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 그리기 - Draw(canvas, dirtyRectangle)

    /// <summary>
    /// 그리기
    /// </summary>
    /// <param name="canvas">캔버스</param>
    /// <param name="dirtyRectangle">더티 사각형</param>
    public void Draw(ICanvas canvas, RectF dirtyRectangle)
    {
        canvas.FillColor = Colors.Yellow;

        canvas.FillRectangle(dirtyRectangle);

        canvas.StrokeLineCap = LineCap.Round;
        canvas.FillColor     = Colors.Gray;

        canvas.Translate(dirtyRectangle.Center.X, dirtyRectangle.Center.Y);

        float scale = Math.Min(dirtyRectangle.Width / 200f, dirtyRectangle.Height / 200f);

        canvas.Scale(scale, scale);

        // 시계 눈금
        for(int angle = 0; angle < 360; angle += 6)
        {
            canvas.FillCircle(0, -90, angle % 30 == 0 ? 4 : 2);

            canvas.Rotate(6);
        }

        DateTime currentTime = DateTime.Now;

        // 시침
        canvas.StrokeSize = 20;

        canvas.SaveState();

        canvas.Rotate(30 * currentTime.Hour + currentTime.Minute / 2f);

        canvas.DrawLine(0, 0, 0, -50);

        canvas.RestoreState();

        // 분침
        canvas.StrokeSize = 10;

        canvas.SaveState();

        canvas.Rotate(6 * currentTime.Minute + currentTime.Second / 10f);

        canvas.DrawLine(0, 0, 0, -70);

        canvas.RestoreState();

        // 초침
        canvas.StrokeSize = 2;

        canvas.SaveState();

        canvas.Rotate(6 * currentTime.Second);

        canvas.DrawLine(0, 10, 0, -80);

        canvas.RestoreState();
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 그래픽스 그리기 가능형

/// </summary>

public class GraphicsDrawable : IDrawable

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 그리기 - Draw(canvas, dirtyRectangle)

/// <summary>

/// 그리기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="dirtyRectangle">더티 사각형</param>

public void Draw(ICanvas canvas, RectF dirtyRectangle)

{

canvas.FillColor = Colors.Yellow;

canvas.FillRectangle(dirtyRectangle);

canvas.StrokeLineCap = LineCap.Round;

canvas.FillColor = Colors.Gray;

canvas.Translate(dirtyRectangle.Center.X, dirtyRectangle.Center.Y);

float scale = Math.Min(dirtyRectangle.Width / 200f, dirtyRectangle.Height / 200f);

canvas.Scale(scale, scale);

// 시계 눈금

for(int angle = 0; angle < 360; angle += 6)

{

canvas.FillCircle(0, -90, angle % 30 == 0 ? 4 : 2);

canvas.Rotate(6);

}

DateTime currentTime = DateTime.Now;

// 시침

canvas.StrokeSize = 20;

canvas.SaveState();

canvas.Rotate(30 * currentTime.Hour + currentTime.Minute / 2f);

canvas.DrawLine(0, 0, 0, -50);

canvas.RestoreState();

// 분침

canvas.StrokeSize = 10;

canvas.SaveState();

canvas.Rotate(6 * currentTime.Minute + currentTime.Second / 10f);

canvas.DrawLine(0, 0, 0, -70);

canvas.RestoreState();

// 초침

canvas.StrokeSize = 2;

canvas.SaveState();

canvas.Rotate(6 * currentTime.Second);

canvas.DrawLine(0, 10, 0, -80);

canvas.RestoreState();

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawableKey" />
    </ContentPage.Resources>
    <GraphicsView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="350"
        HeightRequest="350"
        Drawable="{StaticResource GraphicsDrawableKey}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.Resources>

<local:GraphicsDrawable x:Key="GraphicsDrawableKey" />

</ContentPage.Resources>

<GraphicsView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="350"

HeightRequest="350"

Drawable="{StaticResource GraphicsDrawableKey}" />

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ICanvas 인터페이스 : Rotate 메소드를 사용해 특정 위치를 기준으로 회전 변환하기

■ ICanvas 인터페이스의 Rotate 메소드를 사용해 특정 위치를 기준으로 회전 변환을 하는 방법을 보여준다. ▶ GraphicsDrawable.cs


namespace TestProject;

/// <summary>
/// 그래픽스 그리기 가능형
/// </summary>
public class GraphicsDrawable : IDrawable
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 그리기 - Draw(canvas, dirtyRectangle)

    /// <summary>
    /// 그리기
    /// </summary>
    /// <param name="canvas">캔버스</param>
    /// <param name="dirtyRectangle">더티 사각형</param>
    public void Draw(ICanvas canvas, RectF dirtyRectangle)
    {
        canvas.Rotate(45, dirtyRectangle.Center.X, dirtyRectangle.Center.Y);

        canvas.FillColor = Colors.Yellow;

        canvas.FillRectangle(dirtyRectangle);

        canvas.FontSize  = 36;
        canvas.FontColor = Colors.Blue;

        canvas.FillColor = Colors.Blue;

        canvas.FillCircle(0, 0, 3);

        canvas.DrawString(".NET MAUI", 150, 150, HorizontalAlignment.Left);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 그래픽스 그리기 가능형

/// </summary>

public class GraphicsDrawable : IDrawable

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 그리기 - Draw(canvas, dirtyRectangle)

/// <summary>

/// 그리기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="dirtyRectangle">더티 사각형</param>

public void Draw(ICanvas canvas, RectF dirtyRectangle)

{

canvas.Rotate(45, dirtyRectangle.Center.X, dirtyRectangle.Center.Y);

canvas.FillColor = Colors.Yellow;

canvas.FillRectangle(dirtyRectangle);

canvas.FontSize = 36;

canvas.FontColor = Colors.Blue;

canvas.FillColor = Colors.Blue;

canvas.FillCircle(0, 0, 3);

canvas.DrawString(".NET MAUI", 150, 150, HorizontalAlignment.Left);

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawableKey" />
    </ContentPage.Resources>
    <GraphicsView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="350"
        HeightRequest="350"
        Drawable="{StaticResource GraphicsDrawableKey}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.Resources>

<local:GraphicsDrawable x:Key="GraphicsDrawableKey" />

</ContentPage.Resources>

<GraphicsView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="350"

HeightRequest="350"

Drawable="{StaticResource GraphicsDrawableKey}" />

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ICanvas 인터페이스 : Rotate 메소드를 사용해 회전 변환하기

■ ICanvas 인터페이스의 Rotate 메소드를 사용해 회전 변환을 하는 방법을 보여준다. ▶ GraphicsDrawable.cs


namespace TestProject;

/// <summary>
/// 그래픽스 그리기 가능형
/// </summary>
public class GraphicsDrawable : IDrawable
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 그리기 - Draw(canvas, dirtyRectangle)

    /// <summary>
    /// 그리기
    /// </summary>
    /// <param name="canvas">캔버스</param>
    /// <param name="dirtyRectangle">더티 사각형</param>
    public void Draw(ICanvas canvas, RectF dirtyRectangle)
    {
        canvas.Rotate(30);

        canvas.FillColor = Colors.Yellow;

        canvas.FillRectangle(dirtyRectangle);

        canvas.FontSize  = 36;
        canvas.FontColor = Colors.Blue;

        canvas.FillColor = Colors.Blue;

        canvas.FillCircle(0, 0, 3);

        canvas.DrawString(".NET MAUI", 150, 150, HorizontalAlignment.Left);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 그래픽스 그리기 가능형

/// </summary>

public class GraphicsDrawable : IDrawable

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 그리기 - Draw(canvas, dirtyRectangle)

/// <summary>

/// 그리기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="dirtyRectangle">더티 사각형</param>

public void Draw(ICanvas canvas, RectF dirtyRectangle)

{

canvas.Rotate(30);

canvas.FillColor = Colors.Yellow;

canvas.FillRectangle(dirtyRectangle);

canvas.FontSize = 36;

canvas.FontColor = Colors.Blue;

canvas.FillColor = Colors.Blue;

canvas.FillCircle(0, 0, 3);

canvas.DrawString(".NET MAUI", 150, 150, HorizontalAlignment.Left);

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawableKey" />
    </ContentPage.Resources>
    <GraphicsView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="350"
        HeightRequest="350"
        Drawable="{StaticResource GraphicsDrawableKey}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.Resources>

<local:GraphicsDrawable x:Key="GraphicsDrawableKey" />

</ContentPage.Resources>

<GraphicsView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="350"

HeightRequest="350"

Drawable="{StaticResource GraphicsDrawableKey}" />

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ICanvas 인터페이스 : Scale 메소드를 사용해 스케일 변환하기

■ ICanvas 인터페이스의 Scale 메소드를 사용해 스케일을 변환하는 방법을 보여준다. ▶ GraphicsDrawable.cs


namespace TestProject;

/// <summary>
/// 그래픽스 그리기 가능형
/// </summary>
public class GraphicsDrawable : IDrawable
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 그리기 - Draw(canvas, dirtyRectangle)

    /// <summary>
    /// 그리기
    /// </summary>
    /// <param name="canvas">캔버스</param>
    /// <param name="dirtyRectangle">더티 사각형</param>
    public void Draw(ICanvas canvas, RectF dirtyRectangle)
    {
        canvas.StrokeSize        = 4;
        canvas.StrokeDashPattern = new float[] { 2, 2 };
        canvas.StrokeColor       = Colors.Red;
        canvas.FontSize          = 18;
        canvas.FontColor         = Colors.Blue;

        canvas.DrawRoundedRectangle(50, 50, 80, 20, 5);

        canvas.DrawString(".NET MAUI", 50, 50, 80, 20, HorizontalAlignment.Left, VerticalAlignment.Top);

        canvas.Scale(2, 2);

        canvas.DrawRoundedRectangle(50, 100, 80, 20, 5);

        canvas.DrawString(".NET MAUI", 50, 100, 80, 20, HorizontalAlignment.Left, VerticalAlignment.Top);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 그래픽스 그리기 가능형

/// </summary>

public class GraphicsDrawable : IDrawable

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 그리기 - Draw(canvas, dirtyRectangle)

/// <summary>

/// 그리기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="dirtyRectangle">더티 사각형</param>

public void Draw(ICanvas canvas, RectF dirtyRectangle)

{

canvas.StrokeSize = 4;

canvas.StrokeDashPattern = new float[] { 2, 2 };

canvas.StrokeColor = Colors.Red;

canvas.FontSize = 18;

canvas.FontColor = Colors.Blue;

canvas.DrawRoundedRectangle(50, 50, 80, 20, 5);

canvas.DrawString(".NET MAUI", 50, 50, 80, 20, HorizontalAlignment.Left, VerticalAlignment.Top);

canvas.Scale(2, 2);

canvas.DrawRoundedRectangle(50, 100, 80, 20, 5);

canvas.DrawString(".NET MAUI", 50, 100, 80, 20, HorizontalAlignment.Left, VerticalAlignment.Top);

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawableKey" />
    </ContentPage.Resources>
    <GraphicsView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="350"
        HeightRequest="350"
        Drawable="{StaticResource GraphicsDrawableKey}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.Resources>

<local:GraphicsDrawable x:Key="GraphicsDrawableKey" />

</ContentPage.Resources>

<GraphicsView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="350"

HeightRequest="350"

Drawable="{StaticResource GraphicsDrawableKey}" />

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ICanvas 인터페이스 : Translate 메소드를 사용해 이동 변환하기

■ ICanvas 인터페이스의 Translate 메소드를 사용해 이동 변환을 하는 방법을 보여준다. ▶ GraphicsDrawable.cs


namespace TestProject;

/// <summary>
/// 그래픽스 그리기 가능형
/// </summary>
public class GraphicsDrawable : IDrawable
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 그리기 - Draw(canvas, dirtyRectangle)

    /// <summary>
    /// 그리기
    /// </summary>
    /// <param name="canvas">캔버스</param>
    /// <param name="dirtyRectangle">더티 사각형</param>
    public void Draw(ICanvas canvas, RectF dirtyRectangle)
    {
        PathF path = new PathF();

        for(int i = 0; i < 11; i++)
        {
            double angle = 5 * i * 2 * Math.PI / 11;

            PointF point = new PointF(100 * (float)Math.Sin(angle), -100 * (float)Math.Cos(angle));

            if(i == 0)
            {
                path.MoveTo(point);
            }
            else
            {
                path.LineTo(point);
            }
        }

        canvas.FillColor = Colors.Red;

        canvas.Translate(175, 175);

        canvas.FillPath(path);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 그래픽스 그리기 가능형

/// </summary>

public class GraphicsDrawable : IDrawable

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 그리기 - Draw(canvas, dirtyRectangle)

/// <summary>

/// 그리기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="dirtyRectangle">더티 사각형</param>

public void Draw(ICanvas canvas, RectF dirtyRectangle)

{

PathF path = new PathF();

for(int i = 0; i < 11; i++)

{

double angle = 5 * i * 2 * Math.PI / 11;

PointF point = new PointF(100 * (float)Math.Sin(angle), -100 * (float)Math.Cos(angle));

if(i == 0)

{

path.MoveTo(point);

}

else

{

path.LineTo(point);

}

canvas.FillColor = Colors.Red;

canvas.Translate(175, 175);

canvas.FillPath(path);

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:GraphicsDrawable x:Key="GraphicsDrawableKey" />
    </ContentPage.Resources>
    <GraphicsView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="350"
        HeightRequest="350"
        Drawable="{StaticResource GraphicsDrawableKey}" />
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ContentPage.Resources>

<local:GraphicsDrawable x:Key="GraphicsDrawableKey" />

</ContentPage.Resources>

<GraphicsView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="350"

HeightRequest="350"

Drawable="{StaticResource GraphicsDrawableKey}" />

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Path 엘리먼트 : RenderTransform 속성에서 MatrixTransform 객체 단순 설정하기

■ Path 엘리먼트의 RenderTransform 속성에서 MatrixTransform 객체를 단순 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Path
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="100"
    HeightRequest="100"
    Stroke="Black"
    Aspect="Uniform"
    RenderTransform="1.5 1 0 1 10 100"
    Data="M 13.908992,16.207977 L 32.000049 16.207977 32.000049 31.999985 13.908992 30.109983 Z" />

<Path

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="100"

HeightRequest="100"

Stroke="Black"

Aspect="Uniform"

RenderTransform="1.5 1 0 1 10 100"

Data="M 13.908992,16.207977 L 32.000049 16.207977 32.000049 31.999985 13.908992 30.109983 Z" />

[C#/MAUI/.NET6] MatrixTransform 엘리먼트 : Matrix 속성 사용하기

■ MatrixTransform 엘리먼트의 Matrix 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Path
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="100"
    HeightRequest="100"
    Stroke="Black"
    Aspect="Uniform"
    Data="M 13.908992,16.207977 L 32.000049 16.207977 32.000049 31.999985 13.908992 30.109983 Z">
    <Path.RenderTransform>
        <MatrixTransform Matrix="1.5 1 0 1 10 100" />
    </Path.RenderTransform>
</Path>

<Path

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="100"

HeightRequest="100"

Stroke="Black"

Aspect="Uniform"

Data="M 13.908992,16.207977 L 32.000049 16.207977 32.000049 31.999985 13.908992 30.109983 Z">

<Path.RenderTransform>

</Path.RenderTransform>

</Path>