Android imitation QQ upload Avatar (a)

Reprint please specify the source http://blog.csdn.net/u014163726/article/details/44994197

This long time did not write the blog feel the hands are born Ah, recently because of the work of the relationship came to Shanghai, is still stable, so seize the time to write a blog pressure yajing.

The title has already seen through everything, this time we have to imitate the QQ upload avatar function, first on an unfinished version of the Silver soul in the fourth quarter re-opened on a picture of the Meng Meng da.
This is also to use our knowledge of custom view, first from the album to get pictures of the part I do not detail.

/** * get picture */protected void Onactivityresult (int requestcode, int resultcode, Intent data) {if (Requestcode = = Choose_big_ Picture) {Photobitmap = Null;photoviewbitmap = null;try {Uri Originaluri = Data.getdata (); int angle = Getexiforientation (g Etrealpathfromuri (Originaluri)); if (angle! = 0) {//If the photo appears rotated then change the rotation degree matrix matrix = new Matrix (); Matrix.postrotate (A Ngle);p Hotobitmap = Getbitmapfromuri (Photobitmap, Originaluri);p Hotoviewbitmap = Bitmap.createbitmap (photoBitmap, 0, 0,photobitmap.getwidth (), Photobitmap.getheight (), Matrix, True); Clipview.setbitmap (Photoviewbitmap);} else {Clipview.setbitmap (Getbitmapfromuri (Photobitmap,originaluri));} Photobitmap.recycle ();p hotoviewbitmap.recycle ();} catch (Exception e) {System.out.println (E.getmessage ());}}}

I was using a Samsung Note3 test to find the picture that would happen to rotate very much to the pit dad. So we also need to get the path based on the URI and then determine whether the picture is rotated.

/** * Based on URI bitmap * * @param bitmap * @param uri * @return */private bitmap Getbitmapfromuri (bitmap bitmap, Uri uri) {T ry {bitmap = MediaStore.Images.Media.getBitmap (This.getcontentresolver (), URI); return bitmap;} catch (Exception e) { LOG.D ("TAG", E.getlocalizedmessage ()); return null;}} /** * Get system album picture */private Void Getalbum () {Intent Intent = new Intent (Intent.action_pick); Intent.settype ("image/*");//Photo class Type Startactivityforresult (Intent, choose_big_picture);} /** * Rotate Picture * * @param filepath * @return */private int getexiforientation (String filepath) {int degree = 0; Exifinterface exif = null;try {exif = new exifinterface (filepath);} catch (IOException ex) {}if (exif! = null) {int Orient ation = Exif.getattributeint (exifinterface.tag_orientation,-1); if (ORIENTATION! = 1) {switch (ORIENTATION) {case ExifInterface.ORIENTATION_ROTATE_90:degree = 90;break;case ExifInterface.ORIENTATION_ROTATE_180:degree = 180;break; Case ExifInterface.ORIENTATION_ROTATE_270:degree = 270;break;}}} Return Degree;} /** * Get path according to Uri * * @param contenturi * @return */public string Getrealpathfromuri (Uri Contenturi) {string res = null; String[] proj = {MediaStore.Images.Media.DATA}; cursor cursor = getcontentresolver (). Query (Contenturi, proj, null,null, NULL); if (Cursor.movetofirst ()) {int Column_ index = Cursor.getcolumnindexorthrow (MediaStore.Images.Media.DATA); res = cursor.getstring (column_index);} Cursor.close (); return res;}

Once you get the picture, you can go to our custom view link.

public class ClipView extends View {/** * Brush */private paint paint;/** * Picture */private Bitmap mbitmap;/** * Canvas */private Ca Nvas mcanvas;/** * Mask */private Bitmap bitmap;/** * start coordinates */private int StartX, starty;/** * Move distance */private int Distancex, distancey;/** * Picture coordinates */private int widthx, heighty;int x = 0, y = 0;public clipview (context context) {super (context); Init ( );//TODO auto-generated Constructor Stub}public ClipView (context context, AttributeSet Attrs) {Super (context, attrs); Init ();} Public ClipView (context context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr); init ();}

We'll zoom in to 600,800 by default so it doesn't make the picture too big or too small.

/** * Zoom picture *  * @param bgimage * @param newwidth * @param newheight * @return */private Bitmap zoomimage (Bitmap bgimage , double newwidth, double newheight) {//Get the width and height of this picture float width = bgimage.getwidth (); Float height = bgimage.getheight ();// Create an action picture with the Matrix object matrix matrix = new Matrix ();//Calculate wide-high zoom rate float ScaleWidth = ((float) newwidth)/width;float ScaleHeight = ( (float) newheight)/height;//zoom picture Action Matrix.postscale (ScaleWidth, ScaleHeight); Bitmap Bitmap = Bitmap.createbitmap (bgimage, 0, 0, (int) width, (int) height, matrix, true); return Bitmap;} /** * Get the picture first to zoom *  * @param bitmap */public void SetBitmap (bitmap bitmap) {This.mbitmap = Zoomimage (bitmap, 600, 800); StartX =-(600/2); starty =-(800/2); widthx = Startx;heighty = Starty;postinvalidate ();}

We'll take a look at the effect when we do this.

can see we have pictures or not enough to drop, we also need a circle and a mask effect, then the problem is, the mask effect is how to do it, then a picture, pictures from the network
See this picture we want to know the first to draw the yellow color after the painting is blue, then we will mask the effect of what to use to achieve it. I choose to use Dstout, which gets the non-intersection lower part. Get the idea right, and then we'll go ahead and write the code.

private void Init () {//create blank canvas Bitmap = Bitmap.createbitmap (+, config.argb_8888); Mcanvas = new Canvas (Bitmap);p aint = new Paint ();p Aint.setstyle (Style.fill);p aint.setstrokewidth (2);p Aint.setantialias (true); @Overrideprotected void OnDraw (canvas canvas) {canvas.translate (GetWidth ()/2, GetHeight ()/2), if (mbitmap! = null) {res Tartcanvas (); Canvas.drawbitmap (Mbitmap, WIDTHX, heighty, null); Mcanvas.drawcircle (-widthx,-heighty, $, paint); Canvas.drawbitmap (Bitmap, widthx, heighty, NULL);}}

We then ondraw our background image and mask effect plus a circle with a radius of 200, the next step is to constantly change the background position to complete the effect of the move, each move before the first clear off the last canvas.

private void Restartcanvas () {//empties the last drawing state Paint.setxfermode (new Porterduffxfermode (PorterDuff.Mode.CLEAR)); Mcanvas.drawpaint (Paint);p Aint.setxfermode (New Porterduffxfermode (PorterDuff.Mode.DST_OUT)); Mcanvas.drawcolor ( Getresources (). GetColor (r.color.bg));}

To remember the effect of Dstout Oh!

/** * move x position */private void Getwidthx () {widthx = Startx-distancex;if (Widthx > -200) {widthx = -200;distancex =-100; } else if (Widthx < -400) {widthx = -400;distancex = 100;}} /** * Move y position */private void Getheighty () {heighty = Starty-distancey;if (Heighty > -200) {heighty = -200;distancey =- 100;} else if (Heighty < -600) {heighty = -600;distancey = 100;}} @Overridepublic boolean ontouchevent (Motionevent event) {switch (event.getaction ()) {Case motionevent.action_down:x = ( int) event.getx (); y = (int) event.gety (); Break;case MotionEvent.ACTION_MOVE:distanceX = x-(int) (EVENT.GETX ()); Distancey = y-(int) (event.gety ()); Getwidthx (); Getheighty (); Break;case MotionEvent.ACTION_UP:startX = Widthx;starty = Heighty;break;default:break;} Postinvalidate (); return true;}

Today this part of the code is here, you can see the current we are missing is with the gesture to enlarge the background image, as well as the final Cut! Let's leave it to the next time ...
Project Source

Android imitation QQ upload Avatar (a)