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

我们在做项目的时候会用到圆形的图片,比如用户头像,类似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画到该区域;

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

其他类似demo:

http://www.tuicool.com/articles/mQNFJ3

转载自:http://m.oschina.net/blog/321024

【转】Android ImageView圆形头像的更多相关文章

  1. Android ImageView圆形头像

    转载自:http://m.oschina.net/blog/321024 Android ImageView圆形头像 图片完全解析 我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ.用户在用 ...

  2. 【Android】自己定义圆形ImageView(圆形头像 可指定大小)

    近期在仿手Q的UI,这里面常常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这样的头像的原理.只是里面提供的方法另一个不足的地方就是不能依据实际需求改变图片的 ...

  3. Android自定义ImageView圆形头像

    效果图: 代码如下: RoundImageView.java import cn.comnav.evaluationsystem.R; import android.content.Context; ...

  4. Android之圆形头像裁切

    PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...

  5. Android -- 自定义ImageView(圆形头像)

    1.  原图

  6. Android 圆形头像 自己动手

    圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...

  7. Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸

    Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...

  8. Android自定义控件实例,圆形头像(图库 + 裁剪+设置),上传头像显示为圆形,附源码

    Android项目开发中经常会遇见需要实现圆角或者圆形的图片功能,如果仅仅使用系统自带的ImageView控件显然无法实现此功能,所以通过系列文章的形式由简到繁全方位的介绍一下此功能的实现,巩固一下自 ...

  9. Android CircleImageView圆形ImageView

     Android CircleImageView圆形ImageView CircleImageView是github上一个第三方开源的实现圆形ImageView的项目.其在github上的项目主页 ...

随机推荐

  1. 【BZOJ2044】三维导弹拦截 DP+(有上下界的)网络流

    [BZOJ2044]三维导弹拦截 Description 一场战争正在A国与B国之间如火如荼的展开. B国凭借其强大的经济实力开发出了无数的远程攻击导弹,B国的领导人希望,通过这些导弹直接毁灭A国的指 ...

  2. 《从零开始学Swift》学习笔记(Day 16)——字典集合

    原创文章,欢迎转载.转载请注明:关东升的博客        Swift字典表示一种非常复杂的集合,允许按照某个键来访问元素.字典是由两部分集合构成的,一个是键(key)集合,一个是值(value)集合 ...

  3. Java 科学计数法

    目录 Java 科学计数法 1 科学计数法的概念 1.1 有效数字 1.2 E记号 2 Java中的科学计数法 2.1 NumberFormat 2.2 DecimalFormat 2.3 BigDe ...

  4. xx云网络实施方案案例

    由于xx云在我公司进行试用,对接我方存储,于是乎就负责网络实施方案,下面是具体方案介绍 ip分配 具体网络拓扑如下: 下面是两台交换机配置 IPMI交换机配置如下: [Quidway]di cu !S ...

  5. C++ Primer笔记14_面向对象程序设计

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/scottly1/article/details/31371611 OOP概述 面向对象程序设计(ob ...

  6. 关于 Content-Type:application/x-www-form-urlencoded 和 Content-Type:multipart/related(转)

    转至:http://www.cnblogs.com/taoys/archive/2010/12/30/1922186.html application/x-www-form-urlencoded: 窗 ...

  7. Loadrunder脚本篇——webservice接口测试(二)

    1.选择协议--Web Service,如下图 2.导入服务 入口1:点击Manage Services ->弹出窗中选择“Import” ->弹出窗中选择“URL”,填写wsdl地址,导 ...

  8. loadrunder之脚本篇——接口传参为本地文件

    导言 前几天需要对公司一个专门很重要的接口进行压测,这个还不是重点,重点是传参为本地的图片!刚刚开始通过web_custom_request()函数来解决,可是脚本并不能通过!后面又百度不到答案,通过 ...

  9. java WordUtils word文档工具类

    package com.sicdt.library.core.utils; import java.io.ByteArrayOutputStream; import java.io.IOExcepti ...

  10. python tkinter组件学习

    http://blog.csdn.net/pfm685757/article/details/50162567