Android：如何做这个框架油漆？

Question

我有一个像下面的一些静态图像：

现在，我想的是，当我在脸上或用手触摸，那么所选择的颜色应该对皮肤部分填补。

请参见下面的结果图像：

那么如何得到的结果类似上面？ 重做和撤消功能应该也在那里。

我尝试使用FloodFill颜色，但是这样做只能够对特定部分进行颜色处理。因为FloodFill只填充颜色，直到出现相同的pixwl颜色。如果触摸位置的像素颜色发生变化，则不会在其上填充颜色。

所以Usinf FloodFill我得到了像下面的图像的结果，如果我按手，然后只有手部分将填充颜色，而不是它我想填补颜色的另一方面，也面对。

所以请帮助我在这种情况下。

EDITED

一些答复我得到了像this one溶液之后。

但仍然存在内存问题。它消耗大量内存来绘制颜色。所以请任何人都可以帮助我呢？

Answer 1

你可以有一个完整的图像颜色的实际方式，当你填写一个特定区域用颜色，它将替换所有由该颜色中指定要填充的区域

通俗地说：

1. 用户会点击OUTLINE
2. 那点击的位置将用完美的色彩编码的区域另一幅图像进行检查的手。让我们称它为这种情况下的MASK。所有的皮肤区域将具有相同的颜色。衬衫领域将是另一种颜色。
3. 无论用户单击哪个位置，用户选择的颜色都将应用于MASK中具有相似颜色的每个像素，但不是直接在MASK上绘制，而是绘制到OUTLINE的像素上。

我希望这会有所帮助。

随意评论，如果你想要的例子，然后我可以更新答案，但我认为你可以从这里得到它。

编辑：

基本上从这样一个简单的图像开始。这个我们可以称之为为外形

然后作为开发者，你必须做一些工作。在这里，您的颜色代码为，轮廓。结果我们称为MASK。为了做到这一点，我们使用相同颜色的区域进行颜色编码。这可以在油漆或其他方面完成。我用Photoshop来冷静哈哈：D。

再有就是算法得到它的工作在手机上。在阅读代码之前，先看看这个变量。

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

如果你明确指出边框的黑色区域的图像放大了，实际上你可以看到，有时，计算机融合的颜色一点点。为了说明这一变化，我们使用这个容差值。

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; 
} 

}

此代码不能用太多的颜色选择，提供给用户。相反，如果用户触摸某个区域，则会查看MASK并相应地绘制OUTLINE。但是，你可以变得非常有趣和互动。

结果

当我碰到这个人的头发，它不仅颜色的头发，而且歪曲了他的衬衫和手用相同的颜色。将其与MASK进行比较，以了解发生了什么。

这仅仅是一个基本的想法。我创建了多个Bitmaps，但并不需要这样做。我曾用它进行测试，并占用不必要的内存。而你并不需要重建的每次点击面具等

我希望这可以帮助你：d

好运

Answer 2

一个基本的方式将是像floodfill algorythm。 维基百科的文章很好地描述了algorythm及其变体。

Here你可以在SO上找到一个实现。但取决于您的具体需求，这个必须进行修改。

Answer 3

使用FloodFill算法。 Fill the complete canvas but keep the bound fill area as it is like circle, rectangle。你也可以检查这个链接。 Android: How to fill color to the specific part of the Image only?。总体思路是通过点击获得x和y坐标。

final Point p1 = new Point(); 
p1.x=(int) x; p1.y=(int) y; X and y are co-ordinates when user clicks on the screen 
final int sourceColor= mBitmap.getPixel((int)x,(int) y); 
final int targetColor =mPaint.getColor(); 
new TheTask(mDrawingManager.mDrawingUtilities.mBitmap, p1, sourceColor, targetColor).execute(); //Use AsyncTask and do floodfillin the doinBackground(). 

检查上面的floodfill算法android的链接。这应该可以帮助你实现你想要的。 Android FingerPaint Undo/Redo implementation。这应该可以帮助你根据你的需要修改撤销和重做。

