MSDN Magazine - December 2008 - (Page 101)

ChARles PeTzOlD Foundations Render Text On A Path With WPF Text is more than just its literal meaning. tion of segments. The first segment begins at Whether printed or displayed on a computthe StartPoint, and each successive segment er screen, the choice of font can enhance or continues where the last one left off. These detract from the impact of the text. Text can segments are all derivatives of the abstract be made inviting or forbidding, soothing or PathSegment class: LineSegment, PolyLineFigure 1 Text on a Curved Path stormy. Computer graphics can also release Segment, BezierSegment, PolyBezierSegtext from the confines of its customary line-by-line progression. ment, QuadraticBezierSegment, PolyQuadraticBezierSegment, By treating text characters as graphical objects, the programmer and ArcSegment. In other words, a PathFigure is a connected series can make text dance and fly on the screen. of straight lines, Bezier curves, quadratic Bezier curves, and arcs, One desirable technique is positioning text characters along a which are curves on the circumference of an ellipse. curved line, as shown in Figure 1. In graphics programming, a colA PathFigure has a geometric length. In the source code that lection of straight lines and curves is called a “path,” so this task is accompanies this column, I refer to this length with the variable sometimes described as “text on a path,” and that’s what I’ll tackle pathLength. If the PathFigure consists solely of LineSegment and in this column. PolyLineSegment objects, calculating the length is trivial: simply When programming for Windows Presentation Foundation use the Pythagorean Theorem to calculate the length of each line (WPF), a significant bonus accompanies the programming of text and accumulate them. But an ArcSegment requires more complex on a path: you can animate the individual points defining the path math, and calculating the length of a Bezier curve is a positively and watch the characters bounce around in response. frightening job. As usual in WPF, there is more than one way to do this job, and To simplify the calculation of the PathFigure length, it’s conveI’ll demonstrate several approaches. As is also common in WPF, nient to convert the path to a collection of polylines that approxithe difficult part of the job turns out to be something other than mate the curves. This is called flattening the path. It’s then easy to what might originally be assumed. In putting text on a path, the calculate the length with repeated application of the Pythagorean big problem really isn’t figuring out how to move and rotate the Theorem. WPF even makes knowledge of the Pythagorean Theotext characters. That’s relatively straightforward. The hard part is rem unnecessary: subtracting one point from another results in a properly informing the WPF layout system of the correct size of Vector object, and the Vector object contains a Length property the resultant graphic. that returns the length between the two points. The PathFigure class contains a method named GetFlattenedUniting Paths and Text PathFigure that returns another PathFigure containing only A graphics path is a collection of straight lines and curves. Some LineSegment and PolyLineSegment objects. And this is ideal for of these lines and curves might be connected to each other. Some calculating the length of the entire PathFigure. might form enclosed areas. In WPF, the graphics path is encapsulated A text string rendered with a particular font and font size also in both the PathGeometry and StreamGeometry classes. Stream- has a geometric size. If you use the popular TextBlock element to Geometry offers better performance, but the individual points that display text, the width of the displayed text is available from the define the path become fixed and cannot be animated. ActualWidth property. During the layout process prior to the acIn placing text on a path, it’s pretty much essential that the lines tual display, ActualWidth might not be set yet, but TextBlock will and curves comprising the path be connected end to end with each set its DesiredSize property to the size of the text. other. You probably don’t want to deal with a text string jumping TextBlock uses the FormattedText object for calculating the size of across a disconnection in the path. For this reason, the WPF class its text, and this class is also available to the application programmer. I’m really interested in is PathFigure, which is a single collection of connected straight lines and curves. A PathGeometry is a colSend your questions and comments to mmnet30@microsoft.com. lection of one or more PathFigure objects. Code download: code.msdn.microsoft.com/mag200812Foundations. The PathFigure itself defines a StartPoint and contains a collecDecember 2008 101 http://code.msdn.microsoft.com/mag200812Foundations

Table of Contents Feed for the Digital Edition of MSDN Magazine - December 2008

MSDN Magazine - December 2008 Contents Toolbox CLR Inside Out Advanced Basics Cutting Edge Patterns In Practice Team System Real-World WF Visual Studio OBA Tools SOA Data Access Geneva Framework Test Run Foundations Windows With C++ Going Places End Bracket

MSDN Magazine - December 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.