Como: Create a PathGeometry Animation for Text

Você pode converter texto formatado para um objeto PathGeometry e usar o objeto para realçar o texto. Por exemplo, você poderia aplicar uma animação ao objeto PathGeometry de forma que a animação siga o contorno do texto formatado.

O exemplo a seguir mostra texto formatado que foi convertido em um objeto PathGeometry. Uma elipse animado segue o contorno do texto renderizado.

Exemplo de um texto formatado renderizado como uma geometria com realce animado.

Observação:
Para obter o código completo exemplo de que os exemplos de código a seguir foram extraídos, consulte Texto usando o exemplo de animação PathGeometry.

Código de Exemplo Legado

O código de exemplo a seguir usa um objeto Path para exibir a geometria do texto formatado. O objeto Path pode desenhar formas fechadas ou abertas, múltiplas formas, e formas curvas. Uma Ellipse animada é criada e irá seguir o contorno do texto formatado.

<!-- Top-left starting point should be half the width of the ellipse so the text strokes align to the center of circle. -->
<Path 
  Canvas.Top="15" 
  Canvas.Left="15" 
  Stroke="SteelBlue"
  StrokeThickness="3" 
  Fill="LightSteelBlue" 
  Name="path" />

<Ellipse
  Canvas.Top="0" 
  Canvas.Left="0"
  Width="30"
  Height="30">

  <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
      <RadialGradientBrush.GradientStops>
        <GradientStop Color="Yellow" Offset="0.25" />
        <GradientStop Color="Transparent" Offset="1" />
      </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>
  </Ellipse.Fill>

  <Ellipse.RenderTransform>
    <MatrixTransform />
  </Ellipse.RenderTransform>
  <Ellipse.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard x:Name="storyboard">
          <MatrixAnimationUsingPath 
            x:Name="matrixAnimation"
            Duration="0:00:40"
            RepeatBehavior="Forever"
            Storyboard.TargetProperty="RenderTransform.Matrix" />
        </Storyboard>
      </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Ellipse.Triggers>
</Ellipse>

O exemplo de código a seguir mostra como criar um objeto PathGeometry. O objeto é atribuído à propriedade Data do objeto Path, que renderiza o texto formatado convertido como uma geometria. O objeto PathGeometry em seguida é atribuído à propriedade PathGeometry do objeto MatrixAnimationUsingPath, que fornece o caminho para a elipse animada seguir.

// Display the text string and animate the ellipse to trace the text character outlines.
public void DisplayText(string textToDisplay)
{
    // Create a formatted text string.
    FormattedText formattedText = new FormattedText(
        textToDisplay,
        CultureInfo.GetCultureInfo("en-us"),
        FlowDirection.LeftToRight,
        new Typeface("Verdana"),
        96,
        System.Windows.Media.Brushes.Black);

    // Set the font weight to Bold for the formatted text.
    formattedText.SetFontWeight(FontWeights.Bold);

    // Build a geometry out of the formatted text.
    Geometry geometry = formattedText.BuildGeometry(new System.Windows.Point(0, 0));

    // Create a set of polygons by flattening the Geometry object.
    PathGeometry pathGeometry = geometry.GetFlattenedPathGeometry();

    // Supply the empty Path element in XAML with the PathGeometry in order to render the polygons.
    path.Data = pathGeometry;

    // Use the PathGeometry for the matrix animation,
    // allowing the ellipse to follow the path of the polygons.
    matrixAnimation.PathGeometry = pathGeometry;
}

Consulte também

Conceitos

Drawing Formatted Text