Retrieve center point XY coordinates from selection

Question

What I'm aiming to do is to allow the user of my Android application to select points on the face and retrieve the X and Y coordinates from that touch. Please see the below picture.

Coordinates from face

I would like the user to be able to change the size of the selection square.

So far I have the below code, but I honestly have no idea where to go from there. How do I go about drawing a rectangle that the user can manipulate and move (and then return the X and Y centerpoint coordinates from that)? I'm sure there's an Android feature for this.

private void selectImg(){
    //retrieve X and Y values from touch
    surfaceView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent pos) {
            //retrieve position when user finishes touch
            if (pos.getAction() == MotionEvent.ACTION_UP){
                    Log.d("X",String.valueOf(pos.getX()));
                    Log.d("Y",String.valueOf(pos.getY()));
            }
            return true;
        }
    });     
}

Thank you!

Could be useful: Custom Android Image Crop https://github.com/dtitov/pickncrop/blob/master/src/com/github/pickncrop/MainActivity.java

can you post the result image if i make this image that is the selected yellow rectangle big then how is the result gonna look like? — KOTIOS, Jul 01 '13 at 05:16

score 4 · Answer 1 · edited May 23 '17 at 10:32

I'm not sure how much of the app you have done. However, you'll need a way to identify moving the squares versus stretching the squares. You can do this by button or you can do it on design (move from inside square and stretch from bounds).

   @Override
    public boolean onTouch(View view, MotionEvent pos) {
        //retrieve position when user finishes touch
        if (pos.getAction() == MotionEvent.ACTION_UP){
                Log.d("X",String.valueOf(pos.getX()));
                Log.d("Y",String.valueOf(pos.getY()));
        }
        //pseudo code
        //if user is dragging
             //get new dragged position
            //if boundaries are being dragged
                //redraw square to match new dragged position (requires some math to stretch properly)
            //else if inside boundaries being dragged
                //redraw the square to new dragged position (center it)

        return true;
    }

You'll need to look into examples of how to redraw the squares. I'm not sure how you are drawing them in the first place.

EDIT: Here are some useful sources. If you combine the two, you should be easily able to reach your goal:

Moving image with touch events

Android: How to stretch an image to the screen width while maintaining aspect ratio?

score 2 · Answer 2 · edited Jul 07 '13 at 17:07

Since you are already getting the point of touch all you can do is draw a rectangle or square around it with default size

Point touchPoint=new Point(x, y);
Paint paint = new Paint();
paint.setColor(Color.parseColor("#00CCFF"));
canvas.drawRect(x, y, x+100, y+100, paint);

Then depending on the point of touch in the rectangle you can either drag or scale the rectangle.
There is a google tutorial which you could use to drag and scale the rectangle.
Find below the link.
http://developer.android.com/training/gestures/scale.html

score 1 · Accepted Answer · edited May 23 '17 at 12:34

Well If I understand correctly according to your code you are using a SurfaceView so to draw inside it you can read the accepted answer here where inside private void drawMyStuff(final Canvas canvas) you have to put the code to draw the rectangles you want, and call invalidate() to redraw the SurfaceView every time you change something (like the coordinates).

Also you can create your own custom View and draw inside it, you can see a working example I am using in my project here.

You already have the (x,y) coordinates of the touch so to draw the rectangles inside your SurfaceView using Canvas. Here some code you can use for reference, all you have to do is change the numbers by the (x,y) coordinates where you want to draw:

Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawRect(30, 30, 80, 80, paint);
paint.setStrokeWidth(0);
paint.setColor(Color.CYAN);
canvas.drawRect(33, 60, 77, 77, paint );
paint.setColor(Color.YELLOW);
canvas.drawRect(33, 33, 77, 60, paint );

Now to resize your rectangle you will have to save the coordinates somewhere, you can use Rect to save the coordinates for each rectangle you have. Then to re-size them you can read the coordinates from the touchscreen and see if they are NEAR some of your rectangles coordinates. I say near because it would be difficult to touch exactly the coordinate of the corner, you have to see if it is for example in +-10 pixels around the corner. Take care of the rectangle size maybe those 10 pixels are the rectangle width or height.

Finally on ACTION_DOWN you track the corner as I write before and on ACTION_UP you take the new coordinates of the corner you detected before on ACTION_DOWN, then, you call invalidate() to redraw your rectangles and you are done!

I hope you understood me and helps you in some way :)

Retrieve center point XY coordinates from selection

3 Answers3