Comment : créer une animation PathGeometry pour du texte

Mise à jour : novembre 2007

Vous pouvez convertir le texte mis en forme en objet PathGeometry et utiliser l'objet pour mettre le texte en surbrillance. Par exemple, vous pourriez appliquer une animation à l'objet PathGeometry afin que l'animation suive le plan du texte mis en forme.

L'exemple suivant affiche le texte mis en forme qui a été converti en objet PathGeometry. Une ellipse animée suit le plan, ou traits, du texte rendu.

Exemple de texte mis en forme restitué comme une géométrie avec une surbrillance animée

Remarque :
Pour obtenir l'exemple de code complet dont ont été extraits les exemples suivants, consultez Texte utilisant l'animation PathGeometry, exemple.

Exemple de code hérité (legacy)

L'exemple de code suivant utilise un objet Path pour afficher la géométrie du texte mis en forme. L'objet Path peut dessiner des formes fermées ou ouvertes, multiples et courbées. Une Ellipse animée qui va suivre le plan, ou traits du texte mis en forme est créée.

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

L'exemple de code suivant montre comment créer un objet PathGeometry. L'objet est attribué à la propriété Data d'un objet Path, qui restitue le texte mis en forme converti comme une géométrie. L'objet PathGeometry est ensuite attribué à la propriété PathGeometry d'un objet MatrixAnimationUsingPath, qui fournit le chemin d'accès à suivre pour l'ellipse animée.

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

Voir aussi

Concepts

Dessin du texte mis en forme