这几天看了项目框架里面的圆形头像，发现其实这个东西并不是很难的东西，学会了原理，无论圆形头像，五角星头像都可以实现。
目前我上传的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，省略一些测量函数的重写，其次因为圆形就会带有半径的参数，圆角就会带角的半径参数，因此我们要自定义两个属性，一个是图形类型，这里只实现圆形与圆角矩形
<attr name="cornerRadius" format="dimension"/><attr name="type">
<enum name="circle" value="0"/>
<enum name="round" value="1"/></attr>
<declare-styleable name="RoundImageView">
<attr name="cornerRadius"/>r
<attr name="type"/></declare-styleable>
接下来在构造函数内获得这两个属性的值
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 实战 实现圆形、圆角图片
网友评论