8

I'm currently working on an app that will teach users how to write a foreign character(Character Tracing/Alphabet Tracing) such as Kanji, Hangul, Arabic and etc. I made the characters through Adobe Illustrator and imported it as XML file in Android. The SVG will then serves as a guide to trace its stroke and detect the user gesture, the user should follow the stroke and then it should be filled once it is done correctly else it should display the stroke what user should trace first.

Please see the sample image below: The red line below is my gesture while the green line shows the correct way of tracing the character before proceeding to the other strokes.

Does anyone here has already experienced working with this kind of projects? Is it possible to do it using native android gesture detection? Thanks in advance

Disclaimer: The screenshot below is from the app Japanese Kanji Study, developed by Chase Colburn enter image description here

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
vidalbenjoe
  • 921
  • 13
  • 37
  • 4
    so SVG (vector) as source for the character's shape is probably OK, but users' drawing will most likely has to be "canvas" (html5's canvas element) as you want them to perform per pixel drawing I guess. Then you need to do check if drawn line is within the boundaries of the original etc. So I think its possible, not sure what is the best way though. Question - why would you need "gestures' here? seems like you need standard "dragging" with 1 touch point here? – Sergey Rudenko Aug 06 '18 at 16:04
  • I really appreciate your idea, sir, I just really don't have an idea if it is possible to detect what's user currently tracing through its gesture. Anyway thank you sir – vidalbenjoe Aug 07 '18 at 12:32

2 Answers2

3

If I were you, I probably wouldn't use SVG <path> elements. I would use a sequence (array) of points (ie the equivalent of an SVG <polyline>). The points should be close enough together that they look like a smooth line when drawn. Or you could apply some smoothing when you render them.

The advantage of the points array is that it is much easier to find the closest point to your touch location, than it is to find the closest point on an arbitrary <path>. And when you are "tracing" with the finger, you just need to draw a line through all the points up to the one closest to your touch location.

Obviously for most characters you would actually have two or more point arrays. But you would just work with each array in sequence.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
1

Actually just take a look html and get some ideas. In html you can give coordinate area inside a image map and make it clickable. This following link elaborated what i am trying to say.

So after giving area, you can make order like 1 area 2 area ... n area. After that you gonna need first area clickable just give a flag, if there flag = true, then change background color when it is touched. When first area touched you make following area flag to true. It is all up to you. One of the solution. But main thing is in xml you can create MappedImage with co-ordinates

Daniyar Kayirbolatov
  • 163
  • 1
  • 7