在ImageView洪水填充算法中获取触摸坐标不准确

Question

我正在尝试使用Flood Fill算法为应用程序制作立方体绘画工具。

以下是该算法的代码：

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

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

这是我处理ImageView触摸事件的部分：

filler.setTolerance(150);

    imagen.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            int x = (int)motionEvent.getX();
            int y = (int)motionEvent.getY();
            filler.prepare();
            filler.floodFill(x, y);
            imagen.setImageBitmap(filler.getImage());
            return false;
        }
    });

问题在于坐标不准确。我的意思是，无论我在图像的哪个地方触摸，它都会在我没有触摸的其他部分被涂上色。在将事件坐标发送到填充算法之前，我需要处理一下吗？我也尝试了全屏图像，但问题仍然存在。

- Nacho Ramos Sánchez

Answer 1

您的情况让我想起了这篇博客文章，链接如下：https://pristalovpavel.wordpress.com/2015/05/16/drawing-on-image-in-android/。可能是他在那里解决的相同问题。他必须考虑到位图在放入ImageView之前所经历的转换。

他在OnTouchListener中使用了getPointerCoords(event)[0]和getPointerCoords(event)[1]，而不是仅使用getX()和getY()。并创建了以下方法：

 final float[] getPointerCoords(MotionEvent e)
{
    final int index = e.getActionIndex();
    final float[] coords = new float[] { e.getX(index), e.getY(index) };
    Matrix matrix = new Matrix();
    getImageMatrix().invert(matrix); //his drawable view extends ImageView 
                                  //so it has access to the getImageMatrix.
    matrix.postTranslate(getScrollX(), getScrollY());
    matrix.mapPoints(coords);
    return coords;
}

请注意，如果这对您确实是一个解决方案，您可以在方法内部使用imagen变量上的getImageMatrix()方法，或将矩阵保存到最终变量中并在OnTouchListener中使用它。

另请注意，如果这是问题所在，设置FillFlood时还应考虑变换以相应地构造尺寸（这意味着您之前的尝试与原始位图相比导致矩阵过大/过小）。

以下是一种使用此解决方案的方法。

final Matrix transformationMatrix = new Matrix();
imagen.getImageMatrix().invert(transformationMatrix);
transformationMatrix.postTranslate(imagen.getScrollX(), imagen.getScrollY());
imagen.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        float[] transformedCoords = getPointerCoords(event);
        int x = (int)transformedCoords[0];
        int y = (int)transformedCoords[1];
        filler.prepare();
        filler.floodFill(x, y);
        imagen.setImageBitmap(filler.getImage());
        return false;
    }

    final float[] getPointerCoords(MotionEvent e) {
        final int index = e.getActionIndex();
        final float[] coords = new float[] { e.getX(index), e.getY(index) };
        transformationMatrix.mapPoints(coords);
        return coords;
    }
});

希望这能解决问题。

- et_l

---

请保存 getPointerCoords 的数组结果，而不是两次进行矩阵操作。 - AxelH

@AxelH 你说得完全正确。我已经在代码中进行了更改。 - et_l

谢谢您的回复。不幸的是，问题仍然存在。我触摸的部分没有被绘制。顺便说一下，方法'getScrollX（）'和'getScrollY（）'无法解决。我猜这是imagen.getScrollX（）？它不需要调用视图吗？ - Nacho Ramos Sánchez

当图像大小足够小，可以在屏幕上显示而不被拉伸时，它能正常工作。如果图像太大并自动拉伸以适应屏幕，则绘画会停止工作。如果使用“match_parent”属性将图像适配整个屏幕，则情况也是如此。 - Nacho Ramos Sánchez

听起来getPointerCoordinates方法应该能够解决这种情况，将触摸事件转换为原始位图的坐标。 - et_l