ジオメトリ

サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) Geometry クラスとそこから派生するクラスを使用すると、2D 図形のジオメトリを記述できます。 Geometry オブジェクトは、四角形や円などの単純なものにすることも、2 つ以上のジオメトリ オブジェクトから作成された複合的なものにすることもできます。 さらに、円弧や曲線を含む、より複雑なジオメトリを作成できます。

Geometry クラスは、ジオメトリのさまざまなカテゴリを定義するいくつかのクラスの親クラスです。

• EllipseGeometry は、円または楕円のジオメトリを表します。
• GeometryGroup は、複数のジオメトリ オブジェクトを 1 つのオブジェクトに結合できるコンテナーを表します。
• LineGeometry は、線のジオメトリを表します。
• PathGeometry は、円弧、曲線、楕円、線、四角形で構成できる複雑な図形のジオメトリを表します。
• RectangleGeometry は、長方形または正方形のジオメトリを表します。

Note

GeometryGroup クラスから派生する RoundRectangleGeometry クラスもあります。 詳細については、「RoundRectangleGeometry」を参照してください。

Geometry クラスと Shape クラスは、両方とも 2D 図形を記述するという点で似ているように見えますが、重要な違いがあります。 Geometry クラスは BindableObject クラスから派生し、Shape クラスは View クラスから派生しています。 したがって、Shape オブジェクトは、それ自体をレンダリングしてレイアウト システムに加わることができますが、Geometry オブジェクトはできません。 Shape オブジェクトは Geometry オブジェクトよりも簡単に使用できますが、Geometry オブジェクトの方が汎用性があります。 Shape オブジェクトは 2D グラフィックスのレンダリングに使用されますが、Geometry オブジェクトは 2D グラフィックスの幾何学的領域の定義や、クリッピング用の領域の定義に使用できます。

次のクラスには、Geometry オブジェクトに設定できるプロパティがあります。

• Path クラスは、Geometry を使用してそのコンテンツを記述します。 Geometry オブジェクトに対して Path.Data のプロパティを設定し、Path オブジェクトの Fill と Stroke のプロパティを設定すると、Geometry をレンダリングできます。
• VisualElement クラスには、要素の内容のアウトラインを定義する Geometry 型の Clip プロパティがあります。 Clip のプロパティを Geometry オブジェクトに設定すると、Geometry の領域内にある範囲のみを表示します。 詳しくは、「Geometry を使用してクリップする」をご覧ください。

Geometry クラスから派生するクラスは、単純なジオメトリ、パス ジオメトリ、複合ジオメトリという 3 つのカテゴリに分類できます。

単純なジオメトリ

単純なジオメトリのクラスには、EllipseGeometry、LineGeometry、RectangleGeometry があります。 これらは、円、線、四角形などの基本的な幾何学図形を作成するために使用します。 PathGeometry を使用するか、ジオメトリ オブジェクトを結合する方法でも、これらと同じ図形や、さらに複雑な図形を作成できますが、これらのクラスを使用すると、このような基本的な幾何学図形をより簡単に生成できます。

EllipseGeometry

楕円ジオメトリは、ジオメトリや楕円、円を表し、中心点、半径 x、半径 y で定義します。

EllipseGeometry クラスでは、次のプロパティが定義されます。

• Point 型の Center は、ジオメトリの中心点を表します。
• double 型の RadiusX は、ジオメトリの半径 x の値を表します。 このプロパティの既定値は 0.0 です。
• double 型の RadiusY は、ジオメトリの半径 y の値を表します。 このプロパティの既定値は 0.0 です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

次の例は、Path オブジェクトに EllipseGeometry を作成してレンダリングする方法を示しています。

<Path Fill="Blue"
      Stroke="Red">
  <Path.Data>
    <EllipseGeometry Center="50,50"
                     RadiusX="50"
                     RadiusY="50" />
  </Path.Data>
</Path>

この例では、EllipseGeometry の中心が (50,50) に設定され、半径 x と半径 y の両方が 50 に設定されています。 これにより、デバイスに依存しない単位で直径が 100 の赤い円が作成され、その内部は青で塗りつぶされます。

LineGeometry

線ジオメトリは、線のジオメトリを表し、線の始点と終点を指定して定義します。

LineGeometry クラスでは、次のプロパティが定義されます。

• StartPoint は Point 型であり、線の始点を表します。
• EndPoint は Point 型であり、線の終点を表します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

次の例は、Path オブジェクトの LineGeometry を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
  <Path.Data>
    <LineGeometry StartPoint="10,20"
                  EndPoint="100,130" />
  </Path.Data>
</Path>

