No more Death March

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

WPF PathFigureによる描画

直線 - LineSegment

f:id:nomoredeathmarch:20180401204712p:plain
指定座標までの直線を引く。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <LineSegment Point="100,50"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="50,0">
                            <LineSegment Point="50,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <LineSegment Point="100,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,100">
                            <LineSegment Point="100,0"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <LineSegment Point="100,25"/>
                            <LineSegment Point="0,50"/>
                            <LineSegment Point="100,75"/>
                            <LineSegment Point="0,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

円弧 - ArcSegment

f:id:nomoredeathmarch:20180401210251p:plain
終点、X軸Y軸の半径、時計周りか半時計周りか

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <ArcSegment 
                                Point="100,50"
                                Size="1,1"
                                SweepDirection="Clockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <ArcSegment 
                                Point="100,50"
                                Size="1,1"
                                SweepDirection="Counterclockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <ArcSegment 
                                Point="100,50"
                                Size="1,0.5"
                                IsLargeArc="False"
                                SweepDirection="Clockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <ArcSegment 
                                Point="0,100"
                                Size="1,0.5"
                                IsLargeArc="False"
                                SweepDirection="Clockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="100,0">
                            <ArcSegment 
                                Point="100,100"
                                Size="1,0.5"
                                IsLargeArc="False"
                                SweepDirection="Counterclockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

2次ペジェ曲線 - QuadraticBezierSegment

f:id:nomoredeathmarch:20180401211154p:plain
Point1は制御点、Point2が終点

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="50,0"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="25,0"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="75,0"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="50,-50"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="25,-50"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="75,-50"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

3次ペジェ曲線 - BezierSegment

f:id:nomoredeathmarch:20180401212007p:plain
Point1、Point2が制御点、Point3が終点

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="0,0"
                                Point2="100,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="20,0"
                                Point2="80,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="30,0"
                                Point2="70,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="40,0"
                                Point2="60,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="50,0"
                                Point2="50,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="100,0"
                                Point2="0,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>