一、 前言
在实际项目中,用户头像,音乐专辑都有可能用到圆形,菱形等无规则图像,需要自己自定义View实现相应的功能。
二、思路
需求:制作圆角菱形的图片
思路:
1、绘制出圆角矩形的遮罩层;
2、将矩形旋转45°;
3、使用画笔的PorterDuffXfermode的SRC_IN属性;
4、将图片绘制遮罩层上。
三、知识点PorterDuffXfermode
PorterDuffXfermode在网上有许多讲解它的文章,这里只讲解最常用的两种模式SRC_IN和DST_IN。
SRC_IN:【本文所用的模式】显示底层图像和上方图像的相交区域,且显示的是上方图像。如图所示,先绘制出黄色的底层图像,再绘制出蓝色的图像,设置的模式为SRC_IN,则显示的是两张图像相交的扇形区域,且为上层蓝色图像。
DST_IN:显示底层图像和上方图像的相交区域,且显示的是底层图像。如图所示,先绘制出黄色的底层图像,再绘制出蓝色的图像,设置的模式为DST_IN,则显示的是两张图像相交的扇形区域,且为底层黄色图像。
四、实现
1、根据图片的大小绘制出圆角矩形的遮罩层;
// 创建图片
mImageBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.picture);
// 获取图片的宽高
mWidth = mImageBitmap.getWidth();
mHeight = mImageBitmap.getHeight();
mMaskBitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
Canvas maskCanvas = new Canvas(mMaskBitmap);
mPaint = new Paint();
mPaint.setColor(Color.YELLOW);