Menu
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
989
The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute.
A path is defined in SVG using the 'path' element. The basic shapes are all described in terms of what their equivalent path is, which is what their shape is as a path. (The equivalent path of a 'path' element is simply the path itself.)
How To Use: 1 Select an image from your computer by clicking the green "ADD IMAGE" button or dragging the image into the dashed square. 2 Click the green "TRACE" button to trace the image. 3 Right click on the newly displayed SVG file and select "Save As..." to download it to your computer. More ...
« PreviousNext ». The <path> element is the most powerful element in the SVG library of basic shapes. You can use it to create lines, curves, arcs and more. Paths create complex shapes by combining multiple straight lines or curved lines.
Create a SVG file & trace any image using Inkscape 1 Find the ideal picture: This is the key to get a good result, so I’ll give you some tips; You can search in: Pixabay, unsplash, google image; This last ... 2 Download and install inkscape: If you don’t have this software, then download HERE. ... 3 How do you vectorize an image? ... More items...
Open textSVG.htm in Chrome web browser. You can use Chrome/Firefox/Opera to view SVG image directly without any plugin. Internet Explorer 9 and higher also supports SVG image rendering. Path #1: Without opacity.
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.
105
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
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
