ジオメトリの概要Geometry Overview

この概要では、Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) Geometry クラスを使用して図形を記述する方法について説明します。This overview describes how to use the Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) Geometry classes to describe shapes. このトピックでは、Geometry オブジェクトと Shape 要素の違いについても説明します。This topic also contrasts the differences between Geometry objects and Shape elements.

ジオメトリとはWhat Is a Geometry?

Geometry クラスとそれから派生するクラス (EllipseGeometryPathGeometryCombinedGeometryなど) を使用すると、2-d 図形のジオメトリを記述できます。The Geometry class and the classes which derive from it, such as EllipseGeometry, PathGeometry, and CombinedGeometry, enable you to describe the geometry of a 2-D shape. これらの幾何学的な記述には、画面を塗りつぶす図形を定義したり、ヒット テストやクリップ領域を定義するなど、多くの用途があります。These geometric descriptions have many uses, such defining a shape to paint to the screen or defining hit-test and clip regions. ジオメトリを使用して、アニメーション パスを定義することもできます。You can even use a geometry to define an animation path.

Geometry オブジェクトは、2つ以上の geometry オブジェクトから作成された四角形、円、複合など、単純な場合があります。Geometry objects can be simple, such as rectangles and circles, or composite, created from two or more geometry objects. PathGeometry クラスと StreamGeometry クラスを使用して、より複雑なジオメトリを作成できます。これにより、円弧と曲線を記述できます。More complex geometries can be created by using the PathGeometry and StreamGeometry classes, which enable you to describe arcs and curves.

GeometryFreezableの一種であるため、Geometry オブジェクトはいくつかの特殊な機能を提供します。これらはリソースとして宣言したり、複数のオブジェクト間で共有したり、パフォーマンスを向上させたり、複製したり、スレッドセーフにしたりするために読み取り専用にすることができます。Because a Geometry is a type of Freezable, Geometry objects provide several special features: they can be declared as resources, shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. Freezable オブジェクトによって提供されるさまざまな機能の詳細については、「 Freezable オブジェクトの概要」を参照してください。For more information about the different features provided by Freezable objects, see the Freezable Objects Overview.

ジオメトリと図形Geometries vs. Shapes

Geometry クラスと Shape クラスは、両方とも2-d 図形 (たとえば、EllipseGeometryEllipse を比較する) を記述するのと同じように見えますが、重要な違いがあります。The Geometry and Shape classes seem similar in that they both describe 2-D shapes (compare EllipseGeometry and Ellipse for example), but there are important differences.

1つの場合、Geometry クラスは Freezable クラスを継承し、Shape クラスは FrameworkElementから継承されます。For one, the Geometry class inherits from the Freezable class while the Shape class inherits from FrameworkElement. これらは要素であるため、Shape オブジェクトは、それ自体をレンダリングしてレイアウトシステムに参加させることができますが、Geometry オブジェクトは使用できません。Because they are elements, Shape objects can render themselves and participate in the layout system, while Geometry objects cannot.

Shape オブジェクトは Geometry オブジェクトよりも簡単に使用できますが、Geometry オブジェクトの方が汎用性があります。Although Shape objects are more readily usable than Geometry objects, Geometry objects are more versatile. Shape オブジェクトは2-d グラフィックスのレンダリングに使用されますが、Geometry オブジェクトを使用して、2-d グラフィックスの幾何学領域を定義したり、クリッピング用の領域を定義したり、ヒットテストのための領域を定義したりできます。While a Shape object is used to render 2-D graphics, a Geometry object can be used to define the geometric region for 2-D graphics, define a region for clipping, or define a region for hit testing, for example.

パス図形The Path Shape

Path クラスである1つの Shapeは、実際には Geometry を使用してその内容を記述します。One Shape, the Path class, actually uses a Geometry to describe its contents. Path の [Data] プロパティを Geometry に設定し、その Fill および Stroke のプロパティを設定することにより、Geometryを表示できます。By setting the Data property of the Path with a Geometry and setting its Fill and Stroke properties, you can render a Geometry.

ジオメトリを使用する一般的なプロパティCommon Properties That Take a Geometry

これまでのセクションでは、図形の描画、アニメーション、クリッピングなどのさまざまな目的で、ジオメトリ オブジェクトを他のオブジェクトと共に使用できることを説明しました。The preceding sections mentioned that Geometry objects can be used with other objects for a variety of purposes, such as drawing shapes, animating, and clipping. 次の表に、Geometry オブジェクトを受け取るプロパティを持つクラスをいくつか示します。The following table lists several classes that have properties that take a Geometry object.

