图片去背景、等尺寸分割及颜色叠加修改技术实现咨询

Hey there! Let's tackle this problem step by step—you don't need the complicated boundary fill algorithm for this, since we can directly target each 3x3 block using Canvas and Paint in Java, which is way simpler. Here's a straightforward approach:

Step 1: Prepare a Mutable Bitmap #

First, you need a mutable (editable) version of your original bitmap, since most bitmaps loaded from resources or files are immutable by default.

// Assume originalBitmap is your square input bitmap
Bitmap mutableBitmap = originalBitmap.copy(Bitmap.Config.ARGB_8888, true);

Step 2: Calculate Block Dimensions #

Since it's a square bitmap, split its size into 3 equal parts to get the width/height of each grid block:

int bitmapSize = mutableBitmap.getWidth(); // Same as height for square bitmap
int blockSize = bitmapSize / 3;

Step 3: Create Canvas and Paint Objects #

Set up a Canvas tied to your mutable bitmap, and configure a Paint object with your desired color and blending mode (adjust the mode based on whether you want to overlay color or replace the block's original color):

Canvas canvas = new Canvas(mutableBitmap);
Paint colorPaint = new Paint();

// Example: Set your target color (cyan in your demo)
colorPaint.setColor(Color.CYAN);

// Choose a blending mode:
// - Use PorterDuff.Mode.SRC_ATOP to overlay color while preserving the original block's transparency
// - Use PorterDuff.Mode.SRC_OVER to completely replace the block's color (opaque)
// - Use PorterDuff.Mode.MULTIPLY to blend the original color with your target color
colorPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));

Step 4: Draw Color on Each 3x3 Block #

Loop through each row and column of the 3x3 grid, calculate the bounds of each block, and draw the color rectangle:

// Loop through 3 rows and 3 columns
for (int row = 0; row < 3; row++) {
    for (int col = 0; col < 3; col++) {
        // Calculate the bounds of the current block
        float left = col * blockSize;
        float top = row * blockSize;
        float right = left + blockSize;
        float bottom = top + blockSize;

        // Draw the color rectangle on this block
        canvas.drawRect(left, top, right, bottom, colorPaint);
    }
}

Step 5: Use the Modified Bitmap #

Now mutableBitmap is your original bitmap with the 3x3 blocks colored as desired. You can display it in an ImageView or save it to storage.

Customization Tips #

• If you want different colors for each block, create an array of colors and index into it based on row and col (e.g., colorArray[row * 3 + col]).
• To add the demo cyan lines (like in your reference), create another Paint with a stroke style and draw the grid lines after coloring the blocks:

  Paint linePaint = new Paint();
  linePaint.setColor(Color.CYAN);
  linePaint.setStrokeWidth(2f);
  linePaint.setStyle(Paint.Style.STROKE);
  
  // Draw vertical lines
  canvas.drawLine(blockSize, 0, blockSize, bitmapSize, linePaint);
  canvas.drawLine(blockSize * 2, 0, blockSize * 2, bitmapSize, linePaint);
  // Draw horizontal lines
  canvas.drawLine(0, blockSize, bitmapSize, blockSize, linePaint);
  canvas.drawLine(0, blockSize * 2, bitmapSize, blockSize * 2, linePaint);
  

内容的提问来源于stack exchange，提问作者Hardik sharma