关闭

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

标签: canvas
4861人阅读 评论(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
查看评论

Android自定义View,高仿QQ音乐歌词滚动控件!

最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出。今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果。OK,废话不多说,先来看看效果图:好,接下来我们就来看看怎么实现这样一个效果。本文主要包括如下几方面内容:1.歌词文件格式分析及解析2....
  • u012702547
  • u012702547
  • 2016-10-22 15:45
  • 4564

聊天气泡框模块源码 (高仿微信、QQ聊天的气泡聊天框)

高仿微信、QQ聊天的气泡聊天框。基于列表框(ListBox)控件,自己计算每个项目位置,自绘项目内容。易语言模块+模块源码+调用例程。
  • CometNet
  • CometNet
  • 2016-09-21 13:25
  • 5353

高仿QQ电脑管家8 界面

去年发了高仿QQ2012登录界面,最近又优化了下代码,不完整的界面库
  • geniusice18
  • geniusice18
  • 2013-11-17 14:12
  • 12777

仿QQ头像自定义截取功能

看了android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识。先看看效果: 重点内容 思路分析:这个效果可以用两个View来完成,上层View是一个遮盖物,绘制半透明的颜色,中间挖了一个圆;下层的View用来显示图片,具备移动和缩放的功能,并且能...
  • cao12345cong
  • cao12345cong
  • 2016-10-11 10:50
  • 855

高仿QQ头像截取

花费了半天时间,把 仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧: 支持的功能:     1.选择裁剪的图片支持手势放大...
  • baiyuliang2013
  • baiyuliang2013
  • 2015-03-03 08:47
  • 5940

Android 仿照QQ剪裁头像(完结篇)

转载请注明出处: http://blog.csdn.net/u014163726?viewmode=contents 本文出自Wrh的博客 闲扯最近刚好空闲下来又因为以前有人问到过这个仿qq上传头像的问题,抓紧时间撸出一篇博客 本章内容部分手势检测出自翔神的博客 本章内容匆忙赶出估计会有...
  • u014163726
  • u014163726
  • 2015-09-09 17:20
  • 2697

仿QQ圆头像裁剪开源项目——ClipCircleHeadLikeQQ

1.项目背景: 很多项目中用到的头像都是圆头像,圆头像使界面看起来更具有美感,比如QQ在整个应用中使用的就是圆头像。基本上每个应用都有上传头像的功能,在上传头像的时候需要对图片裁剪。虽然截取出来的图片实际上都是方图,但是在裁剪的时候如果能直观的让用户看到裁剪以后的圆头像的效果,体验就更好了。一像注重...
  • taotao110120119
  • taotao110120119
  • 2015-10-18 22:13
  • 4994

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

观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取; 本篇之所以为升级版,是在截取头像界面添加了与qq类似的阴影层(裁剪区域以外的部分),且看效果图:   为了适应大家不同需求,这次打了两个包,及上图中一个方形的头像截取demo和一个圆形的; 原理: 方形: 如图:...
  • HMYANG314
  • HMYANG314
  • 2015-03-04 10:29
  • 1525

Android:高仿QQ头像截取

花费了半天时间,把 仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧: 支持的功能:   &#...
  • HMYANG314
  • HMYANG314
  • 2015-03-03 15:03
  • 1820

Android 实现最新版QQ图像裁剪功能

实现最新版QQ圆形图像裁剪功能,功能待修复。
  • u014061684
  • u014061684
  • 2016-01-15 11:43
  • 20655
    个人资料
    • 访问:355671次
    • 积分:4780
    • 等级:
    • 排名:第7151名
    • 原创:95篇
    • 转载:10篇
    • 译文:0篇
    • 评论:393条
    我的微博
    微信公众号AndroidMax
    博客专栏
    最新评论