High imitation QQ Avatar screenshot upgraded version

Before reading this article, read the previous article: High imitation QQ Avatar interception;

This article is an upgraded version. It adds a shadow layer similar to QQ on the screenshot Avatar interface (outside the cropping area:

 

In order to adapt to different needs, we made two packages this time, and a square Avatar captured the demo and a circle;

Principle:

Square:

The bottom layer is the image layer. In the upper canvas, first shadow the area around the cropping area based on the size of the cropping area, and then draw a white border (hollow) in the cropping area. For example:

The main code is as follows:

@ Overrideprotected void ondraw (canvas) {super. ondraw (canvas); // calculate the width of the rectangle area mwidth = getwidth ()-2 * mhorizontalpadding; // calculate the margin mverticalpadding = (getheight ()-mwidth) from the vertical boundary of the screen) /2; // draw the canvas on the left. drawrect (0, 0, mhorizontalpadding, getheight ()-mverticalpadding, mpaintrect); // draw the canvas on the right. drawrect (getwidth ()-mhorizontalpadding, mverticalpadding, getwidth (), getheight (), mpaintrect); // draw the upper canvas. drawrect (mhorizontalpadding, 0, getwidth (), mverticalpadding, mpaintrect); // draw the canvas below. drawrect (0, getheight ()-mverticalpadding, getwidth ()-mhorizontalpadding, getheight (), mpaintrect); // draw the border canvas. drawrect (mhorizontalpadding, mverticalpadding, mhorizontalpadding + mwidth, mverticalpadding + mwidth, mpaint );}

Circle:

Circular cropping is a little more complex. xfermode is used to capture overlapping areas.

Implementation ideas:

The painting is a bit messy. First, let's look at it. 2 and 3 are another canvas, and set 3, that is, the paint brush of the solid circle,:

mPaintCirle.setXfermode(new PorterDuffXfermode(Mode.XOR));

When the shadow layer overlaps the solid circle on the top of the Shadow layer, the solid circle is extracted, and there is a shadow layer with an empty middle, then, draw the bitmap of the canvas on the canvas of the custom view and combine it. Finally, draw a white border in the circular cropping area. The main code is as follows:

Protected void ondraw (canvas) {super. ondraw (canvas); If (mbgbitmap = NULL) {mbgbitmap = bitmap. createbitmap (getwidth (), getheight (), config. argb_8888); mcanvas = new canvas (mbgbitmap); mrect = new rectf (0, 0, getwidth (), getheight ();} // draw the shadow layer mcanvas. drawrect (mrect, mpaintrect); // draw a solid circle. After drawing, the intersection of mpaintrect and mpaintcirle is hollowed out in the mcanvas canvas. drawcircle (getwidth ()/2, getheight ()/2, getwidth ()/2-mhorizontalpadding, mpaintcirle); // draw the shadow layer into the canvas of this view. drawbitmap (mbgbitmap, null, mrect, new paint (); // draw the circle canvas. drawcircle (getwidth ()/2, getheight ()/2, getwidth ()/2-mhorizontalpadding, mpaint );}

Now, let's look at the source code. Both demos are included:

Http://download.csdn.net/detail/baiyuliang2013/8469585

High imitation QQ Avatar screenshot upgraded version