编辑：

计算器上的一个帖子促使我用洪水填充算法没有延迟和OOM的有效方式。

从SO邮政

采摘填补了小禁区正常工作与上面的洪水填充算法。然而，对于大面积的算法，该算法工作缓慢并且消耗大量内存。最近我遇到了一个使用QueueLinear Flood Fill的帖子，它的速度更快。

来源：

http://www.codeproject.com/Articles/16405/Queue-Linear-Flood-Fill-A-Fast-Flood-Fill-Algorith

代码：

public class QueueLinearFloodFiller { 

    protected Bitmap image = null; 
    protected int[] tolerance = new int[] { 0, 0, 0 }; 
    protected int width = 0; 
    protected int height = 0; 
    protected int[] pixels = null; 
    protected int fillColor = 0; 
    protected int[] startColor = new int[] { 0, 0, 0 }; 
    protected boolean[] pixelsChecked; 
    protected Queue<FloodFillRange> ranges; 

    // Construct using an image and a copy will be made to fill into, 
    // Construct with BufferedImage and flood fill will write directly to 
    // provided BufferedImage 
    public QueueLinearFloodFiller(Bitmap img) { 
     copyImage(img); 
    } 

    public QueueLinearFloodFiller(Bitmap img, int targetColor, int newColor) { 
     useImage(img); 

     setFillColor(newColor); 
     setTargetColor(targetColor); 
    } 

    public void setTargetColor(int targetColor) { 
     startColor[0] = Color.red(targetColor); 
     startColor[1] = Color.green(targetColor); 
     startColor[2] = Color.blue(targetColor); 
    } 

    public int getFillColor() { 
     return fillColor; 
    } 

    public void setFillColor(int value) { 
     fillColor = value; 
    } 

    public int[] getTolerance() { 
     return tolerance; 
    } 

    public void setTolerance(int[] value) { 
     tolerance = value; 
    } 

    public void setTolerance(int value) { 
     tolerance = new int[] { value, value, value }; 
    } 

    public Bitmap getImage() { 
     return image; 
    } 

    public void copyImage(Bitmap img) { 
     // Copy data from provided Image to a BufferedImage to write flood fill 
     // to, use getImage to retrieve 
     // cache data in member variables to decrease overhead of property calls 
     width = img.getWidth(); 
     height = img.getHeight(); 

     image = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565); 
     Canvas canvas = new Canvas(image); 
     canvas.drawBitmap(img, 0, 0, null); 

     pixels = new int[width * height]; 

