关闭

安卓高仿QQ头像截取升级版

标签: canvas
4605人阅读 评论(31) 收藏 举报
分类:

       观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取

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

 

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

原理:

方形:


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


主要代码如下:

@Override
	protected void onDraw(Canvas canvas)
	{
		super.onDraw(canvas);
		// 计算矩形区域的宽度
		mWidth = getWidth() - 2 * mHorizontalPadding;
		// 计算距离屏幕垂直边界 的边距
		mVerticalPadding = (getHeight() - mWidth) / 2;

		// 绘制左边
		canvas.drawRect(0, 0, mHorizontalPadding, getHeight()-mVerticalPadding, mPaintRect);
		// 绘制右边
		canvas.drawRect(getWidth() - mHorizontalPadding, mVerticalPadding, getWidth(),getHeight(), mPaintRect);
		// 绘制上边
		canvas.drawRect(mHorizontalPadding, 0, getWidth(),mVerticalPadding, mPaintRect);
		// 绘制下边
		canvas.drawRect(0, getHeight() - mVerticalPadding,getWidth() - mHorizontalPadding, getHeight(), mPaintRect);
		
		//绘制边框
		canvas.drawRect( mHorizontalPadding, mVerticalPadding,mHorizontalPadding+mWidth, mVerticalPadding+mWidth, mPaint);
		
	}
圆形:

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



实现思路:


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

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

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

protected void onDraw(Canvas 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());
		}
		//绘制阴影层
		mCanvas.drawRect(mRect, mPaintRect);
		 //绘制实心圆 ,绘制完后,在mCanvas画布中,mPaintRect和mPaintCirle相交部分即被掏空
		mCanvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaintCirle);
		 //将阴影层画进本View的画布中
        canvas.drawBitmap(mBgBitmap, null, mRect, new Paint());
      //绘制圆环
      	canvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaint);
		
	}

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

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

PS:看到有些同学想把图像缩放到裁剪框内,可以进行以下操作:

在ClipActivity中,对图片进行bitmap缩放转换这一步Bitmap bitmap=ImageTools.convertToBitmap之上,加上代码:

 int mHorizontalPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, getResources().getDisplayMetrics());
		 WindowManager windowManager = getWindowManager();    
         Display display = windowManager.getDefaultDisplay();    
         int width=display.getWidth()-2*mHorizontalPadding;
然后将Bitmap bitmap=ImageTools.convertToBitmap修改为:

Bitmap bitmap=ImageTools.convertToBitmap(path, width,width);
这样做的目的是在选择完图片进行初始化时,图片宽或高正好卡在裁剪框内,效果如图:



其中60表示你定义的裁剪框离屏幕边缘的宽度。


2015-07-09更新:

在实际使用过程中,某些手机如小米三星等,在裁剪界面抠图以外的透明区域会很暗甚至看上去就是黑色的,给用户的体验很不好,在多次尝试之后,得到了一个方法如下:

//绘制阴影层
		mPaintRect = new Paint();
		mPaintRect.setColor(Color.parseColor("#30000000"));
//		mPaintRect.setARGB(70, 0,0, 0);
		
		// 绘制实心圆
		mPaintCirle = new Paint();
		mPaintCirle.setStrokeWidth((getWidth()-2*mHorizontalPadding)/2);  //实心圆半径
        mPaintCirle.setARGB(255, 0,0, 0);
    	// 绘制实心圆2
		mPaintCirle2 = new Paint();
		mPaintCirle2.setStrokeWidth((getWidth()-2*mHorizontalPadding)/2);  //实心圆半径
        mPaintCirle2.setARGB(255, 0,0, 0);
        mPaintCirle2.setXfermode(new PorterDuffXfermode(Mode.XOR));//XOR模式:重叠部分被掏空

也就是多绘制一个实心圆:

mCanvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaintCirle);
		mCanvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaintCirle2);
设置阴影层透明度时可以使用setARGB方法设置透明度(0-255数值越小越透明),或者设置画笔颜色为透明色:

效果如下:



是不是较之前效果好了很多呢?!那么现在就可以根据自己的需要去调节自己想要的效果啦!


2015-10-12:

最近有童鞋想要长方形的效果,其实很简单,修改(计算)下裁剪区和边框区屏幕顶部到上边框(以及屏幕底部到下边框)的距离就行了:

示意图:


红色是原来正方形区域,蓝色为长方形区域。


修改裁剪区mVerticalPadding计算方法:



修改浮层白色边框及阴影显示区域的计算方法:


以上修改后的宽高比为2:1,效果图:

只需要注意这几个修改的地方,自行修改为自己想要的比例!



9
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:328735次
    • 积分:4587
    • 等级:
    • 排名:第7198名
    • 原创:95篇
    • 转载:10篇
    • 译文:0篇
    • 评论:391条
    我的微博
    微信公众号AndroidMax
    博客专栏
    最新评论