Text that follows / clips to a shape?

Question

Ok, so I know how to clip text to a particular geometry, however the text doesn't automatically wrap based on the clip so how does one go about achieving an effect similar to the one shown below, given that you have the "tick" as a geometry / path?

Is it a case of manually adding text boxes that fit for each line and then splitting the text based on what will / will not fit?

Wexler

Answer 1

The only way I can think of to do this would be to create a custom control and override OnRender. This custom control would have a Geometry defining its clip area and a "Text" property of type string. It would also have a lineheight property of type int.

In OnRender you could measure the text about to be drawn at the current X,Y location (starting at top left of the clip geometry. Measure this text one word at a time and see if the bounding box of the word is entirely within the clip geometry. This is possible using the HitTest API of Geometry, and testing that all four points of the bounding rect of the word are within the geometry. If so, draw that word, if not, increment X by one letter spacing and measure again. If you reach the edge of the control, reset X to zero and increment Y by one line space and repeat, using a Scanline approach similar to how TV draws its pixels.

Basically what you are trying to do is create your own WrapPanel or TextBlock with text wrapping. If you can I would invoke Reflector or ILSpy on the WPF Framework to see the code within WrapPanel / TextBlock, or search for articles on "Coding a custom WrapPanel" / "TextBlock" / "RichTextControl" with text wrapping. Its not an easy task by any stretch of the imagination but the above method will give you the bare bones of what you require.

Best regards,

Phyfe

Thanks, that definitely gives me some pointers in the right direction, I'm also wondering if I could use any of the techniques used in: msdn.microsoft.com/en-us/magazine/dd263097.aspx to help with this, although I'm not sure it's particularly useful in this case. – Wexler

That looks interesting! I think what he's doing there is using RenderTransforms (scale, rotate, translate) to position each letter of text to a path? Its not a vanilla WPF feature. Perhaps what you could take from this is how to get the coordinates of the path defining your clip region and ensure text is drawn within it? – Phyfe