制作圆形图片，你会以下几种？

我的CSDN博客同步发布:制作圆形图片，你会以下几种？

转载请注明出处：【huachao1001的简书：http://www.jianshu.com/users/0a7e42698e4b/latest_articles】

说起圆角图片，相信每个人心中都有自己的圆角图片制作方法。但是你是否想知道，除了你所会的那几张方法以外，还什么什么方法制作圆形图片呢？我们一一学习~

1 XferMode

关于通过使用XferMode方式创建圆形图片，hongyang大神的《 Android Xfermode 实战实现圆形、圆角图片》有讲，我这里大致把思路总结一下，我们知道，XferMode主要是将2张图片合在一起，由用户自己决定是选中图片重叠的部分还是非重叠的部分，可以参考Android官方提供的图片：

Xfermode原理

我们可以选择DstIn的方式来绘制圆形图，即在我们的原图上面再画一个实心圆形图，首先，我们先写一个函数，用于生成实心圆形的Bitmap：

private Bitmap mCircleBitmap;
    
    //生成一个实心圆形Bitmap,这个Bitmap宽高要与当前的View的宽高相同
    private Bitmap getCircleBitmap() {
        if (mCircleBitmap == null) {
            mCircleBitmap = Bitmap.createBitmap(2 * mRadius, 2 * mRadius,
                    Config.ARGB_8888);
            Canvas canvas = new Canvas(mCircleBitmap);

            mPaint.reset();
            mPaint.setStyle(Style.FILL);
            canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
        }
        return mCircleBitmap;
}

然后，再将这个Bitmap“盖”到用户设置的图片上面：

//将两张图片以XferMode（DST_IN）的方式组合到一张照片中
    private Bitmap combineBitmap(Drawable drawable, Bitmap maskBitmap) {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        // 将drawable转bitmap
        Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        //将图片自动放缩到View的宽高，即2倍的半径
        drawable.setBounds(0, 0, mRadius*2, mRadius*2);
        drawable.draw(canvas);

        // 先将XferMode设置好，然后将盖在上面的bitmap绘制出来
        mPaint.reset();
        mPaint.setXfermode(xfermode);
        canvas.drawBitmap(maskBitmap, 0, 0, mPaint);
        mPaint.setXfermode(null);

        return bitmap;
    }

最后再将最终的Bitmap绘制到画板上面：

@Override
    protected void onDraw(Canvas canvas) {
        //获取设置的src图片
        Drawable drawable = getDrawable();
        //获取盖在src上面的实心圆形Bitmap
        Bitmap circleBitmap = getCircleBitmap();
        
        //两张图片以XferMode（DST_IN）的方式组合
        Bitmap bitmap = combineBitmap(drawable, circleBitmap);

        //将最终的bitmap画到画板上面
        canvas.drawBitmap(bitmap, 0, 0, mPaint);

    }

看看完整的代码吧~

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Xfermode;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class XfermodeCircleImage extends ImageView {
    private int mRadius;
    private Paint mPaint;
    private Xfermode xfermode;
    private Bitmap mCircleBitmap;

    public XfermodeCircleImage(Context context) {
        super(context);
        init();
    }

    public XfermodeCircleImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint();
        xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        if (width > height) {
            mRadius = height / 2;
        } else {
            mRadius = width / 2;
        }

        setMeasuredDimension(mRadius * 2, mRadius * 2);
    }

    //生成一个实心圆形Bitmap,这个Bitmap宽高要与当前的View的宽高相同
    private Bitmap getCircleBitmap() {
        if (mCircleBitmap == null) {
            mCircleBitmap = Bitmap.createBitmap(2 * mRadius, 2 * mRadius,
                    Config.ARGB_8888);
            Canvas canvas = new Canvas(mCircleBitmap);

            mPaint.reset();
            mPaint.setStyle(Style.FILL);
            canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
        }
        return mCircleBitmap;
    }
    
    //将两张图片以XferMode（DST_IN）的方式组合到一张照片中
    private Bitmap combineBitmap(Drawable drawable, Bitmap maskBitmap) {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        // 将drawable转bitmap
        Bitmap bitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        //将图片自动放缩到View的宽高，即2倍的半径
        drawable.setBounds(0, 0, mRadius*2, mRadius*2);
        drawable.draw(canvas);

        // 先将XferMode设置好，然后将盖在上面的bitmap绘制出来
        mPaint.reset();
        mPaint.setXfermode(xfermode);
        canvas.drawBitmap(maskBitmap, 0, 0, mPaint);
        mPaint.setXfermode(null);

        return bitmap;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获取设置的src图片
        Drawable drawable = getDrawable();
        //获取盖在src上面的实心圆形Bitmap
        Bitmap circleBitmap = getCircleBitmap();
        
        //两张图片以XferMode（DST_IN）的方式组合
        Bitmap bitmap = combineBitmap(drawable, circleBitmap);

        //将最终的bitmap画到画板上面
        canvas.drawBitmap(bitmap, 0, 0, mPaint);

    }

}

