No more Death March

あるSEのチラシの裏 C# WPF

WPF 描画の練習 バツ印

描画処理への理解を深めるため、簡単なマークの作成に挑戦してみました。
大したことしてないのに思った以上に「それっぽく」見えるので面白いです。

イメージ

f:id:nomoredeathmarch:20180403222614p:plain

XAML

<UserControl x:Class="WpfApp1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"            
            >
            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Tomato" Offset="0"/>
                    <GradientStop Color="Red" Offset="0.5"/>
                    <GradientStop Color="Crimson" Offset="0.7"/>
                </LinearGradientBrush>
            </Path.Fill>
            <Path.Data>
                <CombinedGeometry
                    GeometryCombineMode="Union"
                    >
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry
                        Rect="0,40,100,20">
                            <RectangleGeometry.Transform>
                                <RotateTransform CenterX="50" CenterY="50" Angle="45"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry
                        Rect="0,40,100,20"
                        >
                            <RectangleGeometry.Transform>
                                <RotateTransform CenterX="50" CenterY="50" Angle="135"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</UserControl>

ポイント

・CombinedGeometryで同じ大きさの二つの長方形を合成
・GeometryCombineModeはUnionで双方の領域を描画
・RenderTransformを使って長方形を45度、135度回転
・回転の中心はキャンバスの中心