Android - Tracking Real-Time Touch Events to Draw

Question

I need your help.

I am trying to implement a paint system with live-tracking, you may think: “Live-tracking? What do you mean?”

So I am implementing a solution to track each touch movement on the display, so I can decide, if I want to paint on a specific spot or not, this decision must be in real-time, right when the user touches the display.

There will be some images where the user should paint the inner white space inside of the respective shape; figure 1 shows an example of this shape.

The user should paint the inside of the shape in a specific direction/order; I still don’t know how I can configure this order/direction in the image. An example of a specific order would be like the one showing on figure 2.

So I want the user to paint starting from the zone 1 to the zone 6, do you understand? I don’t want the user to be able to paint the zone 1 and then zone 3, without painting the zone 2 first…

In the end, I would have the shape filled, like the figure 3 shows. The arrows are there just to show the right direction of drawing.

It’s not just about direction, the specific spots on the image matter, there will be different types of images, and I can’t use only the direction.

How can I determine the specific spots in an image with a specific order to be painted?

The only idea that came to my mind, would be some kind of training mode, where I (the developer) would draw the image with the order I want, and the system behind would create virtual points on the code, with a small distance between each of them. Then I would have an array with all the “spots” saved with the order I draw them, do you understand?

I don’t know if this will work, and if it will be fast enough to travel my array of “spots” when the user is trying to draw on the image? Because I want this to work on real-time, the system should check if it’s a valid spot to draw right when the user touches the display…

Do you think it will work? Do you have some recommendations about this? What are the best structures and stuff like that? I am not asking for written code, I just need some guidelines.

I think I explained my problem well, if you have any question please ask me.

Thank you very much in advance!

Answer 1

if all your shapes are lines you can treat the points you want your users to "touch" as squares, every time an ACTION_MOVE event is happening, check if the finger is touching the next point. You can make the size of the squares whatever suits you, like 48dp or 92dp or the width/height of the shape you are drawing.

You said you don't want any code so I assume you know how to do this (if not reply and I will post code too).

Also you didn't mention what happens if the user goes out of the shape, if you want the user to continue drawing until they lift their finger then this way is good, when the ACTION_UP event happens check if the last point is touched (assuming it can only be touched if all others are touched like explained above).

Here is an image if you'd like to have a visual guide:

Obviously if you it this way you have to calculate the positions of each point you will have, I doubt there is any way to automate this.

If you need any more help or you need some code please reply and I will post some! :D