     image.getPixels(pixels, 0, width, 1, 1, width - 1, height - 1); 
    } 

    public void useImage(Bitmap img) { 
     // Use a pre-existing provided BufferedImage and write directly to it 
     // cache data in member variables to decrease overhead of property calls 
     width = img.getWidth(); 
     height = img.getHeight(); 
     image = img; 

     pixels = new int[width * height]; 

     image.getPixels(pixels, 0, width, 1, 1, width - 1, height - 1); 
    } 

    protected void prepare() { 
     // Called before starting flood-fill 
     pixelsChecked = new boolean[pixels.length]; 
     ranges = new LinkedList<FloodFillRange>(); 
    } 

    // Fills the specified point on the bitmap with the currently selected fill 
    // color. 
    // int x, int y: The starting coords for the fill 
    public void floodFill(int x, int y) { 
     // Setup 
     prepare(); 

     if (startColor[0] == 0) { 
      // ***Get starting color. 
      int startPixel = pixels[(width * y) + x]; 
      startColor[0] = (startPixel >> 16) & 0xff; 
      startColor[1] = (startPixel >> 8) & 0xff; 
      startColor[2] = startPixel & 0xff; 
     } 

     // ***Do first call to floodfill. 
     LinearFill(x, y); 

     // ***Call floodfill routine while floodfill ranges still exist on the 
     // queue 
     FloodFillRange range; 

     while (ranges.size() > 0) { 
      // **Get Next Range Off the Queue 
      range = ranges.remove(); 

      // **Check Above and Below Each Pixel in the Floodfill Range 
      int downPxIdx = (width * (range.Y + 1)) + range.startX; 
      int upPxIdx = (width * (range.Y - 1)) + range.startX; 
      int upY = range.Y - 1;// so we can pass the y coord by ref 
      int downY = range.Y + 1; 

      for (int i = range.startX; i <= range.endX; i++) { 
       // *Start Fill Upwards 
       // if we're not above the top of the bitmap and the pixel above 
       // this one is within the color tolerance 
       if (range.Y > 0 && (!pixelsChecked[upPxIdx]) 
         && CheckPixel(upPxIdx)) 
        LinearFill(i, upY); 

       // *Start Fill Downwards 
       // if we're not below the bottom of the bitmap and the pixel 
       // below this one is within the color tolerance 
       if (range.Y < (height - 1) && (!pixelsChecked[downPxIdx]) 
         && CheckPixel(downPxIdx)) 
        LinearFill(i, downY); 

       downPxIdx++; 
       upPxIdx++; 
      } 
     } 

     image.setPixels(pixels, 0, width, 1, 1, width - 1, height - 1); 
    } 

    // Finds the furthermost left and right boundaries of the fill area 
    // on a given y coordinate, starting from a given x coordinate, filling as 
    // it goes. 
    // Adds the resulting horizontal range to the queue of floodfill ranges, 
    // to be processed in the main loop. 

    // int x, int y: The starting coords 
    protected void LinearFill(int x, int y) { 
     // ***Find Left Edge of Color Area 
     int lFillLoc = x; // the location to check/fill on the left 
     int pxIdx = (width * y) + x; 

     while (true) { 
      // **fill with the color 
      pixels[pxIdx] = fillColor; 

      // **indicate that this pixel has already been checked and filled 
      pixelsChecked[pxIdx] = true; 

      // **de-increment 
      lFillLoc--; // de-increment counter 
      pxIdx--; // de-increment pixel index 

      // **exit loop if we're at edge of bitmap or color area 
      if (lFillLoc < 0 || (pixelsChecked[pxIdx]) || !CheckPixel(pxIdx)) { 
       break; 
      } 
     } 

     lFillLoc++; 

     // ***Find Right Edge of Color Area 
     int rFillLoc = x; // the location to check/fill on the left 

     pxIdx = (width * y) + x; 

     while (true) { 
      // **fill with the color 
      pixels[pxIdx] = fillColor; 

      // **indicate that this pixel has already been checked and filled 
      pixelsChecked[pxIdx] = true; 

      // **increment 
      rFillLoc++; // increment counter 
      pxIdx++; // increment pixel index 

      // **exit loop if we're at edge of bitmap or color area 
      if (rFillLoc >= width || pixelsChecked[pxIdx] || !CheckPixel(pxIdx)) { 
       break; 
      } 
     } 

     rFillLoc--; 

     // add range to queue 
     FloodFillRange r = new FloodFillRange(lFillLoc, rFillLoc, y); 

     ranges.offer(r); 
    } 

    // Sees if a pixel is within the color tolerance range. 
    protected boolean CheckPixel(int px) { 
     int red = (pixels[px] >>> 16) & 0xff; 
     int green = (pixels[px] >>> 8) & 0xff; 
     int blue = pixels[px] & 0xff; 

     return (red >= (startColor[0] - tolerance[0]) 
       && red <= (startColor[0] + tolerance[0]) 
       && green >= (startColor[1] - tolerance[1]) 
       && green <= (startColor[1] + tolerance[1]) 
       && blue >= (startColor[2] - tolerance[2]) && blue <= (startColor[2] + tolerance[2])); 
    } 

    // Represents a linear range to be filled and branched from. 
    protected class FloodFillRange { 
     public int startX; 
     public int endX; 
     public int Y; 

     public FloodFillRange(int startX, int endX, int y) { 
      this.startX = startX; 
      this.endX = endX; 
      this.Y = y; 
     } 
    } 
}