[種類]Type propertyProperty
DoubleAnimationUsingPath PathGeometry
DrawingGroup ClipGeometry
GeometryDrawing Geometry
Path Data
UIElement Clip

単純なジオメトリの種類Simple Geometry Types

すべてのジオメトリの基底クラスは Geometry抽象クラスです。The base class for all geometries is the abstract class Geometry. Geometry クラスから派生したクラスは、単純なジオメトリ、パスジオメトリ、および複合ジオメトリという3つのカテゴリに大まかに分類できます。The classes which derive from the Geometry class can be roughly grouped into three categories: simple geometries, path geometries, and composite geometries.

単純な geometry クラスには、LineGeometryRectangleGeometry、および EllipseGeometry が含まれ、線、四角形、円などの基本的なジオメトリック形状を作成するために使用されます。Simple geometry classes include LineGeometry, RectangleGeometry, and EllipseGeometry and are used to create basic geometric shapes, such as lines, rectangles, and circles.

  • LineGeometry は、直線と終点の始点を指定することによって定義されます。A LineGeometry is defined by specifying the start point of the line and the end point.

  • RectangleGeometry は、その相対位置と高さと幅を指定する Rect 構造体で定義されます。A RectangleGeometry is defined with a Rect structure which specifies its relative position and its height and width. RadiusXRadiusY のプロパティを設定することにより、角丸四角形を作成できます。You can create a rounded rectangle by setting the RadiusX and RadiusY properties.

  • EllipseGeometry は、中心点、x 半径、および y 半径によって定義されます。An EllipseGeometry is defined by a center point, an x-radius and a y-radius. レンダリングとクリッピング用の単純ジオメトリの作成方法を次の例に示します。The following examples show how to create simple geometries for rendering and for clipping.

これらの同じ図形と複雑な図形は、PathGeometry を使用して作成することも、geometry オブジェクトを組み合わせることによって作成することもできますが、これらのクラスは、これらの基本的なジオメトリック形状を生成するためのより簡単な方法を提供します。These same shapes, as well as more complex shapes, can be created using a PathGeometry or by combining geometry objects together, but these classes provide a simpler means for producing these basic geometric shapes.

次の例では、LineGeometryを作成して表示する方法を示します。The following example shows how to create and render a LineGeometry. 前述のように、Geometry オブジェクトはそれ自体を描画できないため、この例では Path 図形を使用して線を表示します。As noted previously, a Geometry object is unable to draw itself, so the example uses a Path shape to render the line. 線には領域がないため、PathFill プロパティを設定しても効果はありません。代わりに、StrokeStrokeThickness のプロパティのみが指定されています。Because a line has no area, setting the Fill property of the Path would have no effect; instead, only the Stroke and StrokeThickness properties are specified. この例からの出力を次の図に示します。The following illustration shows the output from the example.

LineGeometryA LineGeometry
(10,20) から (100,130) まで描画された LineGeometryA LineGeometry drawn from (10,20) to (100,130)

<Path Stroke="Black" StrokeThickness="1" >
  <Path.Data>
    <LineGeometry StartPoint="10,20" EndPoint="100,130" />
  </Path.Data>
</Path>
LineGeometry myLineGeometry = new LineGeometry();
myLineGeometry.StartPoint = new Point(10,20);
myLineGeometry.EndPoint = new Point(100,130);

Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myLineGeometry;
Dim myLineGeometry As New LineGeometry()
myLineGeometry.StartPoint = New Point(10,20)
myLineGeometry.EndPoint = New Point(100,130)

Dim myPath As New Path()
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 1
myPath.Data = myLineGeometry

次の例では、EllipseGeometryを作成して表示する方法を示します。The next example shows how to create and render an EllipseGeometry. この例では、EllipseGeometryCenter をポイント 50,50 に設定し、x 半径と y 半径の両方を 50に設定します。これにより、直径100の円が作成されます。The examples sets the Center of the EllipseGeometry is set to the point 50,50 and the x-radius and the y-radius are both set to 50, which creates a circle with a diameter of 100. 楕円の内部は、パス要素の Fill プロパティ (この場合 Gold) に値を割り当てることによって描画されます。The interior of the ellipse is painted by assigning a value to the Path element's Fill property, in this case Gold. この例からの出力を次の図に示します。The following illustration shows the output from the example.

