Android进阶学习-Canvas使用7行代码自定义圆形头像

效果图:

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

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

 

下面我们开始编码啦:

1.布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context="com.example.customview.BitmapProcessActivity" >

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="process"
        android:text="处理图片" />

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop" />

</LinearLayout>

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然后重写里面的图片设置方法,这样就可以先加工图片然后再去设置了

转载于:https://my.oschina.net/august1996/blog/679254