这几天看了项目框架里面的圆形头像，发现其实这个东西并不是很难的东西，学会了原理，无论圆形头像，五角星头像都可以实现。

目前我上传的Demo里用了两种实现方式，那么我们分别来讲讲这两种实现方式：

BitmapShader

Shader其实是遮罩的意思，能帮助我们在表层对图像进行简单处理，而无需那些深层的opengl，关于Shader，如需深入了解请参考sunqunsunqun的CSDN博客

基础知识准备Shader的实现：

BitmapShader 图片填充某一区域(三种模式，拉伸，重叠，镜像)，下面详讲

ComposeShader 这个是用来混合其他Shader的

LinearGradient 可实现某区域的线性渐变效果

RadialShaderGradient 某一区域实现环形渐变

SweepGradient 是指在某一中心以x轴正方向逆时针旋转一周而形成的扫描效果的渲染形式(不深入研究)

接下来详细讲讲BitmapShader：

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

这是BitmapShader的构造函数，bitmap参数就是我们要处理的图片，TileMode有三个

CLAMP 拉伸

REPEAT 重复

MIRROR 镜像重复

一般情况下如果绘制区域大于我们的bitmap时这些参数会起效，反之则无效果

CLAMP参数起效的情况下，是按照边缘像素进行拉伸的，这一点如果使用过.9图的应该比较清楚

所以我们实现圆形头像的关键就是对源图的合理缩放与拉伸，因为drawXXX已经决定了图形的形状

BitmapShader实现圆形图像的过程

首先为了简便，我们继承ImageView，省略一些测量函数的重写，其次因为圆形就会带有半径的参数，圆角就会带角的半径参数，因此我们要自定义两个属性，一个是图形类型，这里只实现圆形与圆角矩形

r

接下来在构造函数内获得这两个属性的值

private void init(Context context, AttributeSet attrs) {

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);

type = ta.getInt(R.styleable.RoundImageView_type, TYPE_CIRCLE);

roundRadius = ta.getDimensionPixelSize(R.styleable.RoundImageView_cornerRadius, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10, getResources().getDisplayMetrics())); ta.recycle();

}

这个不多说了，自定义View内常用方法

然后，如果是圆的话，我们就要截取当前绘制区域，既然是截取所以只能去宽度，高度中小的作为直径

if (type == TYPE_CIRCLE) {

viewWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());

circleRadius = viewWidth / 2;

setMeasuredDimension(viewWidth, viewWidth);}

接下来就是重点的shader处理了

private void setUpShader() {

Drawable drawable = getDrawable();

if (drawable == null)

return;

Bitmap bitmap = drawable2Bitmap(drawable);

mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

float scale = 1.0f; //bitmap:canvas ratio

Log.i("------", "bitmap original width：" + bitmap.getWidth() + "height" + bitmap.getHeight());

if (type == TYPE_CIRCLE) {

int minWidth = Math.min(bitmap.getWidth(), bitmap.getHeight());

scale = viewWidth * 1.0f / minWidth;

} else {

scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(), getHeight() * 1.0f / bitmap.getHeight());

}

mMatrix.setScale(scale, scale); //显示图片中心

if (bitmap.getWidth() * 1.0 / bitmap.getHeight() < 1) {

mMatrix.postTranslate(0, -getHeight() / 2);

} else {

mMatrix.postTranslate(-getWidth() / 2, 0); }

mBitmapShader.setLocalMatrix(mMatrix);

Log.i("------", "bitmap new width：" + bitmap.getWidth() + "height" + bitmap.getHeight());

mPaint.setShader(mBitmapShader);}

此处的关键就在于获取拉伸缩放比，为了显示完全肯定要取消的比例，最后可能由于图片的比例与绘图区域不一致，导致我的图片主要内容不再正中，所以默认将图片移到中间

最后，就是画出形状

if (type == TYPE_CIRCLE) {

canvas.drawCircle(circleRadius, circleRadius, circleRadius, mPaint);

} else {

canvas.drawRoundRect(roundRec, roundRadius, roundRadius, mPaint);

}

关于Xfermode实现圆形，圆角

原理其实差不多，Xfermode解决了怎样将两张图片画到同一个区域的问题.其实上一个方法已经很好的解决了问题，那么为什么还要讲这种呢，因为Xfermode是个很强大的东西，可以实现很多效果。如果单独使用xfermode我们就要对图片源进行缩放拉伸，普通的方法就是我生成一张新的图片，这样其实是比较费内存的，这边就详细讲一下Xfermode

Xfermode图片绘制情况

黄色为下层，蓝色为上层图片

那么我们的过程就简单了，为了显示下层我们首先将源图绘制上去，当然是经过拉伸缩放的，然后再把形状贴上去，取到重叠的部分，显示下层图片也就是DstIn模式

@Overrideprotected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null)

return;

circleRadius = Math.min(getWidth() / 2, getHeight() / 2);

float scale=1.0f;

int actWidth=drawable.getIntrinsicWidth();

int actHeight=drawable.getIntrinsicHeight();

Bitmap bmp=Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);

Canvas temp=new Canvas(bmp);

scale= Math.min(actWidth/getWidth(),actHeight/getHeight());

drawable.setBounds(0,0, (int) (getHeight()*scale), (int) (getWidth()*scale));

drawable.draw(temp);

Bitmap maskBmp = getMaskBitMap();

mPaint.reset();

mPaint.setFilterBitmap(false);

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

temp.drawBitmap(maskBmp, 0, 0, mPaint);

mPaint.setXfermode(null);

canvas.drawBitmap(bmp,0,0,mPaint);}

Bitmap getMaskBitMap() {

Bitmap result = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(result);

Paint paint = new Paint();

paint.setAntiAlias(true);

canvas.drawCircle(circleRadius, circleRadius, circleRadius, paint);

return result;}

环形最近也上传了，结合了SweepGradient，如果单是图形变换的话，推荐使用BitmapShader就够了，Xfermode的话用于实现混合的，其他代码就不贴了，送上我的github实现最后总结，Matrix是个好东西啊，实现3D图形的时候也要用，可惜大学矩阵学的差，只知道怎么用，不太懂原理啊，最后感谢csdn的Hongyang大神,文章参考Android Xfermode 实战 实现圆形、圆角图片