EllipseGeometryAn EllipseGeometry
(50,50) に描画された EllipseGeometryAn EllipseGeometry drawn at (50,50)

<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
  </Path.Data>
</Path>
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new Point(50, 50);
myEllipseGeometry.RadiusX = 50;
myEllipseGeometry.RadiusY = 50;

Path myPath = new Path();
myPath.Fill = Brushes.Gold;
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myEllipseGeometry;
Dim myEllipseGeometry As New EllipseGeometry()
myEllipseGeometry.Center = New Point(50, 50)
myEllipseGeometry.RadiusX = 50
myEllipseGeometry.RadiusY = 50

Dim myPath As New Path()
myPath.Fill = Brushes.Gold
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 1
myPath.Data = myEllipseGeometry

次の例では、RectangleGeometryを作成して表示する方法を示します。The following example shows how to create and render a RectangleGeometry. 四角形の位置と大きさは、Rect 構造体によって定義されます。The position and the dimensions of the rectangle are defined by a Rect structure. 位置は 50,50、高さと幅は両方とも 25 で、正方形が作成されます。The position is 50,50 and the height and width are both 25, which creates a square. この例からの出力を次の図に示します。The following illustration shows the output from the example.

RectangleGeometryA RectangleGeometry
50,50 に描画された RectangleGeometryA RectangleGeometry drawn at 50,50

<Path Fill="LemonChiffon" Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <RectangleGeometry Rect="50,50,25,25" />
  </Path.Data>
</Path>
RectangleGeometry myRectangleGeometry = new RectangleGeometry();    
myRectangleGeometry.Rect = new Rect(50,50,25,25);

Path myPath = new Path();
myPath.Fill = Brushes.LemonChiffon;
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myRectangleGeometry;
Dim myRectangleGeometry As New RectangleGeometry()
myRectangleGeometry.Rect = New Rect(50,50,25,25)

Dim myPath As New Path()
myPath.Fill = Brushes.LemonChiffon
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 1
myPath.Data = myRectangleGeometry

次の例は、イメージのクリップ領域として EllipseGeometry を使用する方法を示しています。The following example shows how to use an EllipseGeometry as the clip region for an image. Image オブジェクトは、200の Width と150の Height を使用して定義されます。An Image object is defined with a Width of 200 and a Height of 150. RadiusX 値が100、RadiusY 値が75、Center 値が100、75の EllipseGeometry が、イメージの Clip プロパティに設定されています。An EllipseGeometry with a RadiusX value of 100, a RadiusY value of 75, and a Center value of 100,75 is set to the Clip property of the image. イメージの楕円の領域内の部分だけが表示されます。Only the part of the image that is within the area of the ellipse will be displayed. この例からの出力を次の図に示します。The following illustration shows the output from the example.

クリッピングを使用する (または使用しない) イメージAn Image with and without clipping
イメージ コントロールのクリップに使用される EllipseGeometryAn EllipseGeometry used to clip an Image control

<Image
  Source="sampleImages\Waterlilies.jpg"
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
</Image>

// Create the image to clip.
Image myImage = new Image();
Uri imageUri = 
    new Uri(@"C:\\Documents and Settings\\All Users\\Documents\My Pictures\\Sample Pictures\\Water lilies.jpg", UriKind.Relative);
myImage.Source = new BitmapImage(imageUri);
myImage.Width = 200;
myImage.Height = 150;
myImage.HorizontalAlignment = HorizontalAlignment.Left;    

// Use an EllipseGeometry to define the clip region. 
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new Point(100, 75);
myEllipseGeometry.RadiusX = 100;
myEllipseGeometry.RadiusY = 75;
myImage.Clip = myEllipseGeometry;


' Create the image to clip.
Dim myImage As New Image()
Dim imageUri As New Uri("C:\\Documents and Settings\\All Users\\Documents\My Pictures\\Sample Pictures\\Water lilies.jpg", UriKind.Relative)
myImage.Source = New BitmapImage(imageUri)
myImage.Width = 200
myImage.Height = 150
myImage.HorizontalAlignment = HorizontalAlignment.Left

