0

My goal is to make a non-latin based letter tracing application for mobile platforms. I have converted some of the characters to SVG files and have a single path but can't find an easy way to fill the path with consecutive buttons in order to guide the user through the drawing. So, my thought was to create buttons and listen for ondown and force the user to follow the buttons on the path.

Alternatively, I could break up the path into many small paths and listen on each one. My problem is that I don't know how to break up an SVG path into many small paths. Something like this code would work if I could break up the character path into many small consecutive paths.

Fiddle

Harry
  • 3,031
  • 7
  • 42
  • 67
MCain
  • 465
  • 2
  • 12
  • 1
    I have an answer for you, yet I am very busy at work right now. The math is no too difficult, and the code will not be too extensive. I plan on writing you a fiddle for this, but it will take some time. And yes, sub-paths are the way to go. – WebWanderer Aug 07 '14 at 18:23

1 Answers1

1

Sub-paths sounds to me like the best solution, but breaking a path into subpaths is problematic to do in code, since it's difficult to split Bezier curves. That would require a solid background in math and involves a lot of calculations.

An other aspect is user experience (length of each sub-path, is it easy to trace or need to be a little longer to be more user-friendly, ...)

My proposition is to provide pre-split paths, use some tool(Inkscape, Adobe Illustrator,...) to split letters into sub-paths that you judge convenient.

Now you can use the Fiddle that you provided to listen to mouseover events on sub-paths.

Edit:

I was experimenting and I managed to fill the path with circles so you can trace the path, without splitting. Here is an example, you could build on this to find a final solution.

Community
  • 1
  • 1
Issam Zoli
  • 2,724
  • 1
  • 21
  • 35
  • I need to automate this because I'm looking at 300+ letters. – MCain Aug 04 '14 at 23:53
  • For automation there are Illustrator scripts, you can write them in AppleScript, JavaScript, ExtendScript or VBScript. Here is the official doc http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/pdf/illustrator/scripting/cs6/Illustrator-Scripting-Guide.pdf – Issam Zoli Aug 05 '14 at 18:16