几行代码简单搞定圆形图片

在工作中我们经常会用到圆形的图片，但是大部分的图片都是方形的，这就需要工程师去自定义圆形图片，好的圆形图片库有很多，大家可以在github或者泡网等网站上搜一下。今天要说的就是简单几行代码搞定圆形图片，既然是简单当然就没有考虑各种花哨的属性，以及可扩展性。
首先我的原图是一张盛开的方形的花朵：

image.png

下面我们就来用两种方式实现简单几行代码搞定圆形图片，且看方式一:

package com.ebanswers.iqcore;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by air on 2017/8/24.
 */

public class CirImageView extends ImageView {
    private int mWidth, mHeight;

    public CirImageView(Context context) {
        this(context, null);
    }

    public CirImageView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CirImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;//获取宽度
        mHeight = h;//获取高度  
        setScaleType(ScaleType.CENTER_CROP);//设置缩放类型
    }


    @Override
    protected void onDraw(Canvas canvas) {  
        /*
         *super.onDraw(canvas);以上的代码部分即为关键所在
         *思路是：在图片绘制之前先将画布裁剪成圆形的，然后绘制在该画布上的图片不就是圆的了吗？
         *注意一定要在绘制之前进行裁剪操作，如果在 super.onDraw(canvas);之后进行则无效果
         */        
        Path path = new Path();
        path.addCircle(mWidth / 2, mHeight / 2, Math.min(mWidth / 2, mHeight / 2), Path.Direction.CCW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}  

看看运行效果如何:

image.png

再来看看方式二，利用PorterDuff.Mode来实现：

package com.ebanswers.iqcore;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by air on 2017/8/24.
 */

public class CirImageViewTwo extends ImageView {
    private Paint mPaint;
    private int mWidth, mHeight;

    public CirImageViewTwo(Context context) {
        this(context, null);
    }

    public CirImageViewTwo(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CirImageViewTwo(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        setScaleType(ScaleType.CENTER_CROP);
    }


    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿
        mPaint.setDither(true);//设置防止抖动
        mPaint.setAlpha(0);//设置Alpha等于0
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //在新的layer上进行绘制
        int id = canvas.saveLayer(0,0,mWidth,mHeight,null);
        canvas.drawColor(Color.WHITE);
        canvas.drawCircle(mWidth / 2, mHeight / 2, Math.min(mWidth / 2, mHeight / 2), mPaint);
        canvas.restoreToCount(id);
    }
}

运行效果：

image.png

眼尖的朋友会发现圆形图片背景是是白色的，没错因为canvas.drawColor(Color.WHITE);设置了颜色为白色，至于PorterDuff.Mode的讲解可以看看我的 另一篇文章。本篇仅仅介绍了最简单的实现方式，只作为一种思路的记录，可以基于此完善扩展。