' Use an EllipseGeometry to define the clip region. 
Dim myEllipseGeometry As New EllipseGeometry()
myEllipseGeometry.Center = New Point(100, 75)
myEllipseGeometry.RadiusX = 100
myEllipseGeometry.RadiusY = 75
myImage.Clip = myEllipseGeometry

パス ジオメトリPath Geometries

PathGeometry クラスとその軽量の StreamGeometry クラスは、円弧、曲線、および線で構成される複数の複雑な数値を記述する手段を提供します。The PathGeometry class and its lightweight equivalent, the StreamGeometry class, provide the means to describe multiple complex figures composed of arcs, curves, and lines.

PathGeometry の中核となるのは、PathFigure オブジェクトのコレクションです。各図には PathGeometry内の個別の図形が記述されているため、という名前が付けられています。At the heart of a PathGeometry is a collection of PathFigure objects, so named because each figure describes a discrete shape in the PathGeometry. PathFigure は、それぞれが図形のセグメントを表す1つ以上の PathSegment オブジェクトで構成されています。Each PathFigure is itself comprised of one or more PathSegment objects, each of which describes a segment of the figure.

多くの種類のセグメントがあります。There are many types of segments.

セグメントの種類Segment Type 説明Description Example
ArcSegment 2 つの点を結ぶ楕円の円弧を作成します。Creates an elliptical arc between two points. 楕円の円弧を作成するCreate an Elliptical Arc.
BezierSegment 2 つの点を結ぶ 3 次ベジエ曲線を作成します。Creates a cubic Bezier curve between two points. 3 次ベジエ曲線を作成するCreate a Cubic Bezier Curve.
LineSegment 2 つの点を結ぶ直性を作成します。Creates a line between two points. PathGeometry で LineSegment を作成するCreate a LineSegment in a PathGeometry
PolyBezierSegment 一続きの 3 次ベジエ曲線を作成します。Creates a series of cubic Bezier curves. PolyBezierSegment の種類のページを参照してください。See the PolyBezierSegment type page.
PolyLineSegment 一続きの直線を作成します。Creates a series of lines. PolyLineSegment の種類のページを参照してください。See the PolyLineSegment type page.
PolyQuadraticBezierSegment 一続きの 2 次ベジエ曲線を作成します。Creates a series of quadratic Bezier curves. PolyQuadraticBezierSegment のページを参照してください。See the PolyQuadraticBezierSegment page.
QuadraticBezierSegment 2 次ベジエ曲線を作成します。Creates a quadratic Bezier curve. 2 次ベジエ曲線を作成するCreate a Quadratic Bezier Curve.

PathFigure 内のセグメントは1つの幾何図形に結合され、各セグメントの終点が次のセグメントの始点になります。The segments within a PathFigure are combined into a single geometric shape with the end point of each segment being the start point of the next segment. PathFigureStartPoint プロパティは、最初のセグメントが描画される地点を指定します。The StartPoint property of a PathFigure specifies the point from which the first segment is drawn. 後続の各セグメントは、前のセグメントの終点から始まります。Each subsequent segment starts at the end point of the previous segment. たとえば、10,50 から 10,150 までの垂直線を定義するには、StartPoint プロパティを 10,50 に設定し、LineSegment プロパティ設定 Point を使用して 10,150を作成します。For example, a vertical line from 10,50 to 10,150 can be defined by setting the StartPoint property to 10,50 and creating a LineSegment with a Point property setting of 10,150.

次の例では、LineSegment を持つ単一の PathFigure で構成される単純な PathGeometry を作成し、Path 要素を使用して表示します。The following example creates a simple PathGeometry comprised of a single PathFigure with a LineSegment and displays it using a Path element. PathFigure オブジェクトの StartPoint10,20 に設定され、LineSegment100,130のエンドポイントで定義されます。The PathFigure object's StartPoint is set to 10,20 and a LineSegment is defined with an end point of 100,130. 次の図は、この例で作成した PathGeometry を示しています。The following illustration shows the PathGeometry created by this example.

LineGeometryA LineGeometry
単一の LineSegment を含む PathGeometryA PathGeometry that contains a single LineSegment

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigure StartPoint="10,20">
          <PathFigure.Segments>
            <LineSegment Point="100,130"/>
          </PathFigure.Segments>
        </PathFigure>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

// Create a figure that describes a 
// line from (10,20) to (100,130).
PathFigure myPathFigure = new PathFigure();
myPathFigure.StartPoint = new Point(10,20);
myPathFigure.Segments.Add(
    new LineSegment(new Point(100,130),
    true /* IsStroked */ ));

