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

时间:2022-09-01 17:40:27

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

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

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

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

原理:

方形:

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

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

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

主要代码如下:

@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:抠出重叠区域

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

实现思路:

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

画的有点乱,先凑合着看,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);

这样做的目的是在选择完图片进行初始化时,图片宽或高正好卡在裁剪框内,效果如图:

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



其中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数值越小越透明),或者设置画笔颜色为透明色:

效果如下:

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

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


2015-10-12:

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

示意图:

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

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

修改裁剪区mVerticalPadding计算方法:

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

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

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

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

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

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

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


安卓高仿QQ头像截取升级版的更多相关文章

  1. 高仿QQ头像截取

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

  2. Android 高仿微信头像截取 打造不一样的自定义控件

    转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/39761281,本文出自:[张鸿洋的博客] 1.概述 前面已经写了关于检测手势识别 ...

  3. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  4. 史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  5. Android实现高仿QQ附近的人搜索展示

    本文主要实现了高仿QQ附近的人搜索展示,用到了自定义控件的方法 最终效果如下 1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollVi ...

  6. 高仿QQ的即时通讯应用带服务端软件安装

    Android 基于xmpp协议,smack包,openfire服务端(在下面)的高仿QQ的即时通讯实现.实现了注册,登录,读取好友列表,搜索好友,添加分组,添加好友,删除好友,修改心情,两个客户端之 ...

  7. 高仿QQ即时聊天软件开发系列之二登录窗口界面

    继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...

  8. 高仿QQ即时聊天软件开发系列之一开端

    前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部 ...

  9. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

随机推荐

  1. &lt&semi;c ss高效开发实战&gt&semi;看完了,Bootstrap学习是关键

    Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...

  2. python 递归

    学习python,正好用一个例子练习一下递归. 参考文档: http://www.runoob.com/python/python-exercise-example18.html 题目:求s=a+aa ...

  3. 序列dp笔记&Sqrt;

    例题: http://www.cnblogs.com/gc812/p/5792181.html http://www.cnblogs.com/gc812/p/5792217.html

  4. javascript --执行上下文&comma;作用域

    执行上下文 顾名思意就知道他是动态的,只在代码运行的时候产生 作用域 顾名思意就知道它是一个"领域",并且这个"领域"在一开始就规划好, 不会在改, var d ...

  5. struts2启动报错com&sol;opensymphony&sol;xwork2&sol;spring&sol;SpringObjectFactory&period;java&colon;220&colon;-1

    好久没有搞struts2,今天配置strut2.2.1,启动时遇到个小问题.记录下. tomcat启动报错: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...

  6. 小程序大智慧,sqlserver 注释提取工具

    原文:小程序大智慧,sqlserver 注释提取工具 开篇背景 我习惯在写表的创建脚本时将注释直接写在脚本里,比如 /*账套*/ CREATE TABLE [dbo].[AccountingBook] ...

  7. Linux 运行级别

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/47 运行级别 不同运行级别的描述 运行级别0:系统停机状态,系统 ...

  8. Excel条件格式

    任务需求,将Excel中年龄为90后出生的人员筛选出来,并将重复的人员数据删除. 一.Excel去重 选中表格数据->数据->删除重复值 此时弹出对话框,选择去重列. 点击确定即可. 二. ...

  9. 【BZOJ1821】&lbrack;JSOI2010&rsqb;部落划分(二分,并查集)

    [BZOJ1821][JSOI2010]部落划分(二分,并查集) 题面 BZOJ 洛谷 题解 二分答案,把距离小于二分值的点全部并起来,\(\mbox{check}\)一下是否有超过\(K\)个集合就 ...

  10. 配置阿里云ESC服务器部署项目

    第一次SSH登录 ECS 服务器: 打开命令行终端(git),键入: > ssh root@39.108.54.110 输入实例密码,进入服务器环境. 配置 root 及应用账号权限 新增管理员 ...