30.2 Path-Elemente

In den vorhergehenden Abschnitten haben wir uns einige von Shape abgeleitete Klassen angesehen. Eine Klasse haben wir noch nicht betrachtet: Path. Von allen Shapes ist Path sicherlich das mächtigste und vielseitigste mit den meisten Möglichkeiten, denn mit Path lassen sich auch komplexeste Figuren darstellen.

Ein Path beschreibt eine geometrische Figur natürlich ebenfalls mit Linien, Kreisen usw. Sollten Sie jetzt aber der Meinung sein, hier die bereits behandelten Elemente wie Line oder Ellipse verwenden zu können, liegen Sie falsch. Stattdessen verwendet Path andere Elemente, die von der Klasse Geometry abgeleitet sind und in ihrem Bezeichner das Suffix Geometry haben. Dazu gehören LineGeometry, EllipseGeometry und RectangleGeometry. Ein wesentliches Unterscheidungsmerkmal zwischen Line und LineGeometry ist beispielsweise, dass LineGeometry nicht auf Ereignisse reagiert – ganz im Gegensatz zu Line. Das gilt auch für die anderen Geometry-Objekte.

Ein anderes Merkmal ist, dass sich Geometry-Elemente nicht selbst zeichnen können – sie sind beispielsweise auf Path angewiesen. Die Eigenschaften Fill oder Stroke werden Sie daher vergeblich in Geometry-Elementen suchen. Die geometrische Figur, die durch Path beschrieben wird, gibt man der Path-Eigenschaft Data an, die Geometry-Elemente akzeptiert. Dabei kann es sich im einfachen Fall um genau ein Element handeln, aber auch um mehrere.

Genug der Worte, sehen wir uns nun die Festlegung einer Ellipse mit Path an.

<Path Stroke="Black">
  <Path.Data>
    <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="60" />
  </Path.Data>
</Path>

Listing 30.4 Eine Ellipse mit »Path« im XAML-Code

Es fällt vermutlich sofort auf, dass die Größe der Ellipse nun nicht mehr durch Height und Width bestimmt wird, sondern durch die Eigenschaft Center. Die Größe der Ellipse wird durch RadiusX und RadiusY festgelegt. RadiusX beschreibt dabei den Radius in X-Richtung, RadiusY in Y-Richtung.

Ein ähnlicher Unterschied findet sich auch zwischen den Klassen Rectangle und RectangleGeometry. Hier wird die Eigenschaft Rect dazu benutzt, die relative Position und die Abmessungen festzulegen.

<Path Stroke="Black">
  <Path.Data>
    <RectangleGeometry Rect="40,10,100,150" RadiusX="20" RadiusY="50" />
  </Path.Data>
</Path>

Listing 30.5 Relative Position und Abmessungen festlegen

Die beiden ersten Zahlen geben die Position des Bezugspunktes an (das ist die linke obere Ecke), die beiden letzten die Breite und Höhe. Mit RadiusX und RadiusY können Sie die Ecken sogar mit den angegebenen Radien runden.

30.2.1 GeometryGroup

So wie in den beiden Listings zuvor gezeigt, können Sie nur eine geometrische Figur ausgeben. Natürlich ließen sich mehrere Path-Elemente angeben, um zumindest optisch eine komplexe Figur zu erstellen. Aber es gibt auch einen anderen Weg, bei dem Hilfsklassen zum Einsatz kommen. Unter Zuhilfenahme von Hilfsklassen lassen sich mehrere geometrische Figuren zu einer Gesamtfigur zusammenfassen

Zu diesen Hilfsklassen gehört GeometryGroup, die im folgenden Listing ein EllipseGeometry- und ein RectangleGeometry-Element kombiniert. Die Ausgabe sehen Sie in Abbildung 30.4.

<Path Fill="Blue">
  <Path.Data>
    <GeometryGroup FillRule="Nonzero">
      <EllipseGeometry Center="200,185" RadiusX="30" RadiusY="20" />
      <RectangleGeometry Rect="110,110,100,150" RadiusX="20" RadiusY="50" />
    </GeometryGroup>
  </Path.Data>
</Path>

Listing 30.6 Beschreibung einer geometrischen Figur

Mit Fill wird die Füllfarbe Blau festgelegt, die für den gesamten umschlossenen Bereich der Figur steht. In die Data-Eigenschaft ist das GeometryGroup-Element eingebettet, das seinerseits die Geometry-Elemente des Rechtecks und der Ellipse enthält.

