FC2ブログ

スポンサーサイト

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

Pathでお絵かき3 線を繋いで図形を作る

 今回は線を繋いで1つの図形(Path)を作成する方法を説明します。
 線は直線だけでなく円弧やペジエ曲線も使用可能ですが、今回は直線のみ使用します。(円弧やペジエ曲線についてはまた次回以降に説明します。)
 この方法を使えばどんな図形でも描くことが可能になります。(複雑な図形を描こうとするとかなり大変ですが。)
 このサンプルでは星マークを描いてみます。
<Window x:Class="Path3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="450">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        
        <Grid Grid.Column="0">
            <TextBlock Text="FillRule=Nonzero, IsClosed=False"/>
            <Path Stroke="Black" Fill="LightBlue" Stretch="Uniform">
                <Path.Data>
                    <PathGeometry FillRule="Nonzero">
                        <PathFigure StartPoint="100,0" IsClosed="False" IsFilled="True">
                            <LineSegment Point="158,180"/>
                            <LineSegment Point="4,69"/>
                            <LineSegment Point="195,69"/>
                            <LineSegment Point="41,180"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>         
        </Grid>

        <Grid Grid.Column="1">
            <TextBlock Text="FillRule=EvenOdd, IsClosed=True"/>
            <Path Stroke="Black" Fill="LightBlue" Stretch="Uniform">
                <Path.Data>
                    <PathGeometry FillRule="EvenOdd">
                        <PathFigure StartPoint="100,0" IsClosed="True">
                            <LineSegment Point="158,180"/>
                            <LineSegment Point="4,69"/>
                            <LineSegment Point="195,69"/>
                            <LineSegment Point="41,180"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Grid>
    </Grid>
</Window>
 線を繋いで図形を作る場合はPathFigureを使用します。
 PathFigureのStartPointが線の開始点を表しています。
 PathFigure以下に順番に線を指定していきます。
 直線の場合は線の終了点(Point)を指定します。開始点は直前の線の終了点となります。
 PathFigureのIsClosedがFalseの場合は、開始点と終了点の間に線を引きません。
 IsClosedがtrueの場合は開始点と終了点の間に直線が引かれます。
 IsFilledは図形を塗りつぶすかどうかです。デフォルトでtrueになっているので塗りつぶしたくない場合はfalseにしてください。
 PathGeometryのFillRuleはGeometryGroupのFillRuleと同じで、図形の重なり方による塗り分けルールです。
 このサンプルではFillRuleとIsClosedの値を変更しています。
Path-星マーク
 FillRuleがEvenOddの場合は偶数回重なっている部分(真ん中の部分)が塗りつぶされていません。GeometryGroupの時と違って重なっているかどうかがかなり解りにくいので使用する場合は注意が必要です。
 IsClosedがfalseの場合は、開始点と終了点の間に線は引かれません。線は引かれませんが塗りつぶし範囲は開始点と終了点を直線で結んだ状態と一致します。
 このサンプルでは星マークを一筆書きの要領で描いているので線が邪魔です。PathのStrokeをなしにすると線が消えて綺麗な星マークになります。
 枠線付きで綺麗な星マークを描きたい場合は、頑張って星の外枠のみを描くか、工夫して枠線を作成する必要があります。
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
11 | 2018/12 | 01
- - - - - - 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 31 - - - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。