着色器

今天将接着上一节的内容，讲解着色器Shader更多的用法，不知道大家关注过其他的圆形头像实现方式没有，是不是都有一个共同点，那就是代码非常的长，而博主今天实现的方式，只需要自己写13行代码就可以实现。

着色器函数

经过上一篇的讲解，我们都知道，着色器Shader是一个基类，那么它其实也是有两个函数的，分别是：

setLocalMatrix(Matrix localM)
getLocalMatrix(Matrix localM)

  

 

  
1
  
2
 

这两个函数是用来设置坐标变换矩阵，比如你可以进行缩放，平移变换等等等等，可以说非常的方便快捷。

实现圆形头像

我们的实现方法，也就用到上面两个函数，所以我们可以直接使用起来，这样看起来也更加的形象，方便于理解，首先，我们自定义一个View：

/***
 * 原型头像自定义控件
 */
public class CircleHeadView extends View { private Paint paint;//画笔 private Bitmap bitmap;//图片 private BitmapShader bitmapShader;//图片着色器 public CircleHeadView(Context context) { super(context); } public CircleHeadView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); this.paint=new Paint();//初始化画笔工具 this.bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.head_img);//获取头像图片 this.bitmapShader=new BitmapShader(this.bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//设置着色器为边缘填充 } public CircleHeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

在这里我们初始化了一个图片着色器BitmapShader，X,Y轴填充模式都是TileMode.CLAMP，虽然没什么用，但参数还是不能少的。

绘图实现

绘图是最关键的地方，我们来理清一下思路，要怎么才能显示圆形头像呢？

首先，因为要用到上面两个函数，所以肯定会要运用矩阵运算工具Matrix类，假如我们的图片很大，或者很小，而我要设置的头像为屏幕宽度，应该怎么做？先来看下代码：

Matrix matrix=new Matrix();
float scale=(float)getWidth()/this.bitmap.getWidth();
matrix.setScale(scale,scale);

  

 

  
1
  
2
  
3
 

因为不管图片大小，我们都需要它显示在整个头像之中，所以必须缩放到控件大小宽度，又因为它是个圆形，必须缩放成一个正方形，所以X,Y轴缩放大小一样。接着我们来看整体的OnDraw()实现：

protected void onDraw(Canvas canvas) { super.onDraw(canvas); Matrix matrix=new Matrix();//初始化矩阵运算类 float scale=(float)getWidth()/this.bitmap.getWidth();//获取图片要缩放的比例 matrix.setScale(scale,scale);//设置缩放 this.bitmapShader.setLocalMatrix(matrix);//设置变换矩阵 this.paint.setShader(this.bitmapShader);//画笔设置着色器 float half=(float) getWidth()/2;//获取圆心位置 canvas.drawCircle(half,half,half,this.paint);//画出头像
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

注释其实很详细，不过，还是解释一下，因为我们的头像宽度为整个屏幕match_parent，所以圆心坐标的横坐标肯定是宽度的一半，又因为它是个正方形，纵坐标也应该和横坐标一样，所以相同，半径同样是整个屏幕的一半，所以最后的一行代码三个参数都是half。

XML代码如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.liyuanjinglyj.circleheadapplication.CircleHeadView android:layout_width="match_parent" android:layout_height="wrap_content"/>

</LinearLayout>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

Github下载地址：点击下载

文章来源: liyuanjinglyj.blog.csdn.net，作者：李元静，版权归原作者所有，如需转载，请联系作者。

原文链接：liyuanjinglyj.blog.csdn.net/article/details/103107352