1

enter image description hereI have an app in which it has a main canvas and i have added another canvas of bitmap on top of it. In the main canvas I have eraser in which it will detect when the user touches the bitmap area. I want to know the x and y inside the bitmap where the eraser touches and so on while moving from main canvas since the bitmap canvas is different from the main canvas. I want the x and y of the main canvas be the same with the bitmap canvas to be move. Thanks

Here's my snippet

public void touch_move(float x, float y) {
    float dx = Math.abs(x - mX);
    float dy = Math.abs(y - mY);
    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mX = x;
        mY = y;
    }
    if(istouchingBitmap(x, y) == true){
        float xRatio = (float)bitmap.getWidth() / parent.getWidth();
        float yRatio = (float)bitmap.getHeight() / parent.getHeight();
        float xPos = lastX * xRatio;
        float yPos = lastY * yRatio;
        eraseBitmap(bitmap, xPos , yPos , 5);
    }
}

function to detect the bitmap when touch

 /**
 * 
 * @param x The X location of the cursor in main View.
 * @param y The Y location of the cursor in main View.
 * @return This is only used to detect if the cursor is touching the Bitmap Image.
 */
public boolean istouchingBitmap(float x, float y) {
    matrix.invert(inverse);
    float[] pts = {x, y};
    inverse.mapPoints(pts);
    if (!bounds.contains(pts[0], pts[1])) {
        return false;
    }
    // copy the location
    lastX = x;
    lastY = y;
    return Color.alpha(bitmap.getPixel((int) pts[0], (int) pts[1])) != 0;
}
donmj
  • 379
  • 7
  • 13

2 Answers2

1

You only need to get the X and Y values from the touch event.

Then sustract the top,left margin/offset values respectively.

The result is the X,Y coordinate relative to the start of the bitmap.

PD: When doing this, i was having problems handling the status bar height, since the way of measuring it changes between Android version and device model.

Hope this helps.

Nanoc
  • 2,381
  • 1
  • 20
  • 35
  • Hi @Nanoc. "Then sustract the top,left margin/offset values respectively.". You mean the margin of the bitmap on top?. Thanks for the hint :). – donmj Nov 04 '15 at 12:52
  • The margin, padding, x position on layout, whatever acts as offset for the image – Nanoc Nov 04 '15 at 12:54
  • I don't think I get it . What i've done here so far is projecting the main view as the height and width of the image on top. As you can see when I go to the top the image is erasing on top.. – donmj Nov 04 '15 at 13:24
  • getTop() and getLeft() of the canvas should do the job – Nanoc Nov 04 '15 at 14:18
  • Thanks @Nanoc. I'll try it :) – donmj Nov 04 '15 at 14:41
  • Hi @Nanoc I have found this link [link](http://stackoverflow.com/questions/6951887/how-to-get-x-and-y-coordinate-of-bitmap-image-in-image-control) – donmj Nov 04 '15 at 23:09
  • @domnj that applies to zoomed/panned images. – Nanoc Nov 05 '15 at 08:44
  • Thanks @Nanoc. I've used the code below and it works as what you said. – donmj Nov 05 '15 at 09:25
  • Hi @Nanoc. I have a problem when i try to rotate the bitmap matrix. The x and y is not sync anymore after rotating. Is there a way to get x and y after rotating the matrix? – donmj Nov 08 '15 at 06:06
  • isnt it going to be x=y and y=x if you rotate it 90ª? – Nanoc Nov 10 '15 at 08:39
  • Absolutely yes!. But already solved it using matrix.mappoints. I have update the answer below :) – donmj Nov 10 '15 at 21:14
0

Finally :). This code will map the screen X and Y to the x and y inside the bitmap. Hope it help others. Good luck

float[] point = new float[] {lastX, lastY};
Matrix inverse = new Matrix();
matrix.invert(inverse);
inverse.mapPoints(point);
bitmapX = point[0];
bitmapY = point[1];

canvas.drawCircle(bitmapX, bitmapY, radius, mPaint); // punch a hole
donmj
  • 379
  • 7
  • 13