方法 : テキストの PathGeometry アニメーションを作成する

書式設定されたテキストを PathGeometry オブジェクトに変換し、そのオブジェクトをテキストの強調表示に使用できます。 たとえば、PathGeometry オブジェクトに 1 つのアニメーションを適用することができ、これによりアニメーションは書式設定されたテキストのアウトラインに従うようになります。

次の例は、PathGeometry オブジェクトに変換された書式付きテキストを示しています。 アニメーション化された楕円は、レンダリングされたテキストのアウトラインまたはストロークに従います。

書式設定されたテキストをアニメーション化した強調表示を使用したジオメトリとしてレンダリングした例

レガシ コードの例

Path オブジェクトを使用して書式設定されたテキストのジオメトリを表示するコード例を次に示します。 Path オブジェクトにより、閉じた図形または開いた図形、複数の図形、および曲線を含む図形を描画できます。 書式設定されたテキストのアウトラインまたはストロークに従う、アニメーション化された Ellipse が作成されます。

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

PathGeometry オブジェクトを作成する方法を次のコード例に示します。 オブジェクトは、変換済みの初期設定されたテキストをジオメトリとしてレンダリングする Path オブジェクトの Data プロパティに割り当てられます。 次に PathGeometry オブジェクトは、アニメーション化された楕円が従うパスを提供する MatrixAnimationUsingPath オブジェクトの PathGeometry プロパティに割り当てられます。

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

参照

概念

書式設定されたテキストの描画