文档章节

Android ImageView圆形头像 图片完全解析

jimstin
 jimstin
发布于 2014/09/26 15:46
字数 714
阅读 1525
收藏 2

       我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ。用户在用QQ更换头像的时候,上传的图片都是矩形的,但显示的时候确是圆形的。

      原理:先在canvas上面画一个圆形,参照圆形的起点坐标、半径,再画一个边长为圆的直径的bitmap(这个bitmap就是你想画的圆形头像),此时圆和bitmap重叠在一起,圆在下面,bitmap在上面,bitmap覆盖着圆(如下图,其实圆是在bitmap后面的,看不到的。为了形象,我用ps搞了一个半透明圆效果)。

      关键点来了:这时,圆形和bitmap相交的部分正是圆大小的面积,如果能将bitmap与圆相交之外的部分去掉,那么我们看到的是不是bitmap的圆形部分?(如下图蓝色部分)

        搞清楚原理后,下面我门来看代码是怎么实现的。

    public Bitmap toRoundBitmap(Bitmap bitmap) {
    	//圆形图片宽高
    	int width = bitmap.getWidth();
    	int height = bitmap.getHeight();
    	//正方形的边长
    	int r = 0;
    	//取最短边做边长
    	if(width > height) {
    		r = height;
    	} else {
    		r = width;
    	}
    	//构建一个bitmap
    	Bitmap backgroundBmp = Bitmap.createBitmap(width,
                 height, Config.ARGB_8888);
    	//new一个Canvas,在backgroundBmp上画图
    	Canvas canvas = new Canvas(backgroundBmp);
		Paint paint = new Paint();
		//设置边缘光滑,去掉锯齿
		paint.setAntiAlias(true);
		//宽高相等,即正方形
		RectF rect = new RectF(0, 0, r, r);
		//通过制定的rect画一个圆角矩形,当圆角X轴方向的半径等于Y轴方向的半径时,
		//且都等于r/2时,画出来的圆角矩形就是圆形
		canvas.drawRoundRect(rect, r/2, r/2, paint);
		//设置当两个图形相交时的模式,SRC_IN为取SRC图形相交的部分,多余的将被去掉
		paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
		//canvas将bitmap画在backgroundBmp上
		canvas.drawBitmap(bitmap, null, rect, paint);
		//返回已经绘画好的backgroundBmp
        return backgroundBmp;
    }


      下面解释一下关键的几行代码:

canvas.drawRoundRect(rect, r/2, r/2, paint);


      这行代码是画一个圆角矩形,X、Y方向的圆角半径相等时,且长度为正方形边长的一半时,则画出来的圆角矩形就是圆,如下图:

对于这行代码,大家可以看看这篇文章http://book.51cto.com/art/201204/328272.htm

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

这行代码是设置图片相交时的模式,这篇文章有一张很好的图说明,http://trylovecatch.iteye.com/blog/1189452

canvas.drawBitmap(bitmap, null, rect, paint);

而这行代码则是画一个bitmap到canvas上面去,官方API

参数:src 可以为空,不为空时,canvas将bitmap画到该区域;

参数:dst 不为空,显示bitmap的显示区域。

如果src和dst的区域不一样,那么bitmap画的地方和显示的地方将不一样,即只能看到一部分bitmap。



© 著作权归作者所有

共有 人打赏支持
jimstin
粉丝 1
博文 2
码字总数 911
作品 0
深圳
程序员
私信 提问
Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等

 Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等 Android CustomShapeImageView是github上一个第三方开源的对图片进行各种样式裁剪的库,其要实现的功...

开开心心过
2015/11/30
0
0
AndroidGUI29:获取ImageView中的图像需要注意的问题

我们知道在Android中ImageView是一个用于显示图像的控件,比如在很多联系人方面的应用中,需要为联系人拍摄头像,并将得到的头像放在一个ImageView对象中显示。通常,在没有为联系人拍摄头像...

caikezhan
2012/12/23
0
0
Android, Picasso、Glide与头像

在实际开发中,经常会需要显示用户头像,下面就具体分析下用Picasso,显示头像的实现过程。 既然是头像,那么就必然会涉及到修改头像;如果app的功能相对来说较多,板块较杂,这个时候Picas...

Sn__
2018/04/23
0
0
图片处理工具

Android7.0 完美适配——FileProvider 拍照裁剪全解析 适配 android7.0 中的拍照相册裁剪功能 使用 photoView 实现可点击放大到全屏显示的控件,效果类似于微信朋友圈点开看大图 使用 photoV...

掘金官方
2017/12/11
0
0
Android自定义控件(三)继承控件

继承控件是我们Android开发中最重要也是最常使用的控件,它不同于自绘控件和组合控件,它不需要我们自己去重新去实现一个控件。面向对象的一个重要特性就是继承,相信各位同学对继承的了解都...

Jack_1900
2014/07/13
0
3

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript继承(二)——借用构造函数

JavaScript继承(一)——原型链中提出原型链继承的两个问题:一是原型的数据共享问题,二是创建子类型的实例时,不能向父类型的构造函数中传递参数。这两个问题的根源还是在于使用原型模式创...

Bob2100
10分钟前
0
0
day25:比较两个文件内容|杀进程|并发备份数据库|并发进程备份mysql库|监控全国CDN网站节点|

1、有两个文件 a.txt 和 b.txt,把 a.txt 中有的但 b.txt 中没有的行找出来,并写入列 c.txt,然后计算 c 的行数; 注释:比较两个文件两个文件不同,可以用的方法:diff md5sum grep -vf $1 $...

芬野de博客
26分钟前
0
0
抓包工具Charles

背景介绍 Charles是一款很实用,界面很友好(至少跟fiddler比起来),功能强大的抓包神器,因为它是基于 java 开发的,所以跨平台,Mac、Linux、Windows下都是可以使用的,并且在Android和i...

Jack088
27分钟前
0
0
徒手撸一个简单的RPC框架

徒手撸一个简单的RPC框架 之前在牛逼哄哄的 RPC 框架,底层到底什么原理得知了RPC(远程过程调用)简单来说就是调用远程的服务就像调用本地方法一样,其中用到的知识有序列化和反序列化、动态...

不学无数的程序员
48分钟前
1
0
Java 面试题目最全集合1000+ 大放送,能答对70%就去BATJTMD试试~

2019,相对往年我们会发现今年猎头电话少了,大部分企业年终奖缩水,加薪幅度也不如往年,选择好offer就要趁早,现在开始准备吧,刷一波Java面试题,能回答70%就去BATJTMD大胆试试~ 以下是2...

mikechen优知
53分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部