/// Create a PathGeometry to contain the figure.
PathGeometry myPathGeometry = new PathGeometry();
myPathGeometry.Figures.Add(myPathFigure);

// Display the PathGeometry. 
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;

' Create a figure that describes a 
' line from (10,20) to (100,130).
Dim myPathFigure As New PathFigure()
myPathFigure.StartPoint = New Point(10,20)
myPathFigure.Segments.Add(New LineSegment(New Point(100,130), True)) ' IsStroked 

''' Create a PathGeometry to contain the figure.
Dim myPathGeometry As New PathGeometry()
myPathGeometry.Figures.Add(myPathFigure)

' Display the PathGeometry. 
Dim myPath As New Path()
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 1
myPath.Data = myPathGeometry

上記の LineGeometry 例と比較すると、この例と比較してみる価値があります。It is worth contrasting this example with the preceding LineGeometry example. PathGeometry に使用される構文は、単純な LineGeometryに使用される構文よりもはるかに詳細であり、この場合は LineGeometry クラスを使用する方が理にかなっていますが、PathGeometry の詳細な構文では非常に複雑で複雑なジオメトリック領域を使用できます。The syntax used for a PathGeometry is much more verbose than that used for a simple LineGeometry, and it may make more sense to use the LineGeometry class in this case, but the verbose syntax of the PathGeometry allows for extremely intricate and complex geometric regions.

PathSegment オブジェクトを組み合わせて使用すると、より複雑なジオメトリを作成できます。More complex geometries can be created by using a combination of PathSegment objects.

次の例では、図形を作成するために、BezierSegmentLineSegment、および ArcSegment を使用します。The next example uses a BezierSegment, a LineSegment, and an ArcSegment to create shape. この例では、最初に3番目のベジエ曲線を作成します。開始点は、前のセグメントの終点、エンドポイント (Point3)、および2つの制御点 (Point1Point2) を定義することです。The example first creates a cubic Bezier curve is by defining four points: a start point, which is the end point of the previous segment, an end point (Point3), and two control points (Point1 and Point2). 3 次ベジエ曲線の 2 つの制御点は磁石のように動作し、本来は直線になる部分を制御点の方へ引き寄せ、曲線を生成します。The two control points of a cubic Bezier curve behave like magnets, attracting portions of what would otherwise be a straight line towards themselves, producing a curve. 最初の制御点である Point1は、曲線の開始部分に影響します。2つ目の制御点である Point2は、曲線の終了部分に影響します。The first control point, Point1, affects the beginning portion of the curve; the second control point, Point2, affects the ending portion of the curve.

次に、LineSegmentを追加します。これは、前の BezierSegment の終点の間に描画され、その LineSegment プロパティによって指定された点に先行します。The example then adds a LineSegment, which is drawn between the end point of the preceding BezierSegment that preceded it to the point specified by its LineSegment property.

この例では、ArcSegmentを追加します。これは、前の LineSegment の終点から Point プロパティで指定されたポイントまで描画されます。The example then adds an ArcSegment, which is drawn from the end point of the preceding LineSegment to the point specified by its Point property. この例では、円弧の x と y 半径 (Size)、回転角度 (RotationAngle)、結果として得られる弧の角度 (IsLargeArc)、および円弧が描画される方向 (SweepDirection) を示すフラグも指定します。The example also specifies the arc's x- and y-radius (Size), a rotation angle (RotationAngle), a flag indicating how large the angle of the resulting arc should be (IsLargeArc), and a value indicating in which direction the arc is drawn (SweepDirection). この例で作成した図形を次の図に示します。The following illustration shows the shape created by this example.

PathGeometryA PathGeometry
PathGeometryA PathGeometry

<Path Stroke="Black" StrokeThickness="1" >
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigure StartPoint="10,50">
          <PathFigure.Segments>
            <BezierSegment
              Point1="100,0"
              Point2="200,200"
              Point3="300,100"/>
            <LineSegment Point="400,100" />
            <ArcSegment
              Size="50,50" RotationAngle="45"
              IsLargeArc="True" SweepDirection="Clockwise"
              Point="200,100"/>
          </PathFigure.Segments>
        </PathFigure>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

// Create a figure.
PathFigure myPathFigure = new PathFigure();
myPathFigure.StartPoint = new Point(10,50);
myPathFigure.Segments.Add(
    new BezierSegment(
        new Point(100,0),
        new Point(200,200),
        new Point(300,100),
        true /* IsStroked */  )); 
myPathFigure.Segments.Add(
    new LineSegment(
        new Point(400,100),
        true /* IsStroked */ ));
myPathFigure.Segments.Add(
    new ArcSegment(
        new Point(200,100),
        new Size(50,50),
        45,
        true, /* IsLargeArc */ 
        SweepDirection.Clockwise, 
        true /* IsStroked */ ));                       

/// Create a PathGeometry to contain the figure.
PathGeometry myPathGeometry = new PathGeometry();
myPathGeometry.Figures.Add(myPathFigure);

// Display the PathGeometry. 
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;

' Create a figure.
Dim myPathFigure As New PathFigure()
myPathFigure.StartPoint = New Point(10,50)
myPathFigure.Segments.Add(New BezierSegment(New Point(100,0), New Point(200,200), New Point(300,100), True)) ' IsStroked 
myPathFigure.Segments.Add(New LineSegment(New Point(400,100), True)) ' IsStroked 
myPathFigure.Segments.Add(New ArcSegment(New Point(200,100), New Size(50,50), 45, True, SweepDirection.Clockwise, True)) ' IsStroked  -  IsLargeArc 

''' Create a PathGeometry to contain the figure.
Dim myPathGeometry As New PathGeometry()
myPathGeometry.Figures.Add(myPathFigure)