この例では、LineGeometry は (10,20) から (100,130) まで描画されます。

Note

LineGeometry をレンダリングする Path の Fill プロパティを設定しても、線には内部がないため、効果はありません。

RectangleGeometry

四角形のジオメトリは、四角形または正方形のジオメトリを表し、相対位置とその高さと幅を指定する Rect 構造体で定義されます。

RectangleGeometry クラスは、四角形の寸法を表す Rect 型の Rect プロパティを定義します。 これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、データ バインディングの対象にして、スタイルを設定できます。

次の例は、Path オブジェクトで RectangleGeometry を作成してレンダリングする方法を示しています。

<Path Fill="Blue"
      Stroke="Red">
  <Path.Data>
    <RectangleGeometry Rect="10,10,150,100" />
  </Path.Data>
</Path>

四角形の位置と大きさは Rect 構造体によって定義されます。 この例では、位置は (10,10)、幅は 150、高さはデバイスに依存しない 100 単位です。

パス ジオメトリ

パス ジオメトリは、円弧、曲線、楕円、線、四角形で構成できる複雑な図形を表します。

PathGeometry クラスでは、次のプロパティが定義されます。

• PathFigureCollection 型の Figuresは、パスの内容を記述する PathFigure オブジェクトのコレクションを表します。
• FillRule 型の FillRuleは、ジオメトリに含まれる交差領域がどのように結合されるかを決定します。 このプロパティの既定値は FillRule.EvenOdd です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

列挙型の FillRule の詳細については、「.NET MAUI の図形: 塗りつぶし規則」を参照してください。

Note

Figures プロパティは PathGeometry クラスの ContentProperty であるため、XAML から明示的に設定する必要はありません。

PathGeometry は、PathFigure オブジェクトのコレクションで構成され、各 PathFigure がジオメトリ内の図形を記述します。 各 PathFigure 自体は 1 つまたは複数の PathSegment オブジェクトで構成されており、それぞれが形状のセグメントを記述します。 多くの種類のセグメントがあります。

• ArcSegment は、2 つの点を結ぶ楕円の円弧を作成します。
• BezierSegment は、2 つの点を結ぶ 3 次ベジエ曲線を作成します。
• LineSegment は、2 つの点を結ぶ直線を作成します。
• PolyBezierSegment は、一連の 3 次ベジエ曲線を作成します。
• PolyLineSegment は、一連の直線を作成します。
• PolyQuadraticBezierSegment は、一連の 2 次ベジエ曲線を作成します。
• QuadraticBezierSegment は、2 次ベジエ曲線を作成します。

上記のすべてのクラスは抽象 PathSegment クラスから派生します。

PathFigure 内のセグメントは 1 つの幾何学図形に結合されて、各セグメントの終点が次のセグメントの始点になります。 PathFigure の StartPoint プロパティでは、最初のセグメントが描画される開始点を指定します。 後続の各セグメントは、前のセグメントの終点から始まります。 たとえば、10,50 から 10,150 までの縦線を定義するには、StartPoint プロパティを 10,50 に設定し、Point プロパティを 10,150 に設定して LineSegment を作成します。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,50">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="10,150" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

より複雑なジオメトリは、PathSegment オブジェクトの組み合わせを使用し、PathGeometry 内で複数の PathFigure オブジェクトを使用して作成できます。

ArcSegment を作成する

ArcSegment は、2 つの点を結ぶ楕円の円弧を作成します。 楕円円弧は、始点と終点、x 半径と y 半径、x 軸の回転係数、円弧が 180 度を超える必要があるかどうかを示す値、および円弧が描画される方向を表す値によって定義されます。

ArcSegment クラスでは、次のプロパティが定義されます。

• Point 型の Point は、楕円円弧の終点を表します。 このプロパティの既定値は (0,0) です。
• Size 型の Size は、円弧の x 半径と y 半径を表します。このプロパティの既定値は (0,0) です。
• double 型の RotationAngle は、楕円が x 軸を中心に回転する角度を表します。 このプロパティの既定値は 0です。
• SweepDirection 型の SweepDirection は、円弧が描画される方向を指定します。 このプロパティの既定値は SweepDirection.CounterClockwise です。
• bool 型の IsLargeArc は、円弧が 180 度を超える必要があるかどうかを示します。 このプロパティの既定値は false です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

ArcSegment クラスには、円弧の始点のプロパティが含まれていません。このクラスが表す円弧の終点のみを定義します。 円弧の始点は、ArcSegment が追加される PathFigure の現在の点です。

SweepDirection 列挙体を使って、次のメンバーを定義できます。

