Shader与MaskFilter

public class

Shader

extends  Object

java.lang.Object
↳	android.graphics.Shader

Known Direct Subclasses BitmapShader,  ComposeShader,  LinearGradient,  RadialGradient,  SweepGradient

Shader里有个内部类Shader.TileMode

Shader.TileMode.CLAMP   如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色

Shader.TileMode.MIRROR 在横向和纵向上以镜像的方式重复渲染位图

Shader.TileMode.REPEAT  在横向和纵向上以平铺的形式重复渲染位图

BitmapShader（图像渲染）

Public Constructors
	BitmapShader( Bitmap bitmap,  Shader.TileMode tileX,  Shader.TileMode tileY) Call this to create a new shader that will draw with a bitmap.

bitmap 指定Bitmap

tileX   指定X方向的Bitmap 渲染方式

tileY 指定Y轴方向Bitmap的渲染方式

例如：

	Shader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
	mPaint.setShader(bitmapShader);

BitmapShader先应用了Y轴的模式而X轴是后应用的

RadialGradient（环形渲染）

Public Constructors
	RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops,  Shader.TileMode tileMode) Create a shader that draws a radial gradient given the center and radius.
	RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor,  Shader.TileMode tileMode) Create a shader that draws a radial gradient given the center and radius.

centerX 、centerY、radius，表示渲染的中心点和渲染半径；

coloers 里是颜色值数组

stops表示colors里颜色数组的权重,范围是[ 0 , 1]，为null表示colors的颜色平分半径距离

class SampleView extends View {

		private int width;
		private int height;
		
		private float radius;
		Paint mPaint = null;
		
		Shader mRadialGradient = null;

		public SampleView(Context context) {
			super(context);
			
			width = getResources().getDisplayMetrics().widthPixels;
			height = getResources().getDisplayMetrics().heightPixels;
			radius = Math.min(width, height)/2;
			
			mRadialGradient = new RadialGradient(
					width/2, 
					height/2, 
					radius, 
					new int[] {Color.WHITE, Color.RED, Color.BLUE, Color.GREEN }, 
					null,
					Shader.TileMode.CLAMP);

			mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
			
		}

		@Override
		protected void onDraw(Canvas canvas) {
			
			mPaint.setShader(mRadialGradient);
			
			canvas.drawCircle(width/2, height/2, radius, mPaint);
		}
	}

mRadialGradient = new RadialGradient(
					width/2, 
					height/2-200, 
					radius, 
					new int[] {Color.WHITE, Color.RED, Color.BLUE, Color.GREEN }, 
					null,
					Shader.TileMode.CLAMP);

我们修改半径-200，使用Shader.TileMode.MIRROR渲染模式，先按指定x、y点和半径画完，然后以Shader.TileMode.MIRROR 画完剩余部分

	mRadialGradient = new RadialGradient(
					width/2, 
					height/2, 
					radius-200, 
					new int[] {Color.WHITE, Color.RED, Color.BLUE, Color.GREEN }, 
					null,
					Shader.TileMode.MIRROR);

到现在都没有使用stops数组参数

	mRadialGradient = new RadialGradient(
					width/2, 
					height/2, 
					radius, 
					new int[] {Color.WHITE, Color.RED, Color.BLUE, Color.GREEN }, 
					new float[]{0.2f,0.4f,0.6f,1f},
					Shader.TileMode.MIRROR);

0.2 、0.4 、0.6 、1的意思是白色在20%的地方，红色在40%的地方，蓝色在60%的地方，绿色在100%的地方，

0-20%是白色的渐变，

20%-40%是白色到红色的渐变

40% - 60% 是红色到蓝色的渐变

60% - 100% 是蓝色到绿色的渐变

 

第二个构造函数比较简单

mRadialGradient = new RadialGradient(
					width/2, 
					height/2, 
					radius,
					Color.RED,
					Color.BLUE,
					Shader.TileMode.MIRROR);

定义一个开始色（0.5f）和结束色（1f），

LinearGradient（线性渲染）

