Android用Canvas使用7行代码自定义圆形头像

效果图

效果图

简介

首先是要提一下Paint这个类的一个特效处理类PorterDuffXfermode
它有点像数学集合中的交集并集概念.它的模式控制着两个图像间图层的交集区域显示方式.下面很好地展示了它的16种mode：

mode

怎么去理解这张图?
先看第一行的第二个和第三个,其中dst是表示先画的那张图,而src是后来画的,不过这里都是表示模式的意思.如果你不理解这是什么鸟玩意,请看下去,当你看到下面的代码的时候你会回到这里再次理解的啦.然后除了第一行的1 2 3张图外.

编码

布局文件

图片

素材

Activity代码

package com.example.customview;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class BitmapProcessActivity extends Activity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bitmap_process);
        
    }
    
    public void process(View v) {
        Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.jpg);
        /**
         * 那张美女图片,src
         */
        
        Bitmap mOut = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        /**
         * 那个遮罩层,dst 等下我们的美女图片会画在这个遮罩层上面 如果遮罩层是圆的,我们画出来的就是遮罩层圆的那部分
         * 如果遮罩层是圆角矩形的,我们画出来的就是圆角矩形的 就是说我们的src会在dst的所属区域内画画,超出dst区域范围内的裁剪掉
         */
        
        Canvas canvas = new Canvas(mOut);
        /**
         * 在遮罩层上面创建画布,现在遮罩层是什么都没有的
         */
        
        Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawCircle(mBitmap.getWidth() / 2, mBitmap.getHeight() / 2, mBitmap.getWidth() / 2, mPaint);
        /**
         * 把遮罩层的区域画出来
         */
        
        mPaint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(mBitmap, 0, 0, mPaint);
        /**
         * 这里就是使用SRC_IN的方法把美女图片画到dst上,不属于dst的区域内的部分裁剪掉
         */
        
        ((ImageView) findViewById(R.id.img)).setImageBitmap(mOut);
        /**
         * 这里就可以设置啦,是否需要倒回去看看那16种模式???
         */

    }
}

最后大家可以自定义View去继承ImageView然后重写里面的图片设置方法,这样就可以先加工图片然后再去设置了