对自定义View不熟的童鞋可以参考《自定义View，有这一篇就够了》。最后看看效果吧~

圆角图片

2 BitmapShader

同样的，hongyang大神也写过关于BitmapShader方式绘制圆形图片《 Android BitmapShader 实战实现圆形、圆角图片》，我们同样来个简单总结，Shader翻译成中文叫“着色器”，而我们的BitmapShader是Shader的子类，BitmapShader有啥作用呢，它可以根据你设置的方式（下面介绍）将图片铺满你所选的区域，有哪几种方式“铺”呢？有以下几种：
（1）CLAMP：拉伸，在x方向上是图片的最后一列像素重复平铺，而y方向是最后一行往下拉伸
（2）REPEAT：重复，很容易理解，图片重复平铺过去
（3）MIRROR：镜像，就是将图片翻转

我们来看几张图片感受一下：
CLAMP的方式：

CLAMP方式对应的效果

REPEAT方式

REPEAT方式对应的效果

MIRROR方式

MIRROR方式对应的效果

使用BitmapShader制作圆形图片的方法非常简单，只需通过Bitmap构造出一个BitmapShader，并将这个BitmapShader设置到当前的Paint当中，用这个Paint绘制一个圆就可以了，先看看onDraw函数：

    @Override
    protected void onDraw(Canvas canvas) {
        // 将Drawable转为Bitmap
        Bitmap bmp = drawableToBitmap(getDrawable());
        // 通过Bitmap和指定x,y方向的平铺方式构造出BitmapShader对象
        BitmapShader mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP,
                TileMode.CLAMP);
        // 将BitmapShader设置到当前的Paint对象中
        mPaint.setShader(mBitmapShader);
        // 绘制出一个圆
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

    }

其中，drawableToBitmap是将Drawable对象转为Bitmap对象：

private Bitmap drawableToBitmap(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
    } else {
        int width = drawable.getIntrinsicWidth();
        int height = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(width, height,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, width, height);
        drawable.draw(canvas);
        return bitmap;
    }
}

我们看看完整代码吧

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class ShaderCircleImage extends ImageView {

    private int mRadius;
    private Paint mPaint;

    public ShaderCircleImage(Context context) {
        super(context);
        init();
    }

    public ShaderCircleImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        if (width > height) {
            mRadius = height / 2;
        } else {
            mRadius = width / 2;
        }

        setMeasuredDimension(mRadius * 2, 2 * mRadius);
    }

    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        } else {
            int width = drawable.getIntrinsicWidth();
            int height = drawable.getIntrinsicHeight();
            Bitmap bitmap = Bitmap.createBitmap(width, height,
                    Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            drawable.setBounds(0, 0, mRadius*2, mRadius*2);
            drawable.draw(canvas);
            return bitmap;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 将Drawable转为Bitmap
        Bitmap bmp = drawableToBitmap(getDrawable());
        // 通过Bitmap和指定x,y方向的平铺方式构造出BitmapShader对象
        BitmapShader mBitmapShader = new BitmapShader(bmp, TileMode.CLAMP,
                TileMode.CLAMP);
        // 将BitmapShader设置到当前的Paint对象中
        mPaint.setShader(mBitmapShader);
        // 绘制出一个圆
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

    }
}

最后是要看看效果的，但是效果跟前面的效果是一样的，我们还是看一下吧~

圆角图片

3 ClipPath

前面的2中方法我们都见过，我们在看另一种方法吧ClipPath，或许你听说过Canvas对象的clipPath方法，或者是用过这个方法，可是有没有想过这个方法也可以用来绘制圆形图片呢？

我们看看代码吧：