Abbildung 30.4 Die durch »GeometryGroup« beschriebene geometrische Figur

Beachten Sie hierbei auch die Eigenschaft FillRule, mit der beschrieben wird, wie die sich überschneidenden Bereiche der Objekte kombiniert werden. FillRule kann durch EvenOdd und Nonzero beschrieben werden. In Abbildung 30.5 ist die Einstellung EvenOdd.

Abbildung 30.5 Auswirkung der Einstellung »EvenOdd« der Eigenschaft »FillRule«

30.2.2 CombinedGeometry

Mit GeometryGroup lassen sich beliebig viele Geometry-Elemente kombinieren, mit CombinedGeometry nur zwei. CombinedGeometry weist mit GeometryCombineMode eine besondere Eigenschaft auf, mit der die Kombination der beiden Elemente beschrieben wird. Die Eigenschaft ist vom Typ der Enumeration GeometryCombineMode, die die Werte Exclude, Intersect, Union und Xor enthält. Die Auswirkungen sollten wir uns in einer Abbildung ansehen.

Abbildung 30.6 Auswirkungen der Eigenschaft »GeometryCombineMode«

Der Abbildung liegt der folgende XAML-Code zugrunde:

<Canvas>
  <Path Fill="Blue">
    <Path.Data>
      <CombinedGeometry GeometryCombineMode="Xor">
        <CombinedGeometry.Geometry1>
          <EllipseGeometry Center="100,100" RadiusX="50" RadiusY="50" />
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
          <EllipseGeometry Center="150,100" RadiusX="50" RadiusY="50" />
        </CombinedGeometry.Geometry2>
      </CombinedGeometry>
    </Path.Data>
  </Path>
</Canvas>

Listing 30.7 XAML-Code für Abbildung 30.6

Die beiden Geometry-Objekte müssen mit den beiden Eigenschaften Geometry1 und Geometry2 zugeordnet werden. Anders als bei einer GeometryGroup wird aus der durch die blaue Farbe gekennzeichneten Fläche eine neue geometrische Figur geschaffen.

30.2.3 PathGeometry

GeometryGroup und CombinedGeometry sind noch beschränkt in ihren Möglichkeiten. Zur Darstellung auch komplexester geometrischer Figuren ist das Element PathGeometry bestens geeignet. Die resultierende Gesamtfigur wird dabei in mehrere einzelne Figuren zerlegt, deren Linien schrittweise zusammengefügt werden. Diese Vorgehensweise erfordert viel Detailarbeit, woraus am Ende auch ein unter Umständen sehr komplexer XAML-Code resultiert.

Das folgende Codebeispiel demonstriert den Einsatz des PathGeometry-Elements. Die Ausgabe ist kaum der Rede wert, es handelt sich um ein einfaches Quadrat.

<Canvas>
  <Path Stroke="#FF000000">
    <Path.Data>
      <PathGeometry>
        <PathGeometry.Figures>
          <PathFigure StartPoint="0,0" IsClosed="True">         
            <LineSegment Point="100,0" />                             
            <LineSegment Point="100,100" />
            <LineSegment Point="0,100" />                                           
          </PathFigure>
        </PathGeometry.Figures>                          
      </PathGeometry>
    </Path.Data>        
  </Path>         
</Canvas>

Listing 30.8 Darstellung eines Quadrats

Innerhalb des PathGeometry-Elements ist in der Eigenschaft Figures ein PathFigure-Element eingebettet. In diesem Beispiel handelt es sich nur um ein PathFigure-Element, es können aber x-beliebig viele sein. In PathFigure sind die grafischen Elemente eingebettet. An der namentlichen Kennzeichnung können Sie bereits erkennen, dass es sich um eine ganz besondere Gruppe von Elementen handelt. Tatsächlich müssen sie von PathSegment abgeleitet sein.

PathSegment zeichnet sich nur durch zwei Eigenschaften aus: Mit IsStroked kann festgelegt werden, ob ein Element gezeichnet werden soll, und mit IsSmoothJoin legen Sie fest, ob die Verbindung zum Vorgängerelement abgerundet werden soll oder nicht.

Im Element PathFigure wird über StartPoint der Startpunkt des geometrischen Objekts definiert. Mit IsClosed lässt sich der letzte Endpunkt des letzten geometrischen Objekts mit dem Startpunkt des ersten verbinden, um so ein geschlossenes Objekt zu erhalten.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.