' Display the PathGeometry. 
Dim myPath As New Path()
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 1
myPath.Data = myPathGeometry

PathGeometry内の複数の PathFigure オブジェクトを使用して、より複雑なジオメトリを作成することもできます。Even more complex geometries can be created by using multiple PathFigure objects within a PathGeometry.

次の例では、2つの PathFigure オブジェクトを持つ PathGeometry を作成します。各オブジェクトには複数の PathSegment オブジェクトが含まれています。The following example creates a PathGeometry with two PathFigure objects, each of which contains multiple PathSegment objects. 上の例の PathFigure と、PolyLineSegmentQuadraticBezierSegment を持つ PathFigure が使用されます。The PathFigure from the above example and a PathFigure with a PolyLineSegment and a QuadraticBezierSegment are used. PolyLineSegment は、点の配列で定義され、QuadraticBezierSegment は制御ポイントとエンドポイントで定義されます。A PolyLineSegment is defined with an array of points and the QuadraticBezierSegment is defined with a control point and an end point. この例で作成した図形を次の図に示します。The following illustration shows the shape created by this example.

PathGeometryA PathGeometry
複数の図形を使用する PathGeometryA PathGeometry with multiple figures

<Path Stroke="Black" StrokeThickness="1" >
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigure StartPoint="10,50">
          <PathFigure.Segments>
            <BezierSegment
              Point1="100,0"
              Point2="200,200"
              Point3="300,100"/>
            <LineSegment Point="400,100" />
            <ArcSegment
              Size="50,50" RotationAngle="45"
              IsLargeArc="True" SweepDirection="Clockwise"
              Point="200,100"/>
          </PathFigure.Segments>
        </PathFigure>
        
        <PathFigure StartPoint="10,100">
          <PathFigure.Segments>
            <PolyLineSegment Points="50,100 50,150" />
            <QuadraticBezierSegment Point1="200,200" Point2="300,100"/>
          </PathFigure.Segments>
        </PathFigure>                
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

PathGeometry myPathGeometry = new PathGeometry();            

// Create a figure.
PathFigure pathFigure1 = new PathFigure();
pathFigure1.StartPoint = new Point(10,50);
pathFigure1.Segments.Add(
    new BezierSegment(
        new Point(100,0),
        new Point(200,200),
        new Point(300,100),
        true /* IsStroked */ )); 
pathFigure1.Segments.Add(
    new LineSegment(
        new Point(400,100),
        true /* IsStroked */ ));
pathFigure1.Segments.Add(
    new ArcSegment(
        new Point(200,100),
        new Size(50,50),
        45,
        true, /* IsLargeArc */
        SweepDirection.Clockwise, 
        true /* IsStroked */ ));
myPathGeometry.Figures.Add(pathFigure1);    

