Navigate
X

図形を描画する（2）

前の記事「図形を描画する（１）」にて四角形と円の描画についてご紹介しました。
今回は四角形、円以外に標準で用意されている図形の線、多角形の描画方法についてご紹介します。

今回は線を描画するLineと多角形を描画するPolygonを使用方法を紹介します。

ここで紹介する図形描画は静的な図形描画ではなく(XAMLで部品を置く)ではなく動的な図形描画(プログラム側で生成と表示)する方法をご紹介します。

詳しい内容は続きを御覧ください。

線を描画する

まず線を描画するにはLineクラスを生成し線を描画する始点、終点、色、線の太さの設定を行います。
Lineの主に設定するプロパティは以下の表の通りになります。
[table “224” not found /]

例えば線の始点を(100,100)とし終点を(200,200)を結ぶ線分で、色を黄色、線の太さを5ptと設定した図形を描画する場合は下記のようになります。

            Line li = new Line();
            li.HorizontalAlignment = HorizontalAlignment.Left;
            li.VerticalAlignment = VerticalAlignment.Top;
            li.Stroke = new SolidColorBrush(Colors.Yellow);
            li.X1 = 100;
            li.Y1 = 100;
            li.X2 = 200;
            li.Y2 = 200;
            li.StrokeThickness = 5;

そして描画を行うにはレイアウトの部品を親として生成したLineクラスを子供として追加します。
例えばXAMLファイルに下記のように書かれていた場合にはContentPanelに生成したLineクラスを追加します。
この場合ContentPanelを親、Lineクラスを子として扱うことになります。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

追加する方法は下記のようにして行います。

    ContentPanel.Children.Add(li);

多角形を描画する

まず多角形を描画するにはPolygonクラスを生成し色、枠線の色、横の長さ、縦の長さ、形を設定を行います。
Polygonの主に設定するプロパティは以下の表の通りになります。
[table “225” not found /]

例えば三角形の横の長さを100px、縦の長さを100px、色を青色、枠線の色を紫、枠線の太さを2ptの図形を描画する場合は下記のようになります。

            PointCollection myPointCollection = new PointCollection();
            myPointCollection.Add(new Point(0, 0));
            myPointCollection.Add(new Point(0, 1));
            myPointCollection.Add(new Point(1, 1));

            Polygon myPolygon = new Polygon();
            myPolygon.Points = myPointCollection;
            myPolygon.Fill = new SolidColorBrush(Colors.Blue);
            myPolygon.Width = 100;
            myPolygon.Height = 100;
            myPolygon.Stretch = Stretch.Fill;
            myPolygon.Stroke = new SolidColorBrush(Colors.Purple);
            myPolygon.StrokeThickness = 2;

そして描画を行うにはレイアウトの部品を親として生成したPolygonクラスを子供として追加します。
例えばXAMLファイルに下記のように書かれていた場合にはContentPanelに生成したPolygonクラスを追加します。
この場合ContentPanelを親、Polygonクラスを子として扱うことになります。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

追加する方法は下記のようにして行います

    ContentPanel.Children.Add(myPolygon);

サンプルとして線と、多角形を描画するサンプルを用意しました。
■MainPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

■MainPage.xaml.cs

        public void draw()
        {
            Line li = new Line();
            li.HorizontalAlignment = HorizontalAlignment.Left;
            li.VerticalAlignment = VerticalAlignment.Top;
            li.Stroke = new SolidColorBrush(Colors.Yellow);
            li.X1 = 100;
            li.Y1 = 100;
            li.X2 = 200;
            li.Y2 = 200;
            li.StrokeThickness = 5;
            ContentPanel.Children.Add(li);

            PointCollection myPointCollection = new PointCollection();
            myPointCollection.Add(new Point(0, 0));
            myPointCollection.Add(new Point(0, 1));
            myPointCollection.Add(new Point(1, 1));

            Polygon myPolygon = new Polygon();
            myPolygon.Points = myPointCollection;
            myPolygon.Fill = new SolidColorBrush(Colors.Blue);
            myPolygon.Width = 100;
            myPolygon.Height = 100;
            myPolygon.Stretch = Stretch.Fill;
            myPolygon.Stroke = new SolidColorBrush(Colors.Purple);
            myPolygon.StrokeThickness = 2;
            ContentPanel.Children.Add(myPolygon);
        }

このサンプルコードを動かした時の画面は下図のようになります。

Tags: LinePolygonWindowsPhone7
muchiki: