Gewusst wie: Erstellen einer PathGeometry-Animation für Text

Aktualisiert: November 2007

Sie können formatierten Text in ein PathGeometry-Objekt konvertieren und das Objekt zum Hervorheben des Texts verwenden. Sie können z. B. eine Animation auf das PathGeometry-Objekt anwenden, sodass die Animation der Kontur des formatierten Texts folgt.

Im folgenden Beispiel wird formatierter Text angezeigt, der in ein PathGeometry-Objekt konvertiert wurde. Eine animierte Ellipse folgt der Kontur, bzw. den Strichen, des gerenderten Texts.

Beispiel für formatierten Text, der als Geometrie mit einer animierten Hervorhebung gerendert wird

Tipp

Das vollständige Codebeispiel, aus dem die folgenden Codebeispiele stammen, finden Sie unter Beispiel für Text mit einer PathGeometry-Animation.

Legacycodebeispiel

Im folgenden Codebeispiel wird mit einem Path-Objekt die Geometrie des formatierten Texts angezeigt. Das Path-Objekt kann geschlossene oder offene Formen, mehrere Formen und gekrümmte Formen zeichnen. Es wird eine animierte Ellipse erstellt, die der Kontur, bzw. den Strichen, des formatierten Texts folgt.

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

Im folgenden Codebeispiel wird das Erstellen eines PathGeometry-Objekts veranschaulicht. Das Objekt wird der Data-Eigenschaft eines Path-Objekts zugeordnet, das den konvertierten formatierten Text als Geometrie rendert. Dann wird das PathGeometry-Objekt der PathGeometry-Eigenschaft eines MatrixAnimationUsingPath-Objekts zugeordnet, das den Pfad, dem die animierte Ellipse folgen soll, bereitstellt.

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

Siehe auch

Konzepte

Zeichnen von formatiertem Text