Silverlight 中的路径文本

• 下载源代码 - 192 KB

引言

目前，Silverlight没有内置功能来显示沿着给定几何图形路径的文本字符串（见下图）。类似地，Windows Presentation Foundation也没有这样的功能，但WPF提供了一些辅助方法（例如，路径扁平化），这提供了一个很好的起点。我写了一篇文章，提供WPF的路径文本。本文将WPF的路径文本类移植到Silverlight。

背景

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

目前，Silverlight 2没有这样的路径扁平化方法！ Charles Petzold在他的文章中开发了一种路径扁平化方法，并允许重用该代码。该代码包含在“PathGeometryHelper”项目中。Charles的方法是为WPF编写的，因此需要将其移植到Silverlight。在将此代码移植到Silverlight时，发现缺少更多功能。即，Silverlight缺少Matrix类中的某些方法。此外，Silverlight没有Vector类。“MatrixMathHelpers”项目中提供了这些类（以及其他一些类）的等效功能。

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

使用代码

在附加的解决方案中，TextOnAPath控件有两个项目，一个用于Silverlight（TextOnAPathSilverlight），另一个用于WPF（TextOnAPathWPF）。Silverlight版本中的源代码链接到WPF版本。这样，控件的两个版本共享一个公共代码库。编译器指令'#if SILVERLIGHT'用于表示代码差异。请注意，XAML未在两个控件之间链接，因为目前XAML中没有等效于'#if'编译器指令的内容。

TextOnAPath的Silverlight版本（如WPF版本）的使用方式与任何普通UIElement一样。下面的XAML将沿着网格中居中的弯曲路径显示文本字符串。请注意，路径是使用“MyPath”字符串变量通过迷你语言定义的（有关路径迷你语言的更多信息，请参阅此文章）。目前，Silverlight没有内置功能将此迷你语言字符串转换为PathGeometry，但幸运的是，此文章中提供了一个转换器。该代码包含在“PathConverter”项目中。使用绑定转换器，TextPath属性能够从String值获取所需的PathGeometry值。

<UserControl x:Class="TextOnAPathTestAppSilverlight.PageTest"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:core="clr-namespace:System;assembly=mscorlib"
   xmlns:PathConverter="clr-namespace:PathConverter;
       assembly=PathConverter"
   xmlns:TextOnAPath="clr-namespace:TextOnAPath;
       assembly=TextOnAPathSilverlight"
   Width="500" Height="500">

 <Grid>
   <Grid.Resources>

     <core:String x:Key="MyPath">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</core:String>

     <PathConverter:StringToPathGeometryConverter 
         x:Key="MyPathConverter"/>

   </Grid.Resources>

   <TextOnAPath:TextOnAPath TextPath="{Binding 
     Source={StaticResource MyPath}, 
     Converter={StaticResource MyPathConverter}}" 
     FontSize="25" DrawLinePath="True" 
     Text="The quick brown fox jumped over the lazy dog."/>
 
 </Grid>

</UserControl>

TextOnAPath控件的参数

• Text (string)：要显示的字符串。如果Text字符串比几何路径长，则文本将被截断。
• TextPath (Geometry)：文本遵循的几何图形。
• DrawPath (Boolean)（仅在WPF版本中）：如果true，则在文本字符串下方绘制几何图形。
• DrawLinePath (Boolean)：如果true，则在文本字符串下方绘制扁平化路径几何图形。
• ScaleTextPath (Boolean)：如果true，几何图形将被缩放以适应控件的大小。

关注点

• 需要对代码进行额外的优化以提高性能。
• 其他类似工作。