Procedura: creare animazioni PathGeometry per il testo

Aggiornamento: novembre 2007

È possibile convertire il testo formattato in un oggetto PathGeometry e utilizzarlo per evidenziare il testo. È ad esempio possibile applicare un'animazione all'oggetto PathGeometry affinché l'animazione segua la struttura del testo formattato.

Nell'esempio riportato di seguito viene illustrato del testo formattato convertito in un oggetto PathGeometry. Un'ellisse animata segue la struttura, o i tratti, del testo dopo l'esecuzione del rendering.

Esempio di testo formattato di cui è stato eseguito il rendering come una geometria con evidenziazione animata

Nota

Per l'esempio di codice completo dal quale sono stati estratti gli esempi di codice riportati di seguito, vedere Esempio di testo con animazione PathGeometry.

Codice di esempio precedente

Nell'esempio di codice riportato di seguito viene utilizzato un oggetto Path per visualizzare la geometrica del testo formattato. Tramite l'oggetto Path è possibile disegnare forme chiuse o aperte, forme multiple, nonché curve. Viene creata un oggetto Ellipse animato che seguirà la struttura, o i tratti, del testo formattato.

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

Nell'esempio riportato di seguito viene illustrato come creare un oggetto PathGeometry. L'oggetto viene assegnato alla proprietà Data di un oggetto Path che esegue il rendering del testo formattato convertito come geometria. L'oggetto PathGeometry viene quindi assegnato alla proprietà PathGeometry di un oggetto MatrixAnimationUsingPath che fornisce il percorso che dovrà essere seguito dall'ellisse animata.

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

Vedere anche

Concetti

Disegno di testo formattato