How to resize a touch object

Question

See the following image

I want to change the shape of the selected view by dragging its corner. It is not necessary that the view after dragging the corner should be a rectangle, it can be any arbitrary shape

how to achieve this?

now I have made 4 corners moved by touching, but the shape does not change

package com.assignment.DragDrop; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Point; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.view.MotionEvent; import android.view.View; import android.widget.ImageView; public class DrawView extends View { Point point1,point2,point3,point4; private ColorBall[] colorballs = new ColorBall[4]; // array that holds the balls private int balID = 0; // variable to know what ball is being dragged Paint paint; Canvas canvas; public DrawView(Context context) { super(context); paint=new Paint(); setFocusable(true); //necessary for getting the touch events canvas= new Canvas(); // setting the start point for the balls point1 = new Point(); point1.x = 50; point1.y = 20; point2 = new Point(); point2.x = 150; point2.y = 20; point3 = new Point(); point3.x = 150; point3.y = 120; point4 = new Point(); point4.x = 50; point4.y = 120; // declare each ball with the ColorBall class colorballs[0] = new ColorBall(context,R.drawable.bol_blauw, point1); colorballs[1] = new ColorBall(context,R.drawable.bol_blauw, point2); colorballs[2] = new ColorBall(context,R.drawable.bol_groen, point3); colorballs[3] = new ColorBall(context,R.drawable.bol_geel, point4); } // the method that draws the balls @Override protected void onDraw(Canvas canvas) { //canvas.drawColor(0xFFCCCCCC); //if you want another background color paint.setAntiAlias(true); paint.setDither(true); paint.setColor(Color.BLACK); paint.setStyle(Paint.Style.FILL); paint.setStrokeJoin(Paint.Join.ROUND); // mPaint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(5); canvas.drawPaint(paint); paint.setColor(Color.WHITE); canvas.drawRect(point1.x+25, point2.x, point3.x+25, point4.x, paint); BitmapDrawable mBitmap; mBitmap= new BitmapDrawable(); // canvas.drawBitmap(bitmap, left, top, paint) // shade_region_between_points(); // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint); // canvas.drawLine(point1.x, point1.y, point4.x, point4.y, paint); // canvas.drawLine(point4.x, point4.y, point3.x, point3.y, paint); // canvas.drawLine(point2.x, point2.y, point3.x, point3.y, paint); //draw the balls on the canvas for (ColorBall ball : colorballs) { canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(), paint); // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint); // canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint); } /*Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher); drawable.setBounds( point1.x+25, point2.x, point3.x+25, point4.x); drawable.draw(canvas);*/ } // events when touching the screen public boolean onTouchEvent(MotionEvent event) { int eventaction = event.getAction(); int X = (int)event.getX(); int Y = (int)event.getY(); switch (eventaction ) { case MotionEvent.ACTION_DOWN: // touch down so check if the finger is on a ball balID = 0; for (ColorBall ball : colorballs) { // check if inside the bounds of the ball (circle) // get the center for the ball int centerX = ball.getX() + 25; int centerY = ball.getY() + 25; paint.setColor(Color.CYAN); // calculate the radius from the touch to the center of the ball double radCircle = Math.sqrt( (double) (((centerX-X)*(centerX-X)) + (centerY-Y)*(centerY-Y))); // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint); // if the radius is smaller then 23 (radius of a ball is 22), then it must be on the ball if (radCircle < 23){ balID = ball.getID(); canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint); invalidate(); break; } invalidate(); //canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint); // check all the bounds of the ball (square) //if (X > ball.getX() && X < ball.getX()+50 && Y > ball.getY() && Y < ball.getY()+50){ // balID = ball.getID(); // break; //} } break; case MotionEvent.ACTION_MOVE: // touch drag with the ball // move the balls the same as the finger if (balID > 0) { try { colorballs[balID-1].setX(X-25); colorballs[balID-1].setY(Y-25); // canvas.drawLine(point1.x, point1.y, point2.x, point2.y, paint); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } paint.setColor(Color.CYAN); canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint); invalidate(); } break; case MotionEvent.ACTION_UP: // touch drop - just do things here after dropping break; } // redraw the canvas invalidate(); return true; } public void shade_region_between_points() { canvas.drawRect(point1.x, point2.x, point3.x, point4.x, paint); } } 

I got this code from the Internet.

this will allow the corners to be moved to the touch event, but the shape does not move ...

Answer 1

The following code is to draw a rectangle on the touch base.

 import java.util.ArrayList; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Point; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import com.common.Utils; import com.example.rectangleoverlay.R; public class DrawView extends View { Point point1, point3; Point point2, point4; /** * point1 and point 3 are of same group and same as point 2 and point4 */ int groupId = -1; private ArrayList<ColorBall> colorballs = new ArrayList<ColorBall>(); // array that holds the balls private int balID = 0; // variable to know what ball is being dragged Paint paint; Canvas canvas; public DrawView(Context context) { super(context); paint = new Paint(); setFocusable(true); // necessary for getting the touch events canvas = new Canvas(); // setting the start point for the balls point1 = new Point(); point1.x = 50; point1.y = 20; point2 = new Point(); point2.x = 150; point2.y = 20; point3 = new Point(); point3.x = 150; point3.y = 120; point4 = new Point(); point4.x = 50; point4.y = 120; // declare each ball with the ColorBall class colorballs.add(new ColorBall(context, R.drawable.gray_circle, point1)); colorballs.add(new ColorBall(context, R.drawable.gray_circle, point2)); colorballs.add(new ColorBall(context, R.drawable.gray_circle, point3)); colorballs.add(new ColorBall(context, R.drawable.gray_circle, point4)); } public DrawView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public DrawView(Context context, AttributeSet attrs) { super(context, attrs); paint = new Paint(); setFocusable(true); // necessary for getting the touch events canvas = new Canvas(); // setting the start point for the balls point1 = new Point(); point1.x = 50; point1.y = 20; point2 = new Point(); point2.x = 150; point2.y = 20; point3 = new Point(); point3.x = 150; point3.y = 120; point4 = new Point(); point4.x = 50; point4.y = 120; // declare each ball with the ColorBall class colorballs.add(new ColorBall(context, R.drawable.gray_circle, point1)); colorballs.add(new ColorBall(context, R.drawable.gray_circle, point2)); colorballs.add(new ColorBall(context, R.drawable.gray_circle, point3)); colorballs.add(new ColorBall(context, R.drawable.gray_circle, point4)); } // the method that draws the balls @Override protected void onDraw(Canvas canvas) { // canvas.drawColor(0xFFCCCCCC); //if you want another background color paint.setAntiAlias(true); paint.setDither(true); paint.setColor(Color.parseColor("#55000000")); paint.setStyle(Paint.Style.FILL); paint.setStrokeJoin(Paint.Join.ROUND); // mPaint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(5); canvas.drawPaint(paint); paint.setColor(Color.parseColor("#55FFFFFF")); if (groupId == 1) { canvas.drawRect(point1.x + colorballs.get(0).getWidthOfBall() / 2, point3.y + colorballs.get(2).getWidthOfBall() / 2, point3.x + colorballs.get(2).getWidthOfBall() / 2, point1.y + colorballs.get(0).getWidthOfBall() / 2, paint); } else { canvas.drawRect(point2.x + colorballs.get(1).getWidthOfBall() / 2, point4.y + colorballs.get(3).getWidthOfBall() / 2, point4.x + colorballs.get(3).getWidthOfBall() / 2, point2.y + colorballs.get(1).getWidthOfBall() / 2, paint); } BitmapDrawable mBitmap; mBitmap = new BitmapDrawable(); // draw the balls on the canvas for (ColorBall ball : colorballs) { canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(), new Paint()); } } // events when touching the screen public boolean onTouchEvent(MotionEvent event) { int eventaction = event.getAction(); int X = (int) event.getX(); int Y = (int) event.getY(); switch (eventaction) { case MotionEvent.ACTION_DOWN: // touch down so check if the finger is on // a ball balID = -1; groupId = -1; for (ColorBall ball : colorballs) { // check if inside the bounds of the ball (circle) // get the center for the ball Utils.logd("Id : " + ball.getID()); Utils.logd("getX : " + ball.getX() + " getY() : " + ball.getY()); int centerX = ball.getX() + ball.getWidthOfBall(); int centerY = ball.getY() + ball.getHeightOfBall(); paint.setColor(Color.CYAN); // calculate the radius from the touch to the center of the ball double radCircle = Math .sqrt((double) (((centerX - X) * (centerX - X)) + (centerY - Y) * (centerY - Y))); Utils.logd("X : " + X + " Y : " + Y + " centerX : " + centerX + " CenterY : " + centerY + " radCircle : " + radCircle); if (radCircle < ball.getWidthOfBall()) { balID = ball.getID(); Utils.logd("Selected ball : " + balID); if (balID == 1 || balID == 3) { groupId = 2; canvas.drawRect(point1.x, point3.y, point3.x, point1.y, paint); } else { groupId = 1; canvas.drawRect(point2.x, point4.y, point4.x, point2.y, paint); } invalidate(); break; } invalidate(); } break; case MotionEvent.ACTION_MOVE: // touch drag with the ball // move the balls the same as the finger if (balID > -1) { Utils.logd("Moving Ball : " + balID); colorballs.get(balID).setX(X); colorballs.get(balID).setY(Y); paint.setColor(Color.CYAN); if (groupId == 1) { colorballs.get(1).setX(colorballs.get(0).getX()); colorballs.get(1).setY(colorballs.get(2).getY()); colorballs.get(3).setX(colorballs.get(2).getX()); colorballs.get(3).setY(colorballs.get(0).getY()); canvas.drawRect(point1.x, point3.y, point3.x, point1.y, paint); } else { colorballs.get(0).setX(colorballs.get(1).getX()); colorballs.get(0).setY(colorballs.get(3).getY()); colorballs.get(2).setX(colorballs.get(3).getX()); colorballs.get(2).setY(colorballs.get(1).getY()); canvas.drawRect(point2.x, point4.y, point4.x, point2.y, paint); } invalidate(); } break; case MotionEvent.ACTION_UP: // touch drop - just do things here after dropping break; } // redraw the canvas invalidate(); return true; } public void shade_region_between_points() { canvas.drawRect(point1.x, point3.y, point3.x, point1.y, paint); } } 

The following class is used to store objects.

 import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Point; public class ColorBall { Bitmap bitmap; Context mContext; Point point; int id; static int count = 0; public ColorBall(Context context, int resourceId, Point point) { this.id = count++; bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId); mContext = context; this.point = point; } public int getWidthOfBall() { return bitmap.getWidth(); } public int getHeightOfBall() { return bitmap.getHeight(); } public Bitmap getBitmap() { return bitmap; } public int getX() { return point.x; } public int getY() { return point.y; } public int getID() { return id; } public void setX(int x) { point.x = x; } public void setY(int y) { point.y = y; } } 

Answer 2

Its just like when we crop the image, then it increases the size of your rectangle. Then we can save our view as a new bitmap. Therefore, you can take advantage of this issue .

This explains pretty much what you need.

OR

if it's a layout, we can set a new Layout-Param with a new height and width when we touch any kind