Cómo: Crear una animación de PathGeometry para texto

Puede convertir el texto con formato en un objeto PathGeometry y utiliza el objeto para resaltar el texto. Por ejemplo, puede aplicar una animación al objeto PathGeometry para que la animación siga el contorno del texto con formato.

En el ejemplo siguiente se muestra texto con formato convertido en un objeto PathGeometry. Una elipse animada sigue el contorno, o los trazos, del texto representado.

Ejemplo de texto con formato presentado como una geometría con un resaltado animado

Ejemplo de código heredado

En el ejemplo de código siguiente se utiliza un objeto Path para mostrar la geometría del texto con formato. El objeto Path puede dibujar formas cerradas o abiertas, varias formas y formas curvas. Se crea un objeto Ellipse animado se crea que seguirá el contorno, o los trazos, del texto con formato.

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

En el ejemplo de código siguiente se muestra cómo se crea un objeto PathGeometry. El se asigna a la propiedad Data de un objeto Path, que representa el texto con formato convertido en una geometría. A continuación, el objeto PathGeometry se asigna a la propiedad PathGeometry de un objeto MatrixAnimationUsingPath, que proporciona el trazado que debe seguir la elipse animada.

        ' Display the text string and animate the ellipse to trace the text character outlines.
        Public Sub DisplayText(ByVal textToDisplay As String)
            ' Create a formatted text string.
            Dim formattedText As 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.
            Dim geometry As Geometry = formattedText.BuildGeometry(New System.Windows.Point(0, 0))

            ' Create a set of polygons by flattening the Geometry object.
            Dim pathGeometry As 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
        End Sub

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

Vea también

Conceptos

Dibujar texto con formato