文档章节

从原理上去理解圆形头像 Android ImageView圆形头像 图片完全解析

yolinfeng
 yolinfeng
发布于 2015/02/24 11:24
字数 754
阅读 130
收藏 3

文章来自于:http://my.oschina.net/u/2241960/blog/321024

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


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


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


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

<span style="font-family:Microsoft YaHei;font-size:14px;">    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;
    }</span>
下面解释一下关键的几行代码:

<span style="font-family:Microsoft YaHei;font-size:14px;">canvas.drawRoundRect(rect, r/2, r/2, paint);</span>
这行代码是画一个圆角矩形,X、Y方向的圆角半径相等时,且长度为正方形边长的一半时,则画出来的圆角矩形就是圆,如下图:



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

<span style="font-family:Microsoft YaHei;font-size:14px;">paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));</span>

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

<span style="font-family:Microsoft YaHei;font-size:14px;">canvas.drawBitmap(bitmap, null, rect, paint);</span>

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


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

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

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


本文转载自:http://blog.csdn.net/zhangjm_123/article/details/42025991

共有 人打赏支持
yolinfeng
粉丝 12
博文 196
码字总数 11946
作品 0
珠海
架构师
Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等

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

开开心心过
2015/11/30
0
0
 Android之圆形头像(实现相机拍摄+相册选择+图片裁剪功能)

转载请标明出处https://my.oschina.net/FlyinTang/blog/751595 最近的一些学习心得 功能实现:点击圆形头像之后可以实现相册上传或者开启相机,然后把得到的图片经过剪裁,把剪裁过的图片设置...

FlyinTang
2016/09/26
722
1
登录圆形头像之网络加载与缓存到本地

Android开发中常常有用户头像显示,似乎大多数都是圆形显示,如果每次加载网络头像,会频繁的请求网络,所以本文主要说的是登录时的头像网络加载和缓存到本地,以便于下次加载时直接从本地获...

切切歆语
2016/12/20
8
0
Android 圆角、圆形 ImageView 实现

一、 特点 基于AppCompatImageView扩展 支持圆角、圆形显示 可绘制边框,圆形时可绘制内外两层边框 支持边框不覆盖图片 可绘制遮罩 ...... 二、基本原理 我们要实现的图片控件继承自,它是的...

Othershe
06/25
0
0
图片处理工具

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

掘金官方
2017/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

GO冒泡,二分查找

package mainimport("fmt")func main() {var arr [5]int = [5]int{11,13,9,2,25}maopao(&arr)fmt.Println("arr = ", arr) //[2 9 11 13 25]findIndex := binaryFind(&arr, 0......

汤汤圆圆
10分钟前
1
0
工作2年半跳槽面试阿里,成功拿到offer,凭什么?

2015年刚毕业的我,进入了一家小小的公司实习工作,在学校学了三年软件开发的我,还是想去寻找一份互联网行业的工作,这样更能学以致用发挥自己的特长。一直到18年三月份,我辞掉已有的工作,...

java知识分子
14分钟前
1
0
讲述下:Linux的10个最危险的命令

导读 Linux命令行佷有用、很高效,也很有趣,但有时候也很危险,尤其是在你不确定你自己在正在做什么时候。这篇文章将会向你介绍十条命令,但你最好不要尝试着去使用。 当然,以下命令通常都...

问题终结者
18分钟前
1
0
分库分表后如何部署上线?

引言 我们先来讲一个段子 面试官:“有并发的经验没?” 应聘者:“有一点。” 面试官:“那你们为了处理并发,做了哪些优化?” 应聘者:“前后端分离啊,限流啊,分库分表啊。。” 面试官:...

Java烂猪皮
23分钟前
1
0
Redis源码阅读笔记-快速列表

快速列表 快速列表(quicklist)是由压缩列表(ziplist)组成的一个双向链表,链表中,每一个节点都是以压缩列表(ziplist)的结构保存。 在 Redis3.2 后加入的新数据结构,在列表键中取代了双向链...

Jian_Ming
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部