• CounterClockwise: 円弧を反時計回りに描画するように指定します。
• Clockwise: 円弧を時計回りに描画するように指定します。

次の例は、Path オブジェクトで ArcSegment を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,10">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <ArcSegment Size="100,50"
                                            RotationAngle="45"
                                            IsLargeArc="True"
                                            SweepDirection="CounterClockwise"
                                            Point="200,100" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、楕円の円弧が (10,10) から (200,100) に描画されます。

BezierSegment の作成

BezierSegment は、2 つの点を結ぶ 3 次ベジエ曲線を作成します。 3 次ベジエ曲線は、始点、終点、2 つの制御点によって定義されます。

BezierSegment クラスでは、次のプロパティが定義されます。

• Point1 は Point 型であり、曲線の最初の制御点を表します。 このプロパティの既定値は (0,0) です。
• Point2 は Point 型であり、曲線の 2 番目の制御点を表します。 このプロパティの既定値は (0,0) です。
• Point3 は Point 型であり、曲線の終点を表します。 このプロパティの既定値は (0,0) です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

BezierSegment クラスには、曲線の始点のプロパティが含まれていません。 曲線の始点は、BezierSegment が追加される PathFigure の現在の点です。

3 次ベジエ曲線の 2 つの制御点は磁石のように動作し、本来は直線であるはずの部分を引き寄せ、曲線を生成します。 最初の制御点は、曲線の始点に影響します。 2 番目の制御点は、曲線の終了部分に影響します。 曲線は、必ずしもいずれかの制御点を通過するとは限りません。 各制御点は、制御点に向かって曲線の該当部分を移動しますが、制御点を通過しません。

次の例は、Path オブジェクトで BezierSegment を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,10">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <BezierSegment Point1="100,0"
                                               Point2="200,200"
                                               Point3="300,10" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、(10,10) から (300,10) までの 3 次ベジエ曲線を描画します。 曲線には、(100,0) と (200,200) の 2 つの制御点があります。

LineSegment の作成

LineSegment は、2 つの点を結ぶ直線を作成します。

LineSegment クラスは、線分の終点を表す Point 型の Point プロパティを定義します。 このプロパティの既定値は (0,0) であり、BindableProperty オブジェクトを基盤としています。つまり、これは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

LineSegment クラスには、直線の始点のプロパティが含まれていません。 このクラスは、終点のみを定義します。 直線の始点は、LineSegment が追加される PathFigure の現在の点です。

次の例は、Path オブジェクトで LineSegment オブジェクトを作成してレンダリングする方法を示しています。

<Path Stroke="Black"      
      Aspect="Uniform"
      HorizontalOptions="Start">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True"
                                StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="100,100" />
                                <LineSegment Point="100,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、線分は (10,100) から (100,100)、および (100,100) から (100,50) まで描画されます。 さらに、IsClosed プロパティが true に設定されているため、PathFigure は閉じられます。 これにより、三角形が描画されます。

PolyBezierSegment の作成

PolyBezierSegment は、1 つ以上の 3 次ベジエ曲線を作成します。

PolyBezierSegment クラスは、PointCollection 型の Points プロパティを定義します。これは、PolyBezierSegment を定義する点を表します。 PointCollection は、Point オブジェクトの ObservableCollection です。 これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、データ バインディングの対象にして、スタイルを設定できます。

Note

PolyBezierSegment クラスには、曲線の始点のプロパティが含まれていません。 曲線の始点は、PolyBezierSegment が追加される PathFigure の現在の点です。

次の例は、Path オブジェクトの PolyBezierSegment を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,10">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <PolyBezierSegment Points="0,0 100,0 150,100 150,0 200,0 300,10" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、PolyBezierSegment が 2 つの 3 次ベジエ曲線を指定します。 1 つ目の曲線は (10,10) から (150,100) までで、制御点は (0,0)、もう 1 つの制御点は (100,0) です。 2 つ目の曲線は (150,100) から (300,10) までで、制御点は (150,0)、もう 1 つの制御点は (200,0) です。

PolyLineSegment を作成する

PolyLineSegment は 1 つまたは複数の線分を作成します。

PolyLineSegment クラスは、PointCollection 型の Points プロパティを定義します。これは、PolyLineSegment を定義する点を表します。 PointCollection は、Point オブジェクトの ObservableCollection です。 これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、データ バインディングの対象にして、スタイルを設定できます。

Note

PolyLineSegment クラスには線の始点のプロパティが含まれていません。 線の始点は、PolyLineSegment の追加先の PathFigure の現在の点です。

