Android: How to draw a rectangle on a moving image so that the drawn rectangle also moves with the image?

Question

I have an image that can be moved around the screen. Now I want to draw a rectangle on this image so that when moving the image, the rectangle drawn on the image also moves. Currently, I can draw a rectangle not on the image, but on the SurfaceView, which contains the image. My current code is listed below.

public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); int w=getWindowManager().getDefaultDisplay().getWidth()-25; int h=getWindowManager().getDefaultDisplay().getHeight()-25; MySurfaceView mySurface=new MySurfaceView(this,w,h); setContentView(mySurface); } } 

And I have a class called MySurfaceView.java

 public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback { private Bitmap bitmap ; private MyThread thread; private int x=20,y=20;int width,height; public MySurfaceView(Context context,int w,int h) { super(context); width=w; height=h; thread=new MyThread(getHolder(),this); getHolder().addCallback(this); setFocusable(true); } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); bitmap =BitmapFactory.decodeResource(getResources(), R.drawable.my_pic); canvas.drawColor(Color.BLUE);//To make background canvas.drawBitmap(bitmap,x-(bitmap.getWidth()/2),y-(bitmap.getHeight()/2),null); Paint paintShape = new Paint(); paintShape.setColor(Color.BLACK); paintShape.setStyle(Paint.Style.STROKE); Rect myRectangle = new Rect(); myRectangle.set(0, 100, canvas.getWidth()/4, canvas.getHeight()/4); canvas.drawRect(myRectangle, paintShape); } @Override public boolean onTouchEvent(MotionEvent event) { x=(int)event.getX(); y=(int)event.getY(); if(x<25) x=25; if(x> width) x=width; if(y <25) y=25; if(y > 405) y=405; return true; } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) { // TODO Auto-generated method stub } @Override public void surfaceCreated(SurfaceHolder holder) { thread.startrun(true); thread.start(); } @Override public void surfaceDestroyed(SurfaceHolder holder) { thread.startrun(false); thread.stop(); } public class MyThread extends Thread{ private SurfaceHolder msurfaceHolder; private MySurfaceView mSurfaceView; private boolean mrun =false; public MyThread(SurfaceHolder holder, MySurfaceView mSurfaceView) { this.msurfaceHolder = holder; this.mSurfaceView=mSurfaceView; } public void startrun(boolean run) { mrun=run; } @SuppressLint("WrongCall") @Override public void run() { super.run(); Canvas canvas; while (mrun) { canvas=null; try { canvas = msurfaceHolder.lockCanvas(null); synchronized (msurfaceHolder) { mSurfaceView.onDraw(canvas); } } finally { if (canvas != null) { msurfaceHolder.unlockCanvasAndPost(canvas); } } } } } } 

Can someone help me improve my code to accomplish the above desired task. Thanks!

Answer 1

Well, I get my way. It was just a small change in the above code that was needed. It is enough to determine the coordinates of the rectangle with respect to x and y obtained due to touch events. for example, you can do the following:

 myRectangle.set(x-50, y-50, x+50, y+50); 

And the rest will be taken care of automatically.

Answer 2

In onCreate, create a new bitmap and canvas for this bitmap. Use this canvas to draw the original bitmap and rectangle for the new bitmap. Then in onDraw just draw this new bitmap wherever you want. As a bonus, you will have very fast onDraws.