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

  • 相关阅读:
    366. Find Leaves of Binary Tree输出层数相同的叶子节点
    716. Max Stack实现一个最大stack
    515. Find Largest Value in Each Tree Row查找一行中的最大值
    364. Nested List Weight Sum II 大小反向的括号加权求和
    156. Binary Tree Upside Down反转二叉树
    698. Partition to K Equal Sum Subsets 数组分成和相同的k组
    244. Shortest Word Distance II 实现数组中的最短距离单词
    187. Repeated DNA Sequences重复的DNA子串序列
    java之hibernate之基于主键的双向一对一关联映射
    java之hibernate之基于主键的单向一对一关联映射
  • 原文地址:https://www.cnblogs.com/chq3272991/p/5302790.html
Copyright © 2011-2022 走看看