文档章节

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

yolinfeng
 yolinfeng
发布于 2015/02/24 11:24
字数 754
阅读 129
收藏 3
点赞 0
评论 0

文章来自于: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 圆角、圆形 ImageView 实现

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

Othershe
06/25
0
0
登录圆形头像之网络加载与缓存到本地

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

切切歆语
2016/12/20
8
0
 Android之圆形头像(实现相机拍摄+相册选择+图片裁剪功能)

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

FlyinTang
2016/09/26
722
1
图片处理工具

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

掘金官方
2017/12/11
0
0
Android, Picasso、Glide与头像

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

Sn__
04/23
0
0
Android 仿钉钉、微信 群聊组合头像

功能 生成类似钉钉、微信 群聊组合头像Bitmap 可使用图片资源id、bitmap或者使用url从网络加载,传入对应数组即可 网络加载时支持线程池 支持磁盘缓存、内存缓存 对图片资源进行采样率压缩 ...

Othershe
06/27
0
0
Android自定义控件(三)继承控件

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

Jack_1900
2014/07/13
0
3
Android实现本地上传图片并设置为圆形头像

我们在做项目的时候会用到圆形的图片,比如用户头像,类似QQ。用户在用QQ更换头像的时候,上传的图片都是矩形的,但显示的时候确是圆形的。那么这是如何实现的呢,下面我们就来探讨下吧。 先...

geeksuperwoman
2016/09/07
75
0
为什么有时候有个方形背景,有时候显示正常的圆形

这个人的头像,有时候会有方形的背景(图片左上角位置),即使多刷新几遍,还是改不回来,然后退出,重新进去,又回复到正常的圆形头像,方形背景消失,请问这是为什么哦?这人头像的imagevi...

天王盖地虎626
2015/05/26
337
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CVE-2013-0077 堆溢出分析

找了很久才发现这个环境比较容易搭建分析... 环境: 系统---Win XP SP3 漏洞程序:QQPlayer 3.7.892.400 出错DLL:quartz.dll 6.5.2600.5512 调试工具:x32db+gflag.exe 过程: 首先gflag设置...

Explorer0
1分钟前
0
0
python上传文件

//注意 <form action="/login/" method="post" enctype="multipart/form-data"> f=request.FILES.get('fafa') ff=open(f.name,mode='wb') for i in f.chunks(): ff.write(i) ff.close()......

南桥北木
13分钟前
0
0
CISCO VPN Client Reason 442 WIN8/10错误解决方案

http://jdkleo.iteye.com/blog/2163493 引用 http://my.oschina.net/cloudcoder/blog/220391?p={{currentPage 1}} 在使用cisco VPN 客户端登录时,产生Reason 442:Failedto enable Virtual......

chenfj_fer
16分钟前
0
0
信号量有没有容量限制?

之前一直误以为信号量初始化的时候那个初始化的值是信号量的“容量”,昨天同事指出了我的错误,最初我是不相信的,经过以下代码实践,证明了我的错误: Java版: import java.util.concurr...

锟斤拷烫烫烫
20分钟前
0
0
【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
31分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
今天
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
今天
1
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
今天
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
今天
0
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部