FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Pathでお絵かき5 ペジェ曲線

 今回はペジェ曲線を使って曲線を描く方法を紹介します。
 ペジェ曲線って何?と思う方もいると思います。ペジェ曲線についてはこちらのサイトで分かりやすく解説されています。
 WPFでは2次ペジェ曲線と3次ペジェ曲線がサポートされています。
<Window x:Class="Path5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        
        <Path Grid.Row="0" Grid.Column="0" Stroke="Black" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,50">
                        <QuadraticBezierSegment Point1="50,10" Point2="150,50"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Grid.Row="0" Grid.Column="0" Fill="Red">
            <Path.Data>
                <EllipseGeometry Center="50,10" RadiusX="2" RadiusY="2"/>
            </Path.Data>
        </Path>
        <TextBlock Grid.Row="0" Grid.Column="1" Margin="3">
            2次ペジェ曲線<LineBreak/>
            StartPoint = 20,50<LineBreak/>
            Point1     = 50,10 (赤点の位置)<LineBreak/>
            Point2     = 150,50 (終点)
        </TextBlock>

        <Path Grid.Row="1" Grid.Column="0" Stroke="Black" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,50">
                        <BezierSegment Point1="50,10" Point2="130,20" Point3="150,50"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Grid.Row="1" Grid.Column="0" Fill="Red">
            <Path.Data>
                <EllipseGeometry Center="50,10" RadiusX="2" RadiusY="2"/>
            </Path.Data>
        </Path>
        <Path Grid.Row="1" Grid.Column="0" Fill="Blue">
            <Path.Data>
                <EllipseGeometry Center="130,20" RadiusX="2" RadiusY="2"/>
            </Path.Data>
        </Path>
        <TextBlock Grid.Row="1" Grid.Column="1" Margin="3">
            3次ペジェ曲線<LineBreak/>
            StartPoint = 20,50<LineBreak/>
            Point1     = 50,10 (赤点の位置)<LineBreak/>
            Point2     = 130,20 (青点の位置)<LineBreak/>
            Point3     = 150,50 (終点)
        </TextBlock>

        <Path Grid.Row="2" Grid.Column="0" Stroke="Black" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="20,50">
                        <BezierSegment Point1="50,10" Point2="130,80" Point3="150,50"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Grid.Row="2" Grid.Column="0" Fill="Red">
            <Path.Data>
                <EllipseGeometry Center="50,10" RadiusX="2" RadiusY="2"/>
            </Path.Data>
        </Path>
        <Path Grid.Row="2" Grid.Column="0" Fill="Blue">
            <Path.Data>
                <EllipseGeometry Center="130,80" RadiusX="2" RadiusY="2"/>
            </Path.Data>
        </Path>
        <TextBlock Grid.Row="2" Grid.Column="1" Margin="3">
            3次ペジェ曲線<LineBreak/>
            StartPoint = 20,50<LineBreak/>
            Point1     = 50,10 (赤点の位置)<LineBreak/>
            Point2     = 130,80 (青点の位置)<LineBreak/>
            Point3     = 150,50 (終点)
        </TextBlock>
    </Grid>
</Window>
 このサンプルコードを実行すると以下の様になります。
Path_ペジェ曲線
 サンプルコードでは制御点の位置を解りやすくするために、第1制御点を赤丸、第2制御点を青丸で表示しています。
 2次ペジェ曲線を描く場合はQuadraticBezierSegmentを使用します。
 Point1が制御点、Point2は終了点です。
 3次ペジェ曲線を描く場合はBezierSegmentを使用します。
 Point1, Point2が制御点、Point3が終了点になります。
 見ての通り、曲線が制御点を通過するわけではありません。
 イメージとしては開始点と終了点を結ぶ直線に対して、制御点の方向に線を引っ張ったような形になります。
 ペジェ曲線を使うことで滑らかな曲線を描くことができます。
 おそらくPathで曲線を描くときは円弧よりもペジェ曲線を使うことの方が多いと思います。
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。