Visão Geral de Geometria

Artigo
08/25/2010

Esta visão geral descreve como usar as classes Geometry Windows Presentation Foundation (WPF) para descrever formas. Este tópico também contrasta as diferenças entre objetos Geometry e elementos Shape.

Este tópico contém as seguintes seções.

O que é um Geometry?
Geometrias vs.Shapes
Propriedades comuns que dê uma geometria
Tipos Simples de Geometria
Geometrias de Caminho
Geometrias Compostas
Geometries Combinadas
Características Freezable (Congeláveis)
Outros Recursos Geometry
Tópicos relacionados

O que é um Geometry?

A classe Geometry e as classes que derivam dela, como EllipseGeometry, PathGeometry e CombinedGeometry, permitem que você descreva a geometria de uma forma 2-D. Essas descrições geométricas têm muitos usos, tais definindo uma forma para pintar a tela ou definir regiões de teste de clique ou de recorte. Você ainda pode usar uma geometria para definir um caminho de animação.

Objetos Geometry podem ser simples, como retângulos e círculos, ou compostos, criados a partir dois ou mais objetos de geometria. Geometrias mais complexas podem ser criadas usando-se as classes PathGeometry e StreamGeometry, que permitem que você descreva arcos e curvas.

Porque um Geometry é um tipo de Freezable, Geometry objetos fornecem vários recursos especiais: Eles podem ser declarados sistema autônomo recursos, compartilhados entre vários objetos, feitos somente leitura para melhorar o desempenho, clonada e feita thread-safe. Para mais informações sobre as diferentes características fornecidas por objetos Freezable, veja Visão geral sobre objetos Freezable.

Geometrias vs.Shapes

As classes Geometry e Shape parecem semelhantes, pois ambas descrevem formas 2-D (compare EllipseGeometry e Ellipse, por exemplo), mas existem diferenças importantes.

A classe Geometry herda da classe Freezable enquanto a classe Shape herda de FrameworkElement. Como eles são elementos, objetos Shape podem renderizar a si próprios e participar no sistema de layout, enquanto objetos Geometry não podem.

Embora os objetos Shape sejam mais prontamente usáveis que objetos Geometry, objetos Geometry são mais versáteis. Enquanto um objeto Shape é usado para renderizar gráficos 2-D, um objeto Geometry pode ser usado para definir a região geométrica para gráficos 2-D, definir uma região de corte, ou definir uma região para teste de clique, por exemplo.

A Forma Caminho

Um Shape, a classe Path, na verdade usa um Geometry para descrever seu conteúdo. Definindo a propriedade Data do Path com a Geometry e definindo suas propriedades Fill e Stroke, você pode renderizar um Geometry.

Propriedades comuns que dê uma geometria

As seções anteriores mencionaram que objetos Geometry podem ser usados com outros objetos para uma variedade de finalidades, como desenhar formas, animação e recorte. A tabela a seguir lista várias classes que têm propriedades que recebem um objeto Geometry.

Type (Tipo)	Propriedade
DoubleAnimationUsingPath	PathGeometry
DrawingGroup	ClipGeometry
GeometryDrawing	Geometry
Path	Data
UIElement	Clip

Tipos Simples de Geometria

A classe base para todas as geometrias é a classe abstrata Geometry. As classes que derivam de Geometry classe aproximadamente pode ser agrupado em três categorias: geometrias simples, geometrias de caminho e geometrias compostas.

Classes de geometria simples incluem LineGeometry, RectangleGeometry e EllipseGeometry e são usados para criar formas geométricas básicas, como linhas, retângulos e círculos.

Um LineGeometry é definido especificando-se o ponto inicial da linha e o ponto de extremidade.
Um RectangleGeometry é definido com uma estrutura Rect que especifica sua posição relativa e sua altura e largura. Você pode criar um retângulo arredondado definindo as propriedades RadiusX e RadiusY.
Um EllipseGeometry é definido por um ponto central, um raio em x, e um radio em y. Os exemplos a seguir mostram como criar geometrias simples para renderização e recorte.

Essas mesmas formas, bem como formas mais complexas, podem ser criadas usando um PathGeometry ou combinando objetos geometria juntos, mas essas classes fornecem um meio mais simples para produzir essas formas geométricas básicas.

O exemplo a seguir mostra como criar e renderizar um LineGeometry. Conforme observado anteriormente, um objeto Geometry não pode desenhar a si próprio, então o exemplo usa uma forma Path para processar a linha. Como uma linha não tem nenhuma área, a propriedade Fill do Path não teria nenhum efeito; em vez disso, somente as propriedades Stroke e StrokeThickness são especificadas. A seguinte ilustração mostra a saída deste exemplo.

Um LineGeometry desenhada de (10,20) para (100,130)

Um LineGeometry

<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;

