방법: 텍스트에 대한 PathGeometry 애니메이션 만들기

서식 있는 텍스트를 PathGeometry 개체로 변환하고 이 개체를 사용하여 텍스트를 강조 표시할 수 있습니다. 예를 들어 애니메이션이 서식 있는 텍스트의 윤곽선을 따라 표시되도록 PathGeometry 개체에 애니메이션을 적용할 수 있습니다.

다음 예제에서는 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;
}

참고 항목

개념

서식 있는 텍스트 그리기