次の例は、Path オブジェクトで PolyLineSegment を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="10,10">
                    <PathFigure.Segments>
                        <PolyLineSegment Points="50,10 50,50" />
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、PolyLineSegment が 2 つの線を指定します。 最初の線は (10,10) から (50,10) で、2 つ目の線は (50,10) から (50,50) です。

PolyQuadraticBezierSegment を作成する

PolyQuadraticBezierSegment は 1 つまたは複数の 2 次ベジエ曲線を作成します。

PolyQuadraticBezierSegment クラスは、PointCollection 型の Points プロパティを定義します。これは、PolyQuadraticBezierSegment を定義する点を表します。 PointCollection は、Point オブジェクトの ObservableCollection です。 これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、データ バインディングの対象にして、スタイルを設定できます。

Note

PolyQuadraticBezierSegment クラスには、曲線の始点のプロパティが含まれていません。 曲線の始点は、PolyQuadraticBezierSegment の追加先の PathFigure の現在の点です。

次の例は、Path オブジェクトで PolyQuadraticBezierSegment を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,10">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <PolyQuadraticBezierSegment Points="100,100 150,50 0,100 15,200" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、PolyQuadraticBezierSegment が 2 つのベジエ曲線を指定します。 1 つ目の曲線は (10,10) から (150,50) までで、制御点は (100,100) です。 2 つ目の曲線は (100,100) から (15,200) までで、制御点は (0,100) です。

QuadraticBezierSegment を作成する

QuadraticBezierSegment は 2 つの点の間の 2 次ベジエ曲線を作成します。

QuadraticBezierSegment クラスでは、次のプロパティが定義されます。

• Point1 は Point 型であり、曲線の制御点を表します。 このプロパティの既定値は (0,0) です。
• Point2 は Point 型であり、曲線の終点を表します。 このプロパティの既定値は (0,0) です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

QuadraticBezierSegment クラスには、曲線の始点のプロパティが含まれていません。 曲線の始点は、QuadraticBezierSegment の追加先の PathFigure の現在の点です。

次の例は、Path オブジェクトで QuadraticBezierSegment を作成してレンダリングする方法を示しています。

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,10">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <QuadraticBezierSegment Point1="200,200"
                                                        Point2="300,10" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、(10,100) から (300,10) までの 2 次ベジエ曲線を描画します。 この曲線には、(200,200) の制御点があります。

複雑なジオメトリを作成する

より複雑なジオメトリは、 PathSegment オブジェクトの組み合わせを使用して作成できます。 次の例では、BezierSegment、LineSegment、ArcSegment を使用して、図形を作成します。

<Path Stroke="Black">
    <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>

この例では、最初に 4 つの点を使用して BezierSegment を定義します。 次に、この例では LineSegment を追加します。これは、BezierSegment の終点から LineSegment で指定された点までの間で描画されます。 最後に、ArcSegment は、LineSegment の終点から ArcSegment で指定された点までの間で描画されます。

さらに複雑なジオメトリは、PathGeometry 内で複数の PathFigure オブジェクトを使用して作成できます。 次の例では、7 つの PathFigure オブジェクトから PathGeometry を作成します。そのオブジェクトの中には複数の PathSegment オブジェクトを含むものがあります。

<Path Stroke="Red"
      StrokeThickness="12"
      StrokeLineJoin="Round">
    <Path.Data>
        <PathGeometry>
            <!-- H -->
            <PathFigure StartPoint="0,0">
                <LineSegment Point="0,100" />
            </PathFigure>
            <PathFigure StartPoint="0,50">
                <LineSegment Point="50,50" />
            </PathFigure>
            <PathFigure StartPoint="50,0">
                <LineSegment Point="50,100" />
            </PathFigure>

            <!-- E -->
            <PathFigure StartPoint="125, 0">
                <BezierSegment Point1="60, -10"
                               Point2="60, 60"
                               Point3="125, 50" />
                <BezierSegment Point1="60, 40"
                               Point2="60, 110"
                               Point3="125, 100" />
            </PathFigure>

            <!-- L -->
            <PathFigure StartPoint="150, 0">
                <LineSegment Point="150, 100" />
                <LineSegment Point="200, 100" />
            </PathFigure>

            <!-- L -->
            <PathFigure StartPoint="225, 0">
                <LineSegment Point="225, 100" />
                <LineSegment Point="275, 100" />
            </PathFigure>

            <!-- O -->
            <PathFigure StartPoint="300, 50">
                <ArcSegment Size="25, 50"
                            Point="300, 49.9"
                            IsLargeArc="True" />
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

この例では、「Hello」という単語は、LineSegment と BezierSegment のオブジェクトと 1 つの ArcSegment オブジェクトの組み合わせを使用して描画されます。