O exemplo a seguir mostra como criar e renderizar um EllipseGeometry. O exemplos conjunto sCenter da EllipseGeometry é conjunto até o ponto 50,50 e o RADIUS x e y-RADIUS forem conjunto para 50, que cria um círculo com um diâmetro de 100. O interior da elipse é pintado atribuindo um valor à propriedade Fill do elemento caminho, neste caso Gold. A seguinte ilustração mostra a saída deste exemplo.

Um EllipseGeometry desenhado em (50,50)

Um EllipseGeometry

<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;

O exemplo a seguir mostra como criar e renderizar um RectangleGeometry. A posição e as dimensões do retângulo são definidas por uma estrutura Rect. A posição é 50,50 e a altura e largura são ambos 25, o que cria um quadrado. A seguinte ilustração mostra a saída deste exemplo.

Um RectangleGeometry desenhado em 50,50

Um RectangleGeometry

<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;

O exemplo a seguir mostra como usar um EllipseGeometry como a região de corte de uma imagem. An Image objeto é definido com um Width de 200 e uma Height igual a 150. An EllipseGeometry com um RadiusX valor de 100, um RadiusY valor de 75 e um Center valor de 100,75 é definido o Clip propriedade da imagem. Somente a parte da imagem que estiver dentro da área da elipse será exibida. A seguinte ilustração mostra a saída deste exemplo.

Um EllipseGeometry usado para cortar um controle Image

Uma imagem com e sem recorte

<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;

Geometrias de Caminho

A classe PathGeometry e seu equivalente leve, a classe StreamGeometry fornecem os meios para descrever múltiplas figuras complexas compostas de arcos, curvas e linhas.

No coração de um PathGeometry está uma coleção de objetos PathFigure, assim chamado porque cada figura descreve uma forma discreta na PathGeometry. Cada PathFigure é composto de um ou mais objetos PathSegment, e cada um deles descreve um segmento da figura.

Há muitos tipos de segmentos.

Tipo de segmento	Descrição	Exemplo
ArcSegment	Cria um arco elíptico entre dois pontos.	Como: Criar um arco de elipse.
BezierSegment	Cria uma curva Bézier cúbica entre dois pontos.	Como: Criar uma curva cúbica de Bézier.
LineSegment	Cria uma linha entre dois pontos.	Como: Criar um LineSegment em um PathGeometry
PolyBezierSegment	Cria uma série de curvas Bézier cúbicas.	Consulte a página do tipo PolyBezierSegment.
PolyLineSegment	Cria uma série de linhas.	Consulte a página do tipo PolyLineSegment.
PolyQuadraticBezierSegment	Cria uma série de curvas Bézier quadráticas.	Consulte a página PolyQuadraticBezierSegment.
QuadraticBezierSegment	Cria uma curva Bézier quadrática.	Como: Criar uma curva Bézier quadrática..

Os segmentos em um PathFigure são combinados em uma única forma geométrica com o ponto final de cada segmento sendo o ponto inicial do segmento seguinte. A propriedade StartPoint de um PathFigure especifica o ponto do qual o primeiro segmento é desenhado. Cada segmento subsequente começa do ponto final do segmento anterior. Por exemplo, uma linha vertical de 10,50 para 10,150 pode ser definida atribuindo-se à propriedade StartPoint o valor 10,50 e criando-se um LineSegment com um parâmetro Point de 10,150.

O exemplo a seguir cria um simples PathGeometry composto de uma única PathFigure com um LineSegment e o exibe usando um elemento Path. O StartPoint do objeto PathFigure é definido como 10,20 e um LineSegment é definido com um ponto final de 100,130. A ilustração a seguir mostra a PathGeometry criado por esse exemplo.

Um PathGeometry que contém um único LineSegment

Um LineGeometry

<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;

Vale contrastar esse exemplo com o exemplo LineGeometry anterior. A sintaxe usada para um PathGeometry é muito mais verborrágica que aquela usada para uma simples LineGeometry, e pode fazer mais sentido usar a classe LineGeometry nesse caso, mas a sintaxe detalhada da PathGeometry abre espaço para regiões geométricas complexas e extremamente intrincadas.

Geometrias mais complexas podem ser criadas usando uma combinação de objetos PathSegment.

O exemplo a seguir usa uma BezierSegment, um LineSegment e um ArcSegment para criar formas. O exemplo cria uma curva é definindo quatro pontos de Bezier cúbico: um ponto inicial, que é o ponto participante do segmento anterior, um ponto participante (Point3) e controle de dois pontos (Point1 e Point2). Os dois pontos de controle de uma curva Bézier cúbica se comportam como magnetos, atraindo porções do que seria uma linha reta em direção a si mesmos, produzindo uma curva. O primeiro ponto de controle, Point1, afeta a parte inicial da curva; o segundo ponto de controle, Point2, afeta a parte final da curva.

