Pattern tracing app for Windows store

Question

I'm currently working on an educational Windows store app in which the user will be able to trace over letters (eg, A, B, C, but not limited to English) to learn the basics of writing.

How can I detect input and then compare it to an image mask of a letter using C# and XAML?

Answer 1

To do this you will need to have some way to rasterize your text that you want the user to trace over. Then, in order to provide feedback on whether they traced it correctly you'll need to continuously listen for the draw event and compare the input to what they should be drawing.

Basically, if a user draws a certain path or set of paths on a canvas, you'll want to be able to provide instant feedback on if they got it right yet. To give you some direction for this, I recommend you read this answer on SO , which roughly describes how to capture input and draw it on a canvas.

From there you should be thinking in terms of matching the user's input to an image of the letter they're supposed to be drawing. This requires some amount of image matching. To get you started, I recommend reading through all the answers to this post on SO .

---

Since you seem to be lacking direction in general, here's an idea of how your program could be structured:

1. Load the current letter to be drawn, and make sure to perform the appropriate calculations to pre-determine as much as possible for comparing to the input. Based on the second link above, this means you should call GetPixel for the letter to be drawn before the user is allowed to start tracing it (also note that you may want to downscale the image for better performance). You will also need to decide what your match threshold will be. Try starting with something like 70%.

2. Capture the user's input on a canvas, as explained in the first link. You'll probably want to adjust the brush width, but that post is a great start.

3. In the MouseMove event, you will also want to occasionally check to see how well it matches with the letter they're supposed to be drawing.

4. Once the user's input is within your match threshold, move on to the next letter. You may want to consider providing them with how well they did, based on the match percentage.

---

Experiment with values such as the brush width, image resolution, and how often you compare the input to the letter. Also try to do as much of the image processing as you can while displaying a 'loading' prompt when moving to the next letter to be drawn.