Android：高仿QQ头像截取升级版

       观看此篇文章前，请先阅读上篇文章：高仿QQ头像截取；

本篇之所以为升级版，是在截取头像界面添加了与qq类似的阴影层（裁剪区域以外的部分），且看效果图：

 

为了适应大家不同需求，这次打了两个包，及上图中一个方形的头像截取demo和一个圆形的；

原理：

方形：

如图：底层即图片层，在上层的画布中，先将裁剪区四周根据裁剪区大小画上阴影，然后在画上裁剪区的白色边框（空心）：如下图

主要代码如下：

[html]  view plain copy

1. @Override  
2.     protected void onDraw(Canvas canvas)  
3.     {  
4.         super.onDraw(canvas);  
5.         // 计算矩形区域的宽度  
6.         mWidth = getWidth() - 2 * mHorizontalPadding;  
7.         // 计算距离屏幕垂直边界 的边距  
8.         mVerticalPadding = (getHeight() - mWidth) / 2;  
9.   
10.         // 绘制左边  
11.         canvas.drawRect(0, 0, mHorizontalPadding, getHeight()-mVerticalPadding, mPaintRect);  
12.         // 绘制右边  
13.         canvas.drawRect(getWidth() - mHorizontalPadding, mVerticalPadding, getWidth(),getHeight(), mPaintRect);  
14.         // 绘制上边  
15.         canvas.drawRect(mHorizontalPadding, 0, getWidth(),mVerticalPadding, mPaintRect);  
16.         // 绘制下边  
17.         canvas.drawRect(0, getHeight() - mVerticalPadding,getWidth() - mHorizontalPadding, getHeight(), mPaintRect);  
18.           
19.         //绘制边框  
20.         canvas.drawRect( mHorizontalPadding, mVerticalPadding,mHorizontalPadding+mWidth, mVerticalPadding+mWidth, mPaint);  
21.           
22.     }  

圆形：

圆形裁剪稍复杂一点，利用到了Xfermode即图像重叠模式中的XOR：抠出重叠区域

实现思路：

画的有点乱，先凑合着看，2，3是用的另一个画布，并将3即实心圆的画笔设置为：

[html]  view plain copy

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

当阴影层和其上部的的实心圆重叠时，则实心圆部分即被抠出，剩下一个中间空洞的阴影层了，然后再将该画布的bitmap画在自定义View的画布上合成，最后画出圆形裁剪区白色边框，主要代码如下：

[html]  view plain copy

1. protected void onDraw(Canvas canvas)  
2.     {  
3.         super.onDraw(canvas);  
4.         if(mBgBitmap==null){  
5.             mBgBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);    
6.             mCanvas = new  Canvas(mBgBitmap);  
7.             mRect = new RectF(0, 0, getWidth(), getHeight());  
8.         }  
9.         //绘制阴影层  
10.         mCanvas.drawRect(mRect, mPaintRect);  
11.          //绘制实心圆 ，绘制完后，在mCanvas画布中，mPaintRect和mPaintCirle相交部分即被掏空  
12.         mCanvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaintCirle);  
13.          //将阴影层画进本View的画布中  
14.         canvas.drawBitmap(mBgBitmap, null, mRect, new Paint());  
15.       //绘制圆环  
16.         canvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaint);  
17.           
18.     }  

好了，且看源码下载地址，两个demo都包含在内：

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