Comment : créer une animation PathGeometry pour du texte

Vous pouvez convertir le texte mis en forme en objet PathGeometry et utiliser l'objet pour mettre le texte en surbrillance. Par exemple, vous pouvez appliquer une animation à l'objet PathGeometry afin qu'elle 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 rendu sous la forme d'une géométrie avec une surbrillance animée

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

Voir aussi

Concepts

Dessin du texte mis en forme