// Create another figure.
PathFigure pathFigure2 = new PathFigure();
pathFigure2.StartPoint = new Point(10,100);
Point[] polyLinePointArray = 
    new Point[]{ new Point(50, 100), new Point(50, 150)};
PolyLineSegment myPolyLineSegment = new PolyLineSegment();
myPolyLineSegment.Points = 
    new PointCollection(polyLinePointArray);
pathFigure2.Segments.Add(myPolyLineSegment);
pathFigure2.Segments.Add(
    new QuadraticBezierSegment(
        new Point(200,200),
        new Point(300,100),
        true /* IsStroked */ ));
myPathGeometry.Figures.Add(pathFigure2);

// Display the PathGeometry. 
Path myPath = new Path();
myPath.Stroke = Brushes.Black;
myPath.StrokeThickness = 1;
myPath.Data = myPathGeometry;

Dim myPathGeometry As New PathGeometry()

' Create a figure.
Dim pathFigure1 As New PathFigure()
pathFigure1.StartPoint = New Point(10,50)
pathFigure1.Segments.Add(New BezierSegment(New Point(100,0), New Point(200,200), New Point(300,100), True)) ' IsStroked 
pathFigure1.Segments.Add(New LineSegment(New Point(400,100), True)) ' IsStroked 
pathFigure1.Segments.Add(New ArcSegment(New Point(200,100), New Size(50,50), 45, True, SweepDirection.Clockwise, True)) ' IsStroked  -  IsLargeArc 
myPathGeometry.Figures.Add(pathFigure1)

' Create another figure.
Dim pathFigure2 As New PathFigure()
pathFigure2.StartPoint = New Point(10,100)
Dim polyLinePointArray() As Point = { New Point(50, 100), New Point(50, 150)}
Dim myPolyLineSegment As New PolyLineSegment()
myPolyLineSegment.Points = New PointCollection(polyLinePointArray)
pathFigure2.Segments.Add(myPolyLineSegment)
pathFigure2.Segments.Add(New QuadraticBezierSegment(New Point(200,200), New Point(300,100), True)) ' IsStroked 
myPathGeometry.Figures.Add(pathFigure2)

' Display the PathGeometry. 
Dim myPath As New Path()
myPath.Stroke = Brushes.Black
myPath.StrokeThickness = 1
myPath.Data = myPathGeometry

StreamGeometryStreamGeometry

PathGeometry クラスと同様に、StreamGeometry は曲線、円弧、直線を含む複雑な幾何学図形を定義します。Like the PathGeometry class, a StreamGeometry defines a complex geometric shape that may contain curves, arcs, and lines. PathGeometryとは異なり、StreamGeometry のコンテンツは、データバインディング、アニメーション、または変更をサポートしていません。Unlike a PathGeometry, the contents of a StreamGeometry do not support data binding, animation, or modification. 複雑なジオメトリを記述する必要があり、データバインディング、アニメーション、または変更をサポートするオーバーヘッドを避けたい場合は、StreamGeometry を使用します。Use a StreamGeometry when you need to describe a complex geometry but do not want the overhead of supporting data binding, animation, or modification. StreamGeometry クラスは、その効率性のために、装飾を記述するのに適した選択肢です。Because of its efficiency, the StreamGeometry class is a good choice for describing adorners.

例については、「方法 : StreamGeometry を使用して図形を作成する」をご覧ください。For an example, see Create a Shape Using a StreamGeometry.

パス マークアップ構文Path Markup Syntax

PathGeometry 型と StreamGeometry 型では、一連の移動および描画コマンドを使用して Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) 属性構文をサポートしています。The PathGeometry and StreamGeometry types support a Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) attribute syntax using a special series of move and draw commands. 詳しくは、「パス マークアップ構文」をご覧ください。For more information, see Path Markup Syntax.

複合ジオメトリComposite Geometries

