Monday, April 27, 2009

WPF Text to Animated Path

Not sure what to call this - slate control? Or Text Scribbler? May be, or perhaps just "text to animated path control" :). Anyway, I was playing around with the possibility of animating text in such a way that you can see the text being written as though with a pen or a piece of chalk. This is the end result...

You can get the source here. Just run the application, enter any text in the TextBox, and hit the button to see the text being scribbled down in an animated fashion. You can also choose the Font Family, and the Foreground of the text from the combo boxes.

This is what the application does when the button is clicked:
1) The text from the TextBox is converted into a PathGeometry using the FormattedText class (System.Windows.Media namespace). You can specify the Font Family, Font Size etc. and get the corresponding path.

2) A MatrixAnimationUsingPath is applied on the pen (the red color object in the screen shot above). The PathGeometry property of this animation is set to the value obtained from Step 1).

3) At this point, the pen will animate over the path, but nothing will be scribbled down. While the pen is being animated, a timer runs concurrently with an interval in milliseconds. Whenever the timer ticks, the current position of the pen is calculated, and a small dot (ellipse) is drawn at that point. This gives you the illusion of text being continuously written down with the pen.

That's it! Enjoy scribbling!

(Note: The sample supports multi-line scribbling as well. To test this out, just set AcceptsReturn to true on the TextBox (you may also need to set IsDefault to False on the Start Button so that it does not interfere with the return key meant for the TextBox). Now if you enter multiple lines within the TextBox and start scribbling, you get multi-line scribbling !)

Source: Get it here.


Vikas Bhandari said...

why you guys post of file hosting sites, when the sites like Codeplex and CodeProject is available. Most of the offices, the file hosting sites are blocked so I cannot download it now.



Anonymous said...

Querido amigo solo queria darte las gracias por que apartir de tu ejemplo a podido crear un objeto y darle una ruta y animarlo en RunTime. Gracias

Anonymous said...

I am new at WPF. Can someone explain to me the binding shown below

I am guessing the source of the binding is to the data key which is an observable collection of integers.

If it is how is the TextBlock above get getting text?

Anonymous said...

The binding code was covered up some how. Below the code used for binding.

Rectangle Fill="MediumBlue" Width="50" Height="{Binding}"

TextBlock Text="{Binding}" VerticalAlignment="Top" HorizontalAlignment="Center"