Question

I am trying to gain some more familiarity with the Android SurfaceView class, and in doing so am attempting to create a simple application that allows a user to move a Bitmap around the screen. The troublesome part of this implementation is that I am also including the functionality that the user may drag the image again after it has been placed. In order to do this, I am mapping the bitmap to a simple set of coordinates that define the Bitmap‘s current location. The region I am mapping the image to, however, does not match up with the image.

The Problem

After placing an image on the SurfaceView using canvas.drawBitmap(), and recording the coordinates of the placed image, the mapping system that I have set up misinterprets the Bitmap‘s coordinates somehow and does not display correctly. As you can see in this image, I have simply used canvas.drawLine() to draw lines representing the space of my touch region, and the image is always off and to the right:

The Code

Here, I shall provide the relevant code excerpts to help answer my question.

CustomSurface.java

This method encapsulates the drawing of the objects onto the canvas. The comments clarify each element:

public void onDraw(Canvas c){

    //Simple black paint
    Paint paint = new Paint();

    //Draw a white background
    c.drawColor(Color.WHITE);

    //Draw the bitmap at the coordinates
    c.drawBitmap(g.getResource(), g.getCenterX(), g.getCenterY(), null);

    //Draws the actual surface that is receiving touch input
    c.drawLine(g.left, g.top, g.right, g.top, paint);
    c.drawLine(g.right, g.top, g.right, g.bottom, paint);
    c.drawLine(g.right, g.bottom, g.left, g.bottom, paint);
    c.drawLine(g.left, g.bottom, g.left, g.top, paint);
}

This method encapsulates how I capture touch events:

public boolean onTouchEvent(MotionEvent e){

    switch(e.getAction()){

        case MotionEvent.ACTION_DOWN:{

            if(g.contains((int) e.getX(), (int) e.getY()))
                item_selected = true;
            break;
        }
        case MotionEvent.ACTION_MOVE:{

            if(item_selected)      
                g.move((int) e.getX(), (int) e.getY());

            break;
        }
        case MotionEvent.ACTION_UP:{

            item_selected = false;
            break;
        }
        default:{

            //Do nothing
            break;
        }
    }

    return true;
}

Graphic.java

This method is used to construct the Graphic:

//Initializes the graphic assuming the coordinate is in the upper left corner
public Graphic(Bitmap image, int start_x, int start_y){

    resource = image;
    left = start_x;
    top = start_y;
    right = start_x + image.getWidth();
    bottom = start_y + image.getHeight();
}

This method detects if a user is clicking inside the image:

public boolean contains(int x, int y){

    if(x >= left && x <= right){

        if(y >= top && y <= bottom){

            return true;
        }
    }

    return false;
}

This method is used to move the graphic:

public void move(int x, int y){

    left = x;
    top = y;
    right = x + resource.getWidth();
    bottom = y + resource.getHeight();
}

I also have 2 methods that determine the center of the region (used for redrawing):

public int getCenterX(){

    return (right - left) / 2 + left;
}

public int getCenterY(){

    return (bottom - top) / 2 + top;
}

Any help would be greatly appreciated, I feel as though many other StackOverflow users could really benefit from a solution to this issue.

Answer 1

This issue ended up being much simpler than I had thought, and after some tweaking I realized that this was an issue of image width compensation.

This line in the above code is where the error stems from:

c.drawBitmap(g.getResource(), g.getCenterX(), g.getCenterY(), null);

As you can tell, I manipulated the coordinates from within the Graphic class to produce the center of the bitmap, and then called canvas.drawBitmap() assuming that it would draw from the center outward.

Obviously, this would not work because the canvas always drops from the top left of an image downwards and to the right, so the solution was simple.

The Solution

Create the touch region with regards to the touch location, but draw it relative to a distance equal to the image width subtracted from the center location in the x and y directions. I basically changed the architecture of the Graphic class to implement a getDrawX() and getDrawY() method that would return the modified x and y coordinates of where it should be drawn in order to have the center_x and center_y values (determined in the constructor) actually appear to be at the center of the region.

It all comes down to the fact that in an attempt to compensate for the way the canvas draws bitmaps, I unfortunately incorporated some bad behaviors and in the end had to handle the offset in a completely different way.