FC2ブログ

スポンサーサイト

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

Pathでお絵かき2 図形を組み合わせる

 Pathでは複数の図形を組み合わせて1つの図形を作ることもできます。
 図形を組み合わせる方法には、GeometryGroupを使用する方法とCombinedGeometryを使用する方法があります。
 先ずはGeometryGroupを使用する方法を説明します。
<Window x:Class="Path2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="220" Width="400">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        
        <Grid Grid.Column="0">
            <Path Stroke="Black" Fill="LightBlue">
                <Path.Data>
                    <GeometryGroup FillRule="Nonzero">
                        <RectangleGeometry Rect="0,20,100,100"/>
                        <RectangleGeometry Rect="60,60,90,90"/>
                        <RectangleGeometry Rect="80,80,90,90"/>
                    </GeometryGroup>
                </Path.Data>
            </Path>
            <TextBlock Text="Nonzero"/>
        </Grid>

        <Grid Grid.Column="1">
            <Path Stroke="Black" Fill="LightBlue">
                <Path.Data>
                    <GeometryGroup FillRule="EvenOdd">
                        <RectangleGeometry Rect="0,20,100,100"/>
                        <RectangleGeometry Rect="60,60,90,90"/>
                        <RectangleGeometry Rect="80,80,90,90"/>
                    </GeometryGroup>
                </Path.Data>
            </Path>
            <TextBlock Text="EvenOdd"/>
        </Grid>
    </Grid>
</Window>
 Path.DataにGeometryGroupを指定し、GeometryGroup内で組み合わせたい図形を指定します。
 GeometryGroupのFillRuleで図形が重なった部分の色をどうするのかを指定できます。
 このサンプルコードは、同じPathに対してFillRuleのみ変更しています。
 これを実行すると以下の様になります。
Path-GeometryGroup.png
 FillRuleがNonzeroの場合は、単純にすべて塗りつぶします。
 FillRuleがEvenOddの場合は、重なっている回数が偶数の領域は塗りつぶしません。

 次に、CombinedGeometryを使用する方法を説明します。
<Window x:Class="Path2_2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="525">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        
        <Grid Grid.Column="0">
            <Path Stroke="Black" Fill="LightBlue">
                <Path.Data>
                    <CombinedGeometry GeometryCombineMode="Exclude">
                        <CombinedGeometry.Geometry1>
                            <RectangleGeometry Rect="20,20,100,50"/>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <EllipseGeometry Center="70,45" RadiusX="30" RadiusY="40"/>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Path.Data>
            </Path>
            <TextBlock Text="Exclude"/>
        </Grid>

        <Grid Grid.Column="1">
            <Path Stroke="Black" Fill="LightBlue">
                <Path.Data>
                    <CombinedGeometry GeometryCombineMode="Intersect">
                        <CombinedGeometry.Geometry1>
                            <RectangleGeometry Rect="20,20,100,50"/>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <EllipseGeometry Center="70,45" RadiusX="30" RadiusY="40"/>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Path.Data>
            </Path>
            <TextBlock Text="Intersect"/>
        </Grid>

        <Grid Grid.Column="2">
            <Path Stroke="Black" Fill="LightBlue">
                <Path.Data>
                    <CombinedGeometry GeometryCombineMode="Union">
                        <CombinedGeometry.Geometry1>
                            <RectangleGeometry Rect="20,20,100,50"/>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <EllipseGeometry Center="70,45" RadiusX="30" RadiusY="40"/>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Path.Data>
            </Path>
            <TextBlock Text="Union"/>
        </Grid>

        <Grid Grid.Column="3">
            <Path Stroke="Black" Fill="LightBlue">
                <Path.Data>
                    <CombinedGeometry GeometryCombineMode="Xor">
                        <CombinedGeometry.Geometry1>
                            <RectangleGeometry Rect="20,20,100,50"/>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <EllipseGeometry Center="70,45" RadiusX="30" RadiusY="40"/>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Path.Data>
            </Path>
            <TextBlock Text="Xor"/>
        </Grid>
    </Grid>
</Window>
 CombinedGeometryでは2つの図形を組み合わせて1つの図形を作ります。
 Geometry1とGeometry2で組み合わせる図形を指定します。
 GeometryCombineModeでGeometry1とGeometry2をどうやって合成するかを指定します。
 このサンプルコードは同じ図形に対してGeometryCombineModeのみを変更しています。
 これを実行すると以下の様になります。
Path-CombinedGeometry.png
 GeometryCombineModeがExcludeの場合は、Geometry1からGeometry2を引いた図形になります。
 このサンプルの様に作成された図が2つに分かれていても1つの図形(Path)として扱われます。
 GeometryCombineModeがIntersectの場合は、Geometry1とGeometry2が重なっている部分のみが図形となります。
 GeometryCombineModeがUnionの場合は、Geometry1とGeometry2を足した図形になります。
 GeometryCombineModeがXorの場合は、Geometry1とGeometry2の重なっている部分のみが抜けた図形になります。
 CombinedGeometryは2つの画像しか組み合わさることができませんが、CombinedGeometryを幾つもネストすることで複雑な図形を作ることができます。
スポンサーサイト

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

コメントの投稿

非公開コメント

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