複合ジオメトリ

複合ジオメトリ オブジェクトは、GeometryGroup を使用して作成できます。 GeometryGroup クラスは、1 つ以上の Geometry オブジェクトから複合ジオメトリを作成します。 任意の数の Geometry オブジェクトを GeometryGroup に追加できます。

GeometryGroup クラスでは、次のプロパティが定義されます。

• Children は GeometryCollection 型で、GeometryGroup を定義するオブジェクトを指定します。 GeometryCollection は、Geometry オブジェクトの ObservableCollection です。
• FillRule は FillRule 型で、GeometryGroup の交差領域を結合する方法を指定します。 このプロパティの既定値は FillRule.EvenOdd です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

Children プロパティは GeometryGroup クラスの ContentProperty であるため、XAML から明示的に設定する必要はありません。

FillRule 列挙型の詳細については、「Fill rules」をご覧ください。

複合ジオメトリを描画するには、必要な Geometry オブジェクトを GeometryGroup の子として設定し、それらのオブジェクトを Path オブジェクトと共に表示します。 次の XAML は、その例を示しています。

<Path Stroke="Green"
      StrokeThickness="2"
      Fill="Orange">
    <Path.Data>
        <GeometryGroup>
            <EllipseGeometry RadiusX="100"
                             RadiusY="100"
                             Center="150,150" />
            <EllipseGeometry RadiusX="100"
                             RadiusY="100"
                             Center="250,150" />
            <EllipseGeometry RadiusX="100"
                             RadiusY="100"
                             Center="150,250" />
            <EllipseGeometry RadiusX="100"
                             RadiusY="100"
                             Center="250,250" />
        </GeometryGroup>
    </Path.Data>
</Path>

この例では、X 半径座標と Y 半径座標が同一で、中心座標が異なる 4 つの EllipseGeometry オブジェクトが結合されています。 これにより、4 つの重複する円が作成され、デフォルトの EvenOdd の塗りつぶしルールにより、内部がオレンジ色で塗りつぶされます。

RoundRectangleGeometry

丸い長方形のジオメトリは、角が丸い長方形または正方形のジオメトリを表し、角の半径と、ジオメトリの相対位置、高さ、幅を指定する Rect 構造体によって定義されます。

GeometryGroup クラスから派生した RoundRectangleGeometry クラスで、次のプロパティを定義します。

• CornerRadius は CornerRadius 型で、ジオメトリの角の半径です。
• Rect は Rect 型で、長方形の寸法を表します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Note

RoundRectangleGeometry で使用される塗りつぶしルールは、FillRule.Nonzero です。 塗りつぶしルールの詳細については、「Fill rules」をご覧ください。

次の例は、Path オブジェクトで RoundRectangleGeometry を作成してレンダリングする方法を示しています。

<Path Fill="Blue"
      Stroke="Red">
    <Path.Data>
        <RoundRectangleGeometry CornerRadius="5"
                                Rect="10,10,150,100" />
    </Path.Data>
</Path>

四角形の位置と大きさは Rect 構造体によって定義されます。 この例では、位置は (10,10)、幅は 150、高さは 100 (デバイスに依存しない単位) です。 さらに、長方形の角は、5 (デバイスに依存しない単位) の半径で丸められます。

ジオメトリを含むクリップ

VisualElement クラスには、要素の内容のアウトラインを定義する Geometry 型の Clip プロパティがあります。 Clip のプロパティを Geometry オブジェクトに設定すると、Geometry の領域内にある範囲のみを表示します。

次の例は、Geometry オブジェクトを Image のクリップ領域として使用する方法を示しています。

<Image Source="monkeyface.png">
    <Image.Clip>
        <EllipseGeometry RadiusX="100"
                         RadiusY="100"
                         Center="180,180" />
    </Image.Clip>
</Image>

この例では、EllipseGeometry (RadiusX および RadiusY の値が 100) と Center (180,180) が、Image の Clip プロパティに設定されます。 楕円の領域内にある画像部分のみが表示されます。

Note

単純なジオメトリ、パス ジオメトリ、複合ジオメトリはすべて、VisualElement オブジェクトをクリップするために使用できます。

その他の機能

GeometryHelper クラスには、次のヘルパー メソッドが用意されています。

• FlattenGeometry: Geometry を PathGeometry にフラット化します。
• FlattenCubicBezier: 3 次ベジエ曲線を List<Point> コレクションにフラット化します。
• FlattenQuadraticBezier: 2 次ベジエ曲線を List<Point> コレクションにフラット化します。
• FlattenArc: 楕円弧を List<Point> コレクションにフラット化します。