複合 geometry オブジェクトを作成するには、GeometryGroupCombinedGeometryを使用するか、または静的 Geometry メソッド Combineを呼び出します。Composite geometry objects can be created using a GeometryGroup, a CombinedGeometry, or by calling the static Geometry method Combine.

  • CombinedGeometry オブジェクトと Combine メソッドは、2つのジオメトリによって定義された領域を結合するブール演算を実行します。The CombinedGeometry object and the Combine method performs a Boolean operation to combine the area defined by two geometries. 領域のない Geometry オブジェクトは破棄されます。Geometry objects that have no area are discarded. 結合できる Geometry オブジェクトは2つだけです (ただし、これら2つのジオメトリを複合ジオメトリにすることもできます)。Only two Geometry objects can be combined (although these two geometries may also be composite geometries).

  • GeometryGroup クラスは、領域を結合せずに、含まれている Geometry オブジェクトの併せ持つを作成します。The GeometryGroup class creates an amalgamation of the Geometry objects it contains without combining their area. GeometryGroupには、任意の数の Geometry オブジェクトを追加できます。Any number of Geometry objects can be added to a GeometryGroup. 例については、「方法 : 複合図形を作成する」をご覧ください。For an example, see Create a Composite Shape.

結合操作を実行しないため、GeometryGroup オブジェクトを使用すると、CombinedGeometry オブジェクトまたは Combine メソッドを使用した場合よりもパフォーマンスが向上します。Because they do not perform a combine operation, using GeometryGroup objects provides performance benefits over using CombinedGeometry objects or the Combine method.

結合したジオメトリCombined Geometries

前のセクションでは、CombinedGeometry オブジェクトと Combine メソッドが、含まれているジオメトリによって定義された領域を結合しています。The preceding section mentioned the CombinedGeometry object and the Combine method combine the area defined by the geometries they contain. GeometryCombineMode 列挙体は、ジオメトリの結合方法を指定します。The GeometryCombineMode enumeration specifies how the geometries are combined. GeometryCombineMode プロパティに指定できる値は、UnionIntersectExclude、および Xorです。The possible values for the GeometryCombineMode property are: Union, Intersect, Exclude, and Xor.

次の例では、和集合の結合モードで CombinedGeometry が定義されています。In the following example, a CombinedGeometry is defined with a combine mode of Union. Geometry1Geometry2 は両方とも同じ半径の円として定義されますが、中心は50でオフセットされます。Both Geometry1 and the Geometry2 are defined as circles of the same radius, but with centers offset by 50.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    
    <!-- Combines two geometries using the union combine mode. -->
    <CombinedGeometry GeometryCombineMode="Union">
      <CombinedGeometry.Geometry1>
        <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
      </CombinedGeometry.Geometry1>
      <CombinedGeometry.Geometry2>
        <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
      </CombinedGeometry.Geometry2>
    </CombinedGeometry>
  </Path.Data>
</Path>

和集合結合モードの結果Results of the Union combine mode

次の例では、CombinedGeometryXorの結合モードで定義されています。In the following example, a CombinedGeometry is defined with a combine mode of Xor. Geometry1Geometry2 は両方とも同じ半径の円として定義されますが、中心は50でオフセットされます。Both Geometry1 and the Geometry2 are defined as circles of the same radius, but with centers offset by 50.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    
    <!-- Combines two geometries using the XOR combine mode. -->
    <CombinedGeometry GeometryCombineMode="Xor">
      <CombinedGeometry.Geometry1>
        <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
      </CombinedGeometry.Geometry1>
      <CombinedGeometry.Geometry2>
        <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
      </CombinedGeometry.Geometry2>
    </CombinedGeometry>
  </Path.Data>
</Path>

Xor 結合モードの結果Results of the Xor combine mode

その他の例については、「方法 : 複合図形を作成する」と「方法 : 結合したジオメトリを作成する」をご覧ください。For additional examples, see Create a Composite Shape and Create a Combined Geometry.

Freezable 機能Freezable Features

Geometry クラスは Freezable クラスから継承するため、いくつかの特殊な機能を提供します。 Geometry オブジェクトをXAML リソースとして宣言したり、複数のオブジェクト間で共有したり、パフォーマンスを向上させるために読み取り専用にしたり、複製したり、作成したりすることができます。スレッドセーフ。Because it inherits from the Freezable class, the Geometry class provide several special features: Geometry objects can be declared as XAML Resources, shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. Freezable オブジェクトによって提供されるさまざまな機能の詳細については、「 Freezable オブジェクトの概要」を参照してください。For more information about the different features provided by Freezable objects, see the Freezable Objects Overview.

その他のジオメトリ機能Other Geometry Features

Geometry クラスには、次のような便利なユーティリティメソッドも用意されています。The Geometry class also provides useful utility methods, such as the following:

メソッドの完全な一覧については、Geometry クラスを参照してください。See the Geometry class for a complete listing of its methods.

関連項目See also