zoukankan      html  css  js  c++  java
  • 【转】Android ImageView圆形头像

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

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

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

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

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

     1         public Bitmap toRoundBitmap(Bitmap bitmap) {  
     2             //圆形图片宽高  
     3             int width = bitmap.getWidth();  
     4             int height = bitmap.getHeight();  
     5             //正方形的边长  
     6             int r = 0;  
     7             //取最短边做边长  
     8             if(width > height) {  
     9                 r = height;  
    10             } else {  
    11                 r = width;  
    12             }  
    13             //构建一个bitmap  
    14             Bitmap backgroundBmp = Bitmap.createBitmap(width,  
    15                      height, Config.ARGB_8888);  
    16             //new一个Canvas,在backgroundBmp上画图  
    17             Canvas canvas = new Canvas(backgroundBmp);  
    18             Paint paint = new Paint();  
    19             //设置边缘光滑,去掉锯齿  
    20             paint.setAntiAlias(true);  
    21             //宽高相等,即正方形  
    22             RectF rect = new RectF(0, 0, r, r);  
    23             //通过制定的rect画一个圆角矩形,当圆角X轴方向的半径等于Y轴方向的半径时,  
    24             //且都等于r/2时,画出来的圆角矩形就是圆形  
    25             canvas.drawRoundRect(rect, r/2, r/2, paint);  
    26             //设置当两个图形相交时的模式,SRC_IN为取SRC图形相交的部分,多余的将被去掉  
    27             paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  
    28             //canvas将bitmap画在backgroundBmp上  
    29             canvas.drawBitmap(bitmap, null, rect, paint);  
    30             //返回已经绘画好的backgroundBmp  
    31             return backgroundBmp;  
    32         }  

     

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

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

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

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

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

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

     1 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

  • 相关阅读:
    join()方法作用
    多线程的运行状态
    守护线程和非守护线程
    多线程快速入门
    Spring Boot2.0之注解方式启动Springmvc
    Spring Boot2.0之 原理—创建内置Tomcat容器
    Spring Boot2.0之纯手写框架
    Sprin Boot2.0之整合Mybatis整合分页插件
    linux下通过acl配置灵活目录文件权限(可用于ftp,web服务器的用户权限控制)
    PHP编程效率的20个要点
  • 原文地址:https://www.cnblogs.com/chq3272991/p/5302790.html
Copyright © 2011-2022 走看看