Question

I Have Some static images like below:

Now, I want is, when i touch on the face or hand, then the selected color should be fill on that skin portion.

See below image of result:

So how to get the result like above ??
Redo and Undo Functionality Should be also there.

I have try with the FloodFill color but doing that i can only able to do color in to the perticular portion. as FloodFill only fill the color till the same pixwl color comes. If the touch place pixel color get change the it will not fill color on it.

So Usinf FloodFill i got the result like below image, If i press on the hand, then only hand portion will fill with color, instead of it i want to fill color to the other hand and face also.

So Please help me in this case.

EDITED

After some reply i got the solution like this one.

But still there is a memory issue. It consume lots of memory to draw the color. So please can anyone help me for it ?

Answer 1

You can have a complete image colored the actual way and when you fill a certain region with a color, it will replace all the regions that is specified by that color to be filled in.

Layman’s terms:

1. User will click on the hand of the OUTLINE
2. That click location will be checked with another image with perfectly color coded regions. Lets call it a MASK for this case. All the skin regions will have the same color. The shirt areas will be another color.
3. Wherever the user clicks, the selected color by the user will be applied to every pixel that has that similar color in the MASK, but instead of painting directly on the MASK, you paint onto the pixels of the the OUTLINE.

I hope this helps.

Feel free to comment if you want an example and then I can update the answer with that, but I think you can get it from here.

EDIT:

Basically start off with a simple image like this. This we can call as OUTLINE

Then as the developer, you have to do some work. Here, you color code the OUTLINE. The result we call a MASK. To make this we, color code the regions with the same color that you want. This can be done on paint or whatever. I used Photoshop to be cool lol :D.

Then there is the ALGORITHM to get it working on the phone. Before you read the code, look at this variable.

int ANTILAISING_TOLERANCE = 70; //Larger better coloring, reduced sensing

If you zoom up on the image specifically noting the black regions of the border, you can actually see that sometimes, the computer blends the colors a little bit. In order to account for that change, we use this tolerance value.

COLORINGANDROIDACTIVITY.JAVA

package mk.coloring;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.view.View.OnTouchListener;

public class ColoringAndroidActivity extends Activity implements OnTouchListener{
    /** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    findViewById(R.id.imageView1).setOnTouchListener(this);
}

int ANTILAISING_TOLERANCE = 70;
public boolean onTouch(View arg0, MotionEvent arg1) {
    Bitmap mask = BitmapFactory.decodeResource(getResources(), R.drawable.mask);
    int selectedColor = mask.getPixel((int)arg1.getX(),(int)arg1.getY());           
    int sG = (selectedColor & 0x0000FF00) >> 8;
    int sR = (selectedColor & 0x00FF0000) >> 16;
    int sB = (selectedColor & 0x000000FF);

    Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.empty);       
    Bitmap colored = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
    Canvas cv = new Canvas(colored);
    cv.drawBitmap(original, 0,0, null);

    for(int x = 0; x<mask.getWidth();x++){
        for(int y = 0; y<mask.getHeight();y++){
            int g = (mask.getPixel(x,y) & 0x0000FF00) >> 8;
            int r = (mask.getPixel(x,y) & 0x00FF0000) >> 16;
            int b = (mask.getPixel(x,y) & 0x000000FF);
            if(Math.abs(sR - r) < ANTILAISING_TOLERANCE && Math.abs(sG - g) < ANTILAISING_TOLERANCE && Math.abs(sB - b) < ANTILAISING_TOLERANCE)
                colored.setPixel(x, y, (colored.getPixel(x, y) & 0xFF000000) | 0x00458414);
        }
    }
    ((ImageView)findViewById(R.id.imageView1)).setImageBitmap(colored);

    return true;
}

}

This code doesn’t provide the user with much of color choices. Instead, if the user touches a region, it will look at the MASK and paint the OUTLINE accordingly. But, you can make really interesting and interactive.

RESULT

When I touched the man’s hair, it not only colored the hair, but colored his shirt and hand with the same color. Compare it with the MASK to get a good idea of what happened.

This is just a basic idea. I have created multiple Bitmaps but there is not really a need for that. I had used it for testing purposes and takes up unnecessary memory. And you don’t need to recreate the mask on every click, etc.

I hope this helps you 😀

Good luck