Public Constructors
	LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,  Shader.TileMode tile) Create a shader that draws a linear gradient along a line.
	LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,  Shader.TileMode tile) Create a shader that draws a linear gradient along a line.

跟环形渲染差不多，主要是前面的4个参数，前2个表示开始点，后2个表示结束点，这2个坐标连接而成就是一条线，那么这条线是什么方向，那么渲染就在那个方向。

	mLinearGradient1 = new LinearGradient(
					0,0, 500, 0, 
					new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE }, 
					null,
					Shader.TileMode.MIRROR);

			mLinearGradient2 = new LinearGradient(
					0, 0, 0, 500, 
					new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE }, 
					null,
					Shader.TileMode.MIRROR);

			mLinearGradient3 = new LinearGradient(
					0, 0, 500, 500, 
					new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE },
					null,
					Shader.TileMode.REPEAT);

SweepGradient(梯度渲染)

Public Constructors
	SweepGradient(float cx, float cy, int[] colors, float[] positions) A subclass of Shader that draws a sweep gradient around a center point.
	SweepGradient(float cx, float cy, int color0, int color1) A subclass of Shader that draws a sweep gradient around a center point.

cx 、cy表示在View里的坐标位置，后面的参数跟环形渲染一样

	@Override
		protected void onDraw(Canvas canvas) {
			 Shader   mSweepGradient1 = new SweepGradient(
		        		350, 105,
		        		new int[] { Color.GREEN,  Color.RED, Color.BLUE }, null);  
	        mPaint.setShader(mSweepGradient1);  
	        canvas.drawRect(200, 10, 500, 200, mPaint);  
	        
	        
	        Shader   mSweepGradient2 = new SweepGradient(
	        		350, 360,
	        		new int[] { Color.GREEN,  Color.RED, Color.BLUE }, null);  
            mPaint.setShader(mSweepGradient2);  
	        canvas.drawOval(new RectF(200, 320, 500, 400), mPaint);
	        
	        Shader   mSweepGradient3 = new SweepGradient(
	        		500, 700,
	        		new int[] { Color.GREEN,  Color.RED, Color.BLUE }, null);  
            mPaint.setShader(mSweepGradient3);  
	        canvas.drawCircle(500, 700, 200, mPaint);
	        
	        mPaint.setStyle(Style.STROKE);
	        mPaint.setStrokeWidth(50);
	       
	        Shader   mSweepGradient4 = new SweepGradient(
	        		225, 1200,
	        		new int[] { Color.GREEN,  Color.RED, Color.BLUE ,Color.GREEN}, null);  
            mPaint.setShader(mSweepGradient4);  
	        canvas.drawCircle(225, 1200, 150, mPaint);
	        
	        
	        
	        Shader   mSweepGradient5 = new SweepGradient(
	        		600, 1200,
	        		new int[] { Color.GREEN,  Color.RED, Color.BLUE}, null);  
            mPaint.setShader(mSweepGradient5);  
	        canvas.drawCircle(600, 1200, 150, mPaint);
	        
	        
	        
	        Shader   mSweepGradient6 = new SweepGradient(
	        		1000, 1200,
	        		new int[] { Color.GREEN,  Color.RED, Color.BLUE}, new float[]{0.1f,0.3f,1});  
            mPaint.setShader(mSweepGradient6);  
	        canvas.drawCircle(1000, 1200, 150, mPaint);
	        
		}

ComposeShader（组合渲染）

Public Constructors
	ComposeShader( Shader shaderA,  Shader shaderB,  Xfermode mode) Create a new compose shader, given shaders A, B, and a combining mode.
	ComposeShader( Shader shaderA,  Shader shaderB,  PorterDuff.Mode mode) Create a new compose shader, given shaders A, B, and a combining PorterDuff mode.

将多个种渲染组合在一起，区别是第三个参数

public class

MaskFilter

extends  Object

java.lang.Object
↳	android.graphics.MaskFilter