O exemplo, em seguida, adiciona um LineSegment, que é desenhada entre o ponto de extremidade da BezierSegmentprecedente ao ponto especificado por sua propriedade LineSegment.

O exemplo, em seguida, adiciona um ArcSegment, que é desenhada a partir do ponto final do LineSegment precedente ao ponto especificado por sua propriedade Point. O exemplo também especifica os raios x e y do arco (Size), um ângulo de rotação (RotationAngle) , um sinalizador que indica o tamanho do ângulo do arco resultante (IsLargeArc) e um valor que indica em que direção o arco é desenhado (SweepDirection). A ilustração a seguir mostra a forma criada por esse exemplo.

Um 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;

Geometrias ainda mais complexas podem ser criadas usando múltiplos objetos PathFigure em um PathGeometry.

O exemplo a seguir cria um PathGeometry com dois objetos PathFigure, cada uma deles contendo múltiplos objetos PathSegment. O PathFigure do exemplo acima e uma PathFigure com um PolyLineSegment e um QuadraticBezierSegment são usados. Um PolyLineSegment é definido como um array de pontos e o QuadraticBezierSegment é definido com um ponto de controle e um ponto final. A ilustração a seguir mostra a forma criada por esse exemplo.

Um PathGeometry com múltiplas figuras

Um 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>

        <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

Como a classe PathGeometry, uma StreamGeometry define uma forma geométrica complexa que pode conter linhas, arcos e curvas. Ao contrário de um PathGeometry, o conteúdo de um StreamGeometry não têm suporte para associação de dados, animação ou modificação. Utilize um StreamGeometry quando você precisa descrever uma geometria complexa mas não quer o overhead de suportar ligação com dados, animação ou modificação. Por causa de sua eficiência, a classe StreamGeometry é uma boa opção para descrever adornos.

Para um exemplo, consulte Como: Create a Shape Using a StreamGeometry.

Sintaxe de Marcação de Caminho

Os tipos PathGeometry e StreamGeometry suportam uma sintaxe de atributo Extensible Application Markup Language (XAML) usando uma série especial de comandos mover e desenhar. Para obter mais informações, consulte Sintaxe de Marcação de Caminho.

Geometrias Compostas

Geometria composto de objetos podem ser criados usando um GeometryGroup, um CombinedGeometry, ou chamando o estático Geometry método Combine.

The CombinedGeometry objeto e o Combine executa uma operação booleana para agrupar a área definida por dois geometrias. Geometry objetos que não possuem nenhuma área são descartados. Apenas dois objetos Geometry podem ser combinados (embora essas duas geometrias também podem ser geometrias compostas).
A classe GeometryGroup cria uma junção dos objetos Geometry que ele contém sem combinar suas áreas. Qualquer número de objetos Geometry pode ser adicionado a um GeometryGroup. Para um exemplo, consulte Como: Create a Composite Shape.

Porque elas não executam uma operação de combinar, usar objetos GeometryGroup fornece benefícios de desempenho em relação a usar objetos CombinedGeometryou o método Combine.

Geometries Combinadas

A seção anterior mencionou que o objeto CombinedGeometry e o método Combine combinam a área definida pelas geometrias que eles contêm. A enumeração GeometryCombineMode especifica como as geometrias são combinadas. Os valores possíveis para o GeometryCombineMode propriedade são: Union, Intersect, Exclude, e Xor.

No exemplo a seguir, um CombinedGeometry é definido com um modo combinar de União. Ambos Geometry1 e o Geometry2 são definidos como círculos de mesmo raio, mas com centros deslocados 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>

Resultados do modo de combinação Union

No exemplo a seguir, um CombinedGeometry é definido com um modo combinado de Xor. Ambos Geometry1 e o Geometry2 são definidos como círculos de mesmo raio, mas com centros deslocados 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>

Resultados do modo de combinação Xor

Para exemplos adicionais, consulte Como: Create a Composite Shape e Como: Criar uma geometria combinada.

Características Freezable (Congeláveis)

Porque ele herda do Freezable classe, o Geometry classe fornecem vários recursos especiais: Geometry objetos podem ser declarados sistema autônomo Visão geral sobre Recursos, compartilhados entre vários objetos, feita somente leitura para melhorar o desempenho, clonada e fez thread-safe. Para mais informações sobre as diferentes características fornecidas por objetos Freezable, veja Visão geral sobre objetos Freezable.

Outros Recursos Geometry

A classe Geometry também fornece métodos utilitário úteis, como o seguinte:

GetArea - Obtém a área do Geometry.
FillContains - Determina se o Geometry contém outro Geometry.
StrokeContains - Determina se o traço de um Geometry contém um ponto específico.

Consulte a classe Geometry para obter uma lista completa de seus métodos.

Consulte também

Partilhar via