FC2ブログ

スポンサーサイト

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

Pathでお絵かき6 複数のPathを使って絵を作る

 今回は複数のPath(図形)を組み合わせて1つの絵を作ります。
  Pathでお絵かき2 図形を組み合わせるではGeometryGroupやCombinedGeometryを使って複数の図形を合成して1つの図形にしていましたが、この方法だと出来上がる図形は見た目複数の図形に分かれていても1つの図形(Path)として扱われます。
 そのため、こちらの図形は赤色で、あちらの図形は青色に塗りたいといったことはこの方法ではできません。
 異なる図形に違う色を塗りたい場合は、別々のPathとして描く必要があります。
 では試しに赤い丸の右に青い四角を並べた絵をPathを使って描いてみます。
<Window x:Class="Path6_1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="250">
    <Grid>
        <Path Stroke="Black" StrokeThickness="1" Fill="Red">
            <Path.Data>
                <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
            </Path.Data>
        </Path>
        <Path Stroke="Black" StrokeThickness="1" Fill="Blue">
            <Path.Data>
                <RectangleGeometry Rect="100,00,100,100"/>
            </Path.Data>
        </Path>
    </Grid>
</Window>
 これを実行すと以下の様になります。
Path_絵1png
 目的の絵は描けましたが、このコードだとウインドウサイズが変更されても絵のサイズは変わりません。
 ウインドウサイズに合わせて拡大縮小できるように2つのPathのStretchをUniformにすると以下の様になります。
Path_絵2
 ウインドウサイズを変更すると拡大縮小されるようになりましたが、図のレイアウトが狂ってしまい、赤い丸が青い四角の下に隠れて見えなくなってしまいました。
 これは、StretchがNoneの場合は、指定した位置に描かれるので2つのPathの位置関係が保たれていましたが、StretchをNone以外にするとそれぞれのPathで個別に拡大縮小が行われます。
 その際には当然他のPathとの位置関係など考慮されません。そのため、拡大縮小できるようにStretchの値を変更するとレイアウトが崩れてしまいます。
 それでは、複数のPathを使用して拡大縮小が可能な絵を作るにはどうすればよいのでしょうか?
 答えはViewboxを使用することです。
<Window x:Class="Path6_2.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>
        <Viewbox>
            <Grid>
                <Path Stroke="Black" StrokeThickness="1" Fill="Red">
                    <Path.Data>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
                    </Path.Data>
                </Path>
                <Path Stroke="Black" StrokeThickness="1" Fill="Blue">
                    <Path.Data>
                        <RectangleGeometry Rect="100,00,100,100"/>
                    </Path.Data>
                </Path>
            </Grid>
        </Viewbox>
    </Grid>
</Window>
 こうすると以下の画像の様に、ウインドウサイズを変更するとそれに合わせてレイアウトを崩さずに拡大縮小されます。
Path_絵3
 Viewboxの中で複数のPathを使って絵を作ります。
 ViewboxはStretchプロパティを持っています。拡大縮小の方法はPathのStretchと同じです。
 ViewboxのStretchはデフォルトでUniformなので、Viewboxの中で図を作成するだけで拡大縮小が可能になります。
 Viewboxの中ではPathの拡大縮小は行わないようにして絵を作成します。
 最終的に表示される図の大きさは描画領域に合わせてViewboxが拡大縮小して表示してくれるので大きさについては気にしなくても大丈夫です。
 表示したい絵のレイアウトに注意を払ってください。
 絵を作成している途中で拡大縮小されると位置合わせがやりにくくなります。そんな時は一時的にViewboxのStretchをNoneにして、絵が完成した後にStretchをUniformに戻すと作りやすくなります。

 今回でPathの説明は終了となります。
 解説ではまともな絵を描いていませんでしたが、これまでに説明した内容を使えばちょっとしたアイコン画像ぐらいなら作成できるようになっているはずです。
 Path手書きで凝ったアイコンを作るのはかなり大変ですが、頑張れば不可能ではありません。
 絵心がないからと言ってボタンアイコンを作るのを諦めていた人も試しにPathで作ってみてはどうでしょうか。
スポンサーサイト

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

コメントの投稿

非公開コメント

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