Wpf-2d-graphics

WPF-2Dグラフィックス

WPFは、アプリケーションの要件に応じて拡張できる幅広い2Dグラフィックスを提供します。 WPFは、グラフィカルコンテンツの描画に使用されるDrawingオブジェクトとShapeオブジェクトの両方をサポートしています。

形状と描画

• ShapeクラスはFrameworkElementクラスから派生し、Shapeオブジェクトはパネルおよびほとんどのコントロール内で使用できます。
• WPFは、Ellipse、Line、Path、Polygon、Polyline、Rectangleなど、Shapeクラスから派生した基本的な図形オブジェクトを提供します。
• 一方、描画オブジェクトはFrameworkElementクラスから派生したものではなく、より軽量な実装を提供します。
• 描画オブジェクトは、Shapeオブジェクトに比べて簡単です。 パフォーマンス特性も向上しています。

例

さまざまな形状オブジェクトの使用方法を理解するために簡単な例を見てみましょう。

• WPF2DGraphics という名前の新しいWPFプロジェクトを作成します。
• 次のコードは、さまざまな種類の形状を作成します。

<Window x:Class = "WPF2DGraphics.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:WPF2DGraphics"
   xmlns:PresentationOptions = "http://schemas.microsoft.com/winfx/2006/xaml/present ation/options"
   mc:Ignorable = "PresentationOptions" Title = "MainWindow" Height = "400" Width = "604">

   <StackPanel>
      <Ellipse Width = "100" Height = "60" Name = "sample" Margin = "10">
         <Ellipse.Fill>
            <RadialGradientBrush>
               <GradientStop Offset = "0" Color = "AliceBlue"/>
               <GradientStop Offset = "1" Color = "Gray"/>
               <GradientStop Offset = "2" Color = "Red"/>
            </RadialGradientBrush>
         </Ellipse.Fill>
      </Ellipse>

      <Path Stroke = "Red" StrokeThickness = "5" Data = "M 10,70 L 200,70"
         Height = "42.085" Stretch = "Fill" Margin = "140.598,0,146.581,0"/>
      <Path Stroke = "BlueViolet" StrokeThickness = "5" Data = "M 20,100 A 100,56 42 1 0 200,10"
         Height = "81.316" Stretch = "Fill" Margin = "236.325,0,211.396,0"/>

      <Path Fill = "LightCoral" Margin = "201.424,0,236.325,0"
         Stretch = "Fill" Height = "124.929">
         <Path.Data>
            <PathGeometry>
               <PathFigure StartPoint = "50,0" IsClosed = "True">
                  <LineSegment Point = "100,50"/>
                  <LineSegment Point = "50,100"/>
                  <LineSegment Point = "0,50"/>
               </PathFigure>
            </PathGeometry>
         </Path.Data>
      </Path>

   </StackPanel>

</Window>

上記のコードをコンパイルして実行すると、楕円、直線、円弧、多角形が生成されます。

形状

例

領域を描画する方法を示す別の例を見てみましょう。

• WPF2DGraphics1 という名前の新しいWPFプロジェクトを作成します。
• 次のXAMLコードは、イメージ描画で異なるペイントを行う方法を示しています。

<Window x:Class = "WPF2DGraphics1.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:PresentationOptions = "http://schemas.microsoft.com/winfx/2006/xaml/present ation/options"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "PresentationOptions"
   xmlns:local = "clr-namespace:WPF2DGraphics1" Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <Border BorderBrush = "Gray" BorderThickness = "1"
         HorizontalAlignment = "Left" VerticalAlignment = "Top"
         Margin = "20">

         <Image Stretch = "None">
            <Image.Source>
               <DrawingImage PresentationOptions:Freeze = "True">

                  <DrawingImage.Drawing>
                     <DrawingGroup>
                        <ImageDrawing Rect = "300,100,300,180" ImageSource = "Images\DSC_0104.JPG"/>
                        <ImageDrawing Rect = "0,100,250,100" ImageSource = "Images\DSC_0104.JPG"/>
                        <ImageDrawing Rect = "150,0,25,25" ImageSource = "Images\DSC_0104.JPG"/>
                        <ImageDrawing Rect = "0,0,75,75" ImageSource = "Images\DSC_0104.JPG"/>
                     </DrawingGroup>
                  </DrawingImage.Drawing>

               </DrawingImage>
            </Image.Source>
         </Image>

      </Border>
   </Grid>

</Window>

あなたのアプリケーションを実行すると、次の出力が生成されます-

形状の例

上記のコードを実行して、さらに2D形状と図面を試すことをお勧めします。