change image shape in android

Question

I got success in implementing a pinch zoom in/out and drag/drop functionality in images on the canvas.

Now what I want is re-sizing, that images like below link that based on iPhone App enter image description here

How to change shape of an image using iPhone SDK?

So how can I achieve that kind of functionality in Android ?

Not sure why this is upvoted to +4 within a minute after posting. Can an upvoter explain what makes this question so awesome? Anyway, what have you tried yet? — , Sep 05 '12 at 09:53
http://code.google.com/p/android-multitouch-controller/source/browse/demo/MTPhotoSortr/src/org/metalev/multitouch/photosortr/PhotoSorterView.java?r=3ef1fdcbebe4f016a03c4d956af4ecbf850a925a Using this link i have successfully pinch in/out images in canvas. — Dhruvil Patel, Sep 05 '12 at 09:58
@xitij i am also looking out for this kinda of probs..... if i get around it...i will surely inform you..... — Kumar Vivek Mitra, Sep 05 '12 at 10:11

score 1 · Answer 1 · answered Dec 29 '12 at 14:45

Basically you need to invalidate the image and re-draw on the canvas from the beginning ::

img=(ImageView)findViewById(R.id.yourimageidfromxml);

img.onTouchEvent(MotionEvent me)
{
   int X=me.getX(); 
   int Y=me.getY();
   img.invalidate();
   img.repaint(X,Y);

}

void paint(int X,int Y)
{
  img.setWidth(X);
  img.setHeight(Y);
}

Scaling image will transform using repaint on canvas from the beginning

score 1 · Answer 2 · answered Jan 16 '13 at 07:58

If by re-sizing you are referring to "stretching" the Bitmap on the vertical and horizontal plane then you simply modify the rect that the shape (eg. oval) is being drawn into.

For example:

This is your original shape of an oval:

canvas.drawOval(new Rect(0,0,100,100), bluePaint);

This is the same oval, just stretched (resized) on the horizontal plane:

canvas.drawOval(new Rect(0,0,200,100), bluePaint);

I hope this helps.

score 0 · Answer 3 · answered Sep 06 '12 at 02:26

There are two options, both involving a custom view. The first is to create a custom view that fills your "canvas". You can keep track of 8 blue and 1 green circles in the view as Rect objects. Override onTouchEvent(MotionEvent) and then check if motion events are in any of your controls and update them accordingly (I'm simplifying things a bit here :)). From your onTouchEvent you would call invalidate(). You're onDraw(Canvas) can then handle drawing the controls and update the image according to how your controls have changed since the last call to onDraw.

The other option is to do something similar, but with a view that only encapsulates the circle and controls, meaning that moving the view around would require a container that will let the view change it's layout parameters. Doing this, your onTouchEvent method would need to trigger an invalidate with that layout view because it would need to recalculate the size and position of your view. This would definitely be harder but depending on what you are trying to achieve working with individual views may be better than maintaining representations of your circles in code in a single view.

score 0 · Answer 4 · answered Jan 16 '13 at 07:20

The resizing of the image can be achieved by using a simple ImageView with scaleType "fitXY".

You have to add the blue resize handles yourself.

Changing the rotation of the image (green handle) can be achieved by using:

public static Bitmap rotate(Bitmap src, float degree) {
    // create new matrix
    Matrix matrix = new Matrix();
    // setup rotation degree
    matrix.postRotate(degree);

    // return new bitmap rotated using matrix
    return Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
}

Source: http://xjaphx.wordpress.com/2011/06/22/image-processing-rotate-image-on-the-fly/

See http://xjaphx.wordpress.com/learning/tutorials/ for more Android Image Processing examples.

change image shape in android

4 Answers4