65.9K
CodeProject 正在变化。 阅读更多。
Home

WPF 中的路径文本

lneir
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.81/5 (28投票s)

2008年10月13日

CPOL

2分钟阅读

viewsIcon

130729

downloadIcon

4305

一个将在指定几何图形上显示文本字符串的控件

引言

目前，使用 Windows Presentation Foundation (WPF)，显示跟随任何给定几何图形路径的文本字符串并不容易。WPF 的 TextEffects 提供了对单个字符的转换，但尝试使用此功能让文本跟随任意几何图形需要一些额外的工作。此外，TextEffects 在 Silverlight 中不可用。使用此处提供的控件，可以将给定的文本字符串显示在任何 2D WPF 几何图形上。例如，该控件可以在 EllipseGeometry 上显示文本。

ellipse.PNG

提供了示例应用程序和源代码。

背景

要在路径上显示文本，必须解决的基本问题是弄清楚如何转换和旋转字符串的每个字符以使其适合指定的几何图形。解决这个问题的一个很大帮助是 Geometry 基类提供的 GetFlattenedPathGeometry() 方法。此方法返回一个 PathGeometry，它通过一系列直线（PolyLineSegment 和 LineSegment）来近似几何图形。例如，下面的红线描绘了路径几何图形（黑色）的扁平路径。

flattenedpath.PNG

有关 WPF 几何图形类的良好概述，请参见 MSDN。

问题的下一步是获取扁平路径几何图形，并弄清楚如何转换 string 的字符以跟随扁平路径。下图描述了必须计算的角度，以便字母“A”将跟随扁平路径。在 TextOnAPath 中，GeometryHelper 类中的方法“GetIntersectionPoints”计算字符与路径相交的扁平路径上的点。知道交点后，就可以计算角度（和转换）值。

flattenedpathWithText.PNG

Using the Code

TextOnAPath 控件的使用方式与 WPF 中的任何普通 UIElement 相同。下面的 XAML 将沿弯曲路径显示文本 string，并在网格中居中。

<Window x:Class="TextOnAPathTestApp.Window1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:TextOnAPath="clr-namespace:TextOnAPath;assembly=TextOnAPath"
    Title="Test App" Height="500" Width="500">
    <Grid>
    <TextOnAPath:TextOnAPath FontSize="30" DrawPath="True" 
        Text="The quick brown fox jumped over the lazy hen.">
            <TextOnAPath:TextOnAPath.TextPath>
                <PathGeometry Figures="M0,0 C120,361 230.5,276.5 230.5,276.5 
                      L308.5,237.50001 C308.5,237.50001 419.5,179.5002 367.5,265.49993 
                      315.5,351.49966 238.50028,399.49924 238.50028,399.49924 L61.500017,
                      420.49911"/>
            </TextOnAPath:TextOnAPath.TextPath>
        </TextOnAPath:TextOnAPath>
    </Grid>
</Window>

ExampleWindow.PNG

TextOnAPath 控件的参数

  • Text (string): 要显示的 string 。如果 text string 比 geometry 路径长，则 text 将被截断。
  • TextPath (Geometry): 要跟随的 text 的 geometry 。
  • DrawPath (Boolean): 如果 true，则在 text string 下绘制 geometry。
  • DrawLinePath (Boolean): 如果 true，则在 text string 下绘制扁平路径 geometry。
  • ScaleTextPath (Boolean): 如果 true，则 geometry 将被缩放到适合控件的大小。

关注点

历史

  • 2008 年 10 月 13 日
    • 初次发布
  • 2008 年 10 月 29 日
    • 更新以修复绘制 geometry 的代码
    • 提供了代码的 Silverlight 版本的链接
© . All rights reserved.