文档章节

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

yolinfeng
 yolinfeng
发布于 2015/02/24 11:24
字数 754
阅读 137
收藏 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开发中常常有用户头像显示,似乎大多数都是圆形显示,如果每次加载网络头像,会频繁的请求网络,所以本文主要说的是登录时的头像网络加载和缓存到本地,以便于下次加载时直接从本地获...

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

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

FlyinTang
2016/09/26
722
1
Android 圆角、圆形 ImageView 实现

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

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

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

掘金官方
2017/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用 top instance 命令查看运行中 MaxCompute 作业

我们都知道,在 MaxCompute Console 里,可以使用下面的命令来列出运行完成的 instance 列表。 show p|proc|processlist [from <yyyy-MM-dd>] [to <yyyy-MM-dd>] [-p <project>] [-limit <nu......

阿里云云栖社区
9分钟前
1
0
PostgreSQL SSL证书生成与启用

ref: https://yq.aliyun.com/articles/14965

YuanyuanL
10分钟前
1
0
了解 BFC

概念 MDN中的定义 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。 具有 BF...

小草先森
12分钟前
1
0
使用MaxCompute Java SDK 执行任务卡住了,怎么办?

场景一 用户A A: “亲,用 MaxCompute Java SDK 跑作业,为什么卡住不动了?” me: “有 Logview 吗?发来看下” A: “没有,我用的是SDK,没Logview” 场景二 用户B B :“亲,用 MaxCompu...

阿里云官方博客
21分钟前
1
0
使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

郭恩洲_OSC博客
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部