Vue d'ensemble de Geometry
Mise à jour : novembre 2007
Cette vue d'ensemble décrit l'utilisation des classes Windows Presentation Foundation (WPF) Geometry pour décrire les formes. Cette rubrique compare également les différences entre les objets Geometry et les éléments Shape.
Cette rubrique comprend les sections suivantes.
- Qu'est-ce qu'une géométrie ?
- Comparaison entre géométries et formes
- Propriétés communes qui acceptent une géométrie
- Types de géométrie simples
- Géométries de tracés
- Géométries composites
- Géométries combinées
- Fonctionnalités Freezable
- Autres fonctionnalités de Geometry
- Rubriques connexes
Qu'est-ce qu'une géométrie ?
La classe Geometry et les classes qui en dérivent, telles que EllipseGeometry, PathGeometry et CombinedGeometry permettent de décrire la géométrie d'une forme 2D. Ces descriptions géométriques ont de nombreux usages, tels que la définition d'une forme pour peindre l'écran ou la définition de régions de test de recherche et de découpage. Vous pouvez même utiliser une géométrie pour définir un chemin d'accès d'animation.
Les objets Geometry peuvent être simples, tels que des rectangles et des cercles, ou composites, créés à partir d'au moins deux objets géométriques. Des géométries plus complexes peuvent être créées à l'aide des classes PathGeometry et StreamGeometry qui vous permettent de décrire des arcs et des courbes.
Comme Geometry est un type de Freezable, les objets Geometry fournissent plusieurs fonctionnalités spéciales : ils peuvent être déclarés comme ressources, partagés entre de nombreux objets, configurés en lecture seule pour améliorer les performances, clonés et rendus thread-safe. Pour plus d'informations sur les différentes fonctionnalités fournies par les objets Freezable, consultez Vue d'ensemble des objets Freezable.
Comparaison entre géométries et formes
Les classes Geometry et Shape sont apparemment semblables dans le sens où elles décrivent toutes les deux des formes 2D (si l'on compare par exemple EllipseGeometry et Ellipse), mais elles présentent des différences importantes.
Pour l'une, la classe Geometry hérite de la classe Freezable, tandis que la classe Shape hérite de FrameworkElement. Compte tenu que ce sont des éléments, les objets Shape peuvent se rendre et participer au système de disposition, contrairement aux objets Geometry.
Bien que les objets Shape soient plus facilement utilisables que les objets Geometry, les objets Geometry sont plus polyvalents. Alors qu'un objet Shape est utilisé pour rendre des graphiques 2D, un objet Geometry peut être utilisé pour définir la région géométrique pour les graphiques 2D, définir une région pour le découpage ou définir une région pour le test de recherche, par exemple.
Le trajet
Un Shape, la classe Path, utilise en fait un Geometry pour décrire son contenu. En définissant la propriété Data du Path avec un Geometry et en définissant ses propriétés Fill et Stroke, vous pouvez rendre un Geometry.
Propriétés communes qui acceptent une géométrie
Les sections précédentes indiquaient que les objets Geometry pouvaient être utilisés avec d'autres objets pour diverses raisons, tels que le dessin de formes, l'animation et le découpage. Le tableau suivant répertorie plusieurs classes qui ont des propriétés qui acceptent un objet Geometry.
Type |
Propriété |
|---|---|
Types de géométrie simples
La classe de base pour toutes les géométries est la classe abstraite Geometry. Les classes qui dérivent de la classe Geometry peuvent être groupées en gros en trois catégories : géométries simples, géométries de tracés et géométries composites.
Les classes de géométrie simples incluent LineGeometry, RectangleGeometry et EllipseGeometry et sont utilisées pour créer des formes géométriques de base, telles que des lignes, des rectangles et des cercles.
Un LineGeometry est défini en spécifiant le point de départ de la ligne et son point de terminaison.
Un RectangleGeometry est défini avec une structure Rect qui spécifie sa position relative ainsi que sa hauteur et sa largeur. Vous pouvez créer un rectangle arrondi en définissant les propriétés RadiusX et RadiusY.
Un EllipseGeometry est défini par un point central, un rayon x et un rayon y. Les exemples suivants montrent comment faire pour créer des géométries simples pour le rendu et le découpage.
Ces mêmes formes, ainsi que de plus complexes, peuvent être créées à l'aide d'un PathGeometry ou en combinant des objets géométriques ensemble, mais ces classes fournissent un moyen plus simple de générer ces formes géométriques de base.
L'exemple suivant montre comment créer et rendre un LineGeometry. Comme mentionné précédemment, un objet Geometry ne peut pas se dessiner lui-même, aussi l'exemple utilise une forme Path pour rendre la ligne. Étant donné qu'une ligne n'a pas de zone, le fait de définir la propriété Fill du Path n'aurait aucun effet ; en revanche, seules les propriétés Stroke et StrokeThickness sont spécifiées. L'illustration suivante indique la sortie de l'exemple.
LineGeometry tracée de (10,20) à (100,130)
.gif)
<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;
L'exemple suivant montre comment créer et rendre un EllipseGeometry. L'exemple établit que Center de EllipseGeometry a pour valeur le point 50,50 et que les rayons x et y sont définis tous les deux à 50, ce qui crée un cercle d'un diamètre de 100. L'intérieur de l'ellipse est peint en affectant une valeur à la propriété Fill de l'élément Path, dans ce cas Gold. L'illustration suivante indique la sortie de l'exemple.
EllipseGeometry tracée à (50,50)
.gif)
<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;
L'exemple suivant montre comment créer et rendre un RectangleGeometry. La position et les dimensions du rectangle sont définies par une structure Rect. La position est 50,50 et la hauteur et la largeur sont de 25, ce qui crée un carré. L'illustration suivante indique la sortie de l'exemple.
RectangleGeometry tracée à 50,50
.gif)
<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;
L'exemple suivant montre comment utiliser un EllipseGeometry comme région de découpage pour une image. Un objet Image est défini avec un Width de 200 et un Height de 150. Un EllipseGeometry avec une valeur RadiusX de 100, une valeur RadiusY de 75 et une valeur Center de 100,75 est affecté à la propriété Clip de l'image. Seule la partie de l'image qui se trouve dans la zone de l'ellipse sera affichée. L'illustration suivante indique la sortie de l'exemple.
EllipseGeometry utilisée pour découper un contrôle Image
.png)
<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;
Géométries de tracés
La classe PathGeometry et son équivalent léger, la classe StreamGeometry permettent de décrire plusieurs illustrations complexes composées d'arcs, de courbes et de lignes.
Au cœur d'un PathGeometry, on trouve une collection d'objets PathFigure appelés ainsi car chaque illustration décrit une forme discrète du PathGeometry. Chaque PathFigure se compose lui-même d'un ou de plusieurs objets PathSegment décrivant chacun un segment de l'illustration.
Il existe de nombreux types de segments.
Type de segment |
Description |
Exemple |
|---|---|---|
Crée un arc elliptique entre deux points. |
||
Crée une courbe de Bézier cubique entre deux points. |
||
Crée une ligne entre deux points. |
||
Crée une série de courbes de Bézier cubiques. |
Consultez la page PolyBezierSegment. |
|
Crée une série de lignes. |
Consultez la page PolyLineSegment. |
|
Crée une série de courbes de Bézier quadratiques. |
Consultez la page PolyQuadraticBezierSegment. |
|
Crée une courbe de Bézier quadratique. |
Les segments d'un PathFigure sont regroupés dans une forme géométrique unique qui utilise le point de terminaison de chaque segment comme point de départ du segment suivant. La propriété StartPoint d'un PathFigure spécifie le point depuis lequel le premier segment est dessiné. Chaque segment suivant démarre au point de terminaison du segment précédent. Par exemple, une ligne verticale de 10,50 à 10,150 peut être définie en affectant à la propriété StartPoint la valeur 10,50 et en créant un LineSegment avec un paramètre de propriété Point de 10,150.
L'exemple suivant crée un PathGeometry simple constitué d'un PathFigure unique avec un LineSegment et l'affiche à l'aide d'un élément Path. Le StartPoint de l'objet PathFigure a la valeur 10,20 et un LineSegment est défini avec un point de terminaison de 100,130. L'illustration suivante montre le PathGeometry créé par cet exemple.
PathGeometry contenant un seul 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;
Il est intéressant de comparer cet exemple avec le précédent exemple de LineGeometry. La syntaxe utilisée pour PathGeometry est beaucoup plus documentée que celle utilisée pour un simple LineGeometry et il peut être plus judicieux d'utiliser la classe LineGeometry dans ce cas, mais la syntaxe détaillée de PathGeometry permet d'obtenir des régions géométriques extrêmement élaborées et complexes.
Il est possible de créer des géométries plus complexes à l'aide d'une combinaison d'objets PathSegment.
L'exemple suivant utilise un BezierSegment, un LineSegment et un ArcSegment pour créer une forme. L'exemple commence par créer une courbe de Bézier cubique en définissant quatre points : un point de départ, qui est le point de terminaison du segment précédent, un point de terminaison (Point3) et deux points de contrôle (Point1 et Point2). Les deux points de contrôle d'une courbe de Bézier cubique se comportent comme des aimants qui attirent vers eux des parties qui devraient composer une ligne droite et produisent une courbe. Le premier point de contrôle, Point1, affecte la portion de début de la courbe ; le second point de contrôle, Point2, affecte la portion de fin de la courbe.
L'exemple ajoute ensuite un LineSegment, tracé entre le point de terminaison du BezierSegment qui le précédait au point spécifié par sa propriété LineSegment.
L'exemple ajoute ensuite un ArcSegment, tracé depuis le point de terminaison du LineSegment qui le précédait au point spécifié par sa propriété Point. L'exemple spécifie également les rayons x et y de l'arc (Size), un angle de rotation (RotationAngle), un indicateur stipulant la largeur que devrait avoir l'angle de l'arc résultant (IsLargeArc) et une valeur indiquant la direction dans laquelle est tracé l'arc (SweepDirection). L'illustration suivante montre la forme créée par cet exemple.
PathGeometry
.gif)
<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;
Il est possible de créer des géométries encore plus complexes à l'aide de plusieurs objets PathFigure d'un PathGeometry.
L'exemple suivant crée un PathGeometry avec deux objets PathFigure, chacun desquels contenant plusieurs objets PathSegment. Le PathFigure de l'exemple ci-dessus et un PathFigure avec un PolyLineSegment et un QuadraticBezierSegment sont utilisés. Un PolyLineSegment est défini avec un tableau de points et QuadraticBezierSegment est défini avec un point de contrôle et un point de terminaison. L'illustration suivante montre la forme créée par cet exemple.
PathGeometry avec plusieurs illustrations
.gif)
<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;
StreamGeometry
À l'instar de la classe PathGeometry, un StreamGeometry définit une forme géométrique complexe pouvant contenir des courbes, des arcs et des lignes. À la différence d'un PathGeometry, le contenu d'un StreamGeometry ne prend pas en charge la liaison de données, l'animation ou la modification. Utilisez un StreamGeometry lorsque vous devez décrire une géométrie complexe mais souhaitez éviter les charges mémoire liées à la prise en charge de la liaison des données, de l'animation ou du changement. En raison de son efficacité, la classe StreamGeometry est un bon choix pour décrire des ornements.
Pour obtenir un exemple, consultez Comment : créer une forme à l'aide d'un StreamGeometry.
Syntaxe XAML pour les tracés
Les types PathGeometry et StreamGeometry prennent en charge une syntaxe d'attribut XAML (Extensible Application Markup Language) utilisant une série spéciale de commandes de déplacement et de dessin. Pour plus d'informations, consultez Syntaxe XAML pour les tracés.
Géométries composites
Il est possible de créer des objets à géométrie composite à l'aide d'un GeometryGroup, d'un CombinedGeometry ou en appelant la méthode statique GeometryCombine.
L'objet CombinedGeometry et la méthode Combine effectuent une opération booléenne pour combiner la zone définie par deux géométries. Les objets Geometry qui n'ont pas de zone sont supprimés. Seuls deux objets Geometry peuvent être combinés (bien que ces deux géométries puissent également être composites).
La classe GeometryGroup crée un amalgame des objets Geometry qu'elle contient sans combiner leur zone. Il est possible d'ajouter n'importe quel nombre d'objets Geometry à un GeometryGroup. Pour obtenir un exemple, consultez Comment : créer une forme composite.
Compte tenu qu'ils n'effectuent pas une opération combinée, l'utilisation d'objets GeometryGroup offre des avantages en termes de performances par rapport à l'utilisation d'objets CombinedGeometry ou de la méthode Combine.
Géométries combinées
La section précédente a mentionné que l'objet CombinedGeometry et la méthode Combine combinent la zone définie par les géométries qu'ils contiennent. L'énumération GeometryCombineMode spécifie la façon dont les géométries sont combinées. Les valeurs possibles pour la propriété GeometryCombineMode sont : Union, Intersect, Exclude et Xor.
Dans l'exemple suivant, un CombinedGeometry est défini avec un mode combiné de Union. Geometry1 et Geometry2 sont définis tous les deux comme des cercles de même rayon mais avec des centres décalés de 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>
.png)
Dans l'exemple suivant, un CombinedGeometry est défini avec un mode combiné de Xor. Geometry1 et Geometry2 sont définis tous les deux comme des cercles de même rayon mais avec des centres décalés de 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>
.png)
Pour des exemples supplémentaires, consultez Comment : créer une forme composite et Comment : créer une géométrie combinée.
Fonctionnalités Freezable
Étant donné qu'elle hérite de la classe Freezable, la classe Geometry fournit plusieurs fonctionnalités spéciales : les objets Geometry peuvent être déclarés comme Vue d'ensemble des ressources, partagés entre de nombreux objets, clonés, mis en lecture seule pour améliorer les performances et rendus thread-safe. Pour plus d'informations sur les différentes fonctionnalités fournies par les objets Freezable, consultez Vue d'ensemble des objets Freezable.
Autres fonctionnalités de Geometry
La classe Geometry fournit également des méthodes utilitaires utiles, telles que :
FillContains - Détermine si Geometry contient un autre Geometry.
StrokeContains - Détermine si le trait d'un Geometry contient un point spécifié.
Pour obtenir la liste complète de ses méthodes, consultez la classe Geometry.
Voir aussi
Concepts
Optimisation des performances : graphiques 2D et acquisition d'images
Vue d'ensemble des formes et dessins de base dans WPF
Vue d'ensemble des objets Drawing