Known Direct Subclasses BlurMaskFilter,  EmbossMaskFilter MaskFilter类可以为Paint分配边缘效果。对MaskFilter的扩展可以对一个Paint边缘的alpha通道应用转换。 Android包含了下面几种MaskFilter：         BlurMaskFilter   指定了一个模糊的样式和半径来处理Paint的边缘。         EmbossMaskFilter  指定了光源的方向和环境光强度来添加浮雕效果。 BlurMaskFilter    利用画笔设置maskFilter mPaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.NORMAL)); BlurMaskFilter.Blur.NORMAL 会将整个图像模糊掉 BlurMaskFilter.Blur.INNER 会在图像内部产生模糊。可以看见阴影在色块的内部，有种淡淡的浮雕感。 INNER效果其实并不理想，实际应用中我们使用的也少。 BlurMaskFilter.Blur.OUTER 会在Alpha边界外产生一层阴影且会将原本的图像变透明。 BlurMaskFilter.Blur.SOLID 其效果就是在图像的Alpha边界外产生一层与Paint颜色一致的阴影效果而不影响图像本身。 EmbossMaskFilter Public Constructors EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius) Create an emboss maskfilter   这几个参数的理解还是有点难度的。以下内容参考http://blog.csdn.net/aigestudio/article/details/41447349 相对于之前的BlurMaskFilter来说，EmbossMaskFilter的可用性比较低，因为它实现的效果不是很霸气。正如其名， 他可以实现一种类似浮雕的效果，说白了就是让你绘制的图像感觉像是从屏幕中“凸”起来更有立体感一样 （在设计软件中类似的效果称之为斜面浮雕）。 mPaint.setMaskFilter(new EmbossMaskFilter(new float[]{-1,-1,1}, 0.5f, 2.3f, 20)); 从左下角45度的方向打光 假设一个没有任何光线的黑屋子里有一张桌子，桌子上有一个小球，这时我们打开桌子上的台灯，台灯照亮了小球，这时候小球的状态与下图类似： 小球最接近光源的地方肯定是最亮的这个没有异议，在参数中specular就是跟高光有关的，其值是个双向值越小或越大高光越强中间值则是最弱的， 那么再看看什么是ambient呢？同样我们看个球，你会发现即便只有一盏灯光，在球底部跟桌面相接的地方依然不会出现大片的“死黑”，这是因为 光线在传播的过程中碰到物体会产生反射！这种反射按照物体介质的粗糙度可以分为漫反射和镜面反射，而这里我们的小球之所以背面没有直接 光照但仍能有一定的亮度就是因为大量的漫反射在空间传播让光线间接照射到小球背面，这种区别于直接照明的二次照明我们称之为间接照明， 产生的光线叫做环境光ambient，参数中的该值就是用来设置环境光的，在Android中环境光默认为白色，其值越大，阴影越浅，blurRadius则 是设置图像究竟“凸”出多大距离的很好理解，最难理解的一个参数是direction，上面我们也说了是光照方向的意思，该数组必须要有而且只能 有三个值即float[x,y,z]，这三个值代表了一个空间坐标系，我们的光照方向则由其定义，那么它是怎么定义的呢？首先x和y很好理解，平面的两 个维度嘛是吧，上面我们使用的是[1,1]也就是个45度角，而z轴表示光源是在屏幕后方还是屏幕前方，上面我们是用的是1，正值表示光源往屏幕 外偏移1个单位，负值表示往屏幕里面偏移，这么一说如果我把其值改为[1,1,-1]那么我们的巧克力朝着我们的一面应该就看不到了对吧，试试看 撒~~~这个效果我就不截图了，因为一片漆黑……但是你依然能够看到一点点灰度~就是因为我们的环境光ambient！，如果我们把值改为[ 1,1,2]往屏幕外偏移两个单位，那么我们巧克力正面光照将更强： 这里要提醒一点[x,y,z]表示的是空间坐标，代表光源的位置，那么一旦这个位置确定，[ax,ay,az]则没有意义，也就是说同时扩大三个轴向值 的倍数是没有意义的，最终效果还是跟[x,y,z]一样！

mPaint.setMaskFilter(new EmbossMaskFilter(new float[]{0,1,1}, 0.5f, 2.3f, 20));

从正上方打光

光源在哪个方向好像是这样的（我自己的理解）