@Override
protected void onDraw(Canvas canvas) {
    // 将Drawable转为Bitmap
    Bitmap bmp = drawableToBitmap(getDrawable());
    Path path = new Path(); 
    //按照逆时针方向添加一个圆
    path.addCircle(mRadius, mRadius, mRadius, Direction.CCW);
    //先将canvas保存
    canvas.save();
    //设置为在圆形区域内绘制
    canvas.clipPath(path);
    //绘制Bitmap
    canvas.drawBitmap(bmp, 0, 0, mPaint);
    //恢复Canvas
    canvas.restore();
}

是不是如此简单？过于简单，注释已经写明各行代码的意思啦！drawableToBitmap函数在上面一节解释过啦，这里就不再重复解释了，看看完整代码吧：

package com.hc.circleimage;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class ClipCircleImage extends ImageView {
    private int mRadius;
    private Paint mPaint;

    public ClipCircleImage(Context context) {
        super(context);
        init();
    }

    public ClipCircleImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        if (width > height) {
            mRadius = height / 2;
        } else {
            mRadius = width / 2;
        }

        setMeasuredDimension(mRadius * 2, 2 * mRadius);
    }

    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        } else {
            int width = drawable.getIntrinsicWidth();
            int height = drawable.getIntrinsicHeight();
            Bitmap bitmap = Bitmap.createBitmap(width, height,
                    Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            drawable.setBounds(0, 0, mRadius*2, mRadius*2);
            drawable.draw(canvas);
            return bitmap;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 将Drawable转为Bitmap
        Bitmap bmp = drawableToBitmap(getDrawable());
        Path path = new Path(); 
        //按照逆时针方向添加一个圆
        path.addCircle(mRadius, mRadius, mRadius, Direction.CCW);
        //先将canvas保存
        canvas.save();
        //设置为在圆形区域内绘制
        canvas.clipPath(path);
        //绘制Bitmap
        canvas.drawBitmap(bmp, 0, 0, mPaint);
        //恢复Canvas
        canvas.restore();
    }
}

效果虽然跟上面两节是一样的，但是我们还是看一下效果吧~

圆角图片

4 Alpha提取

现在我们看看一个很少见的方法，这个方法也是我不怎么推荐的方法，它是通过将一个张图的Alpha通道值设置到另外一张图中，啥意思呢？就是说，将两张图片的透明度设置为一模一样！看上去很酷的样子_{，虽然不推荐，但是我们可以去学习一下嘛}可能某些项目需求中只能用这种方法去实现呢？

//获取圆形Bitmap
private Bitmap getCircleMask() {
    Bitmap bitmap = Bitmap.createBitmap(mRadius * 2, mRadius * 2,
            Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
    return bitmap;
}
//将rgbBitmap的RGB值与alphaBitmap的alpha值组成新的Bitmap
private Bitmap getBitmap(Bitmap rgbBitmap, Bitmap alphaBitmap) {
    Bitmap newBmp = Bitmap.createBitmap(mRadius * 2, mRadius * 2,
            Config.ARGB_8888);

    int alphaMask = 0xFF << 24;
    int rgbMask = ~alphaMask;
    for (int x = 0; x < 2 * mRadius; x++) {
        for (int y = 0; y < 2 * mRadius; y++) {
            int color = (rgbMask & rgbBitmap.getPixel(x, y))
                    | (alphaMask & alphaBitmap.getPixel(x, y));
            newBmp.setPixel(x, y, color);
        }

    }
    return newBmp;
}

@Override
protected void onDraw(Canvas canvas) {
    // 将Drawable转为Bitmap
    Bitmap rgbBitmap = drawableToBitmap(getDrawable());
    //提取alpha值通道
    Bitmap alphaBitmap = getCircleMask().extractAlpha();
    //将最终图片绘制出来
    canvas.drawBitmap(getBitmap(rgbBitmap, alphaBitmap), 0, 0, mPaint);
}

我们可以看到，通过两个for循环来新建合成一个新的图片，这个效率非常的低下！！！！！实际中不推荐采用这种方式，当然了，我们可以通过使用RenderScript并行处理，最终效率也不会比前面3种方法差！最终效果我就不贴上来了，依然是与前面几种方法是相同的

最后，把源码献上：http://download.csdn.net/detail/huachao1001/9541176

最后编辑于：2017.12.03 06:17:00

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,723评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,003评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,512评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,825评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,874评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,841评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,812评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,582评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,033评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,309评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,450评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,158评论 5赞 341
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,789评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,409评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,609评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,440评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,357评论 2赞 352

制作圆形图片，你会以下几种？

1 XferMode

2 BitmapShader

3 ClipPath

4 Alpha提取

推荐阅读更多精彩内容