码迷，mamicode.com
首页 > 移动开发 > 详细

Android中自定义视图View之---渲染器Shader对象

时间：2015-01-12 16:37:36      阅读：390      评论：0      收藏：0      [点我收藏+]

标签：

下面再来看下一个知识点：颜色渲染Shader对象

为什么我要把Shader对象单独拿出来说一下呢？因为这个对象在对于我们处理图形特效的时候是非常有用的

下面来看一下Android中Shader对象

在Android Api中关于颜色渲染的几个重要的类:
Shader,BitmapShader,ComposeShader,LinearGradient,RadialGradient,SweepGradient
它们之间的关系是：

Shader是后面几个类的父类


该类作为基类主要是返回绘制时颜色的横向跨度。其子类可以作用与Piant。通过 paint.setShader(Shader shader);来实现一些渲染效果。之作用与图形不作用与bitmap。
构造方法为默认的构造方法。  

枚举： 
emun Shader.TileMode 

定义了平铺的3种模式： 
static final Shader.TileMode CLAMP: 边缘拉伸.
static final Shader.TileMode MIRROR：在水平方向和垂直方向交替景象, 两个相邻图像间没有缝隙.
Static final Shader.TillMode REPETA：在水平方向和垂直方向重复摆放,两个相邻图像间有缝隙缝隙.
 
方法： 
1. boolean getLoaclMatrix(Matrix localM); 如果shader有一个非本地的矩阵将返回true.
localM：如果不为null将被设置为shader的本地矩阵.
2. void setLocalMatrix(Matrix localM); 
设置shader的本地矩阵,如果localM为空将重置shader的本地矩阵。  

Shader的直接子类:
BitmapShader    : 位图图像渲染
LinearGradient  : 线性渲染
RadialGradient  : 环形渲染
SweepGradient   : 扫描渐变渲染/梯度渲染
ComposeShader   : 组合渲染，可以和其他几个子类组合起来使用
是不是很像Animation及其子类的关系(AlphaAnimation,RotateAnimation,ScaleAnimation,TranslateAnimation, AnimationSet)
既有具体的渲染效果，也有渲染效果的组合

下面说下Shader的使用步骤:
1. 构建Shader对象
2. 通过Paint的setShader方法设置渲染对象
3.设置渲染对象
4.绘制时使用这个Paint对象


那么下面就开始来介绍各个Shader的相关知识：

1、BitmapShader

public   BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY)
调用这个方法来产生一个画有一个位图的渲染器（Shader）。
bitmap   在渲染器内使用的位图
tileX      The tiling mode for x to draw the bitmap in.   在位图上X方向渲染器平铺模式
tileY     The tiling mode for y to draw the bitmap in.    在位图上Y方向渲染器平铺模式
TileMode：
CLAMP  ：如果渲染器超出原始边界范围，会复制范围内边缘染色。
REPEAT ：横向和纵向的重复渲染器图片，平铺。
MIRROR ：横向和纵向的重复渲染器图片，这个和REPEAT重复方式不一样，他是以镜像方式平铺。

代码：

package com.tony.shader;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.View;

public class BitmapShaderView extends View {

	private BitmapShader bitmapShader = null;
	private Bitmap bitmap = null;
	private Paint paint = null;
	private ShapeDrawable shapeDrawable = null;
	private int BitmapWidth = 0;
	private int BitmapHeight = 0;

	public BitmapShaderView(Context context) {
		super(context);

		// 得到图像
		bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.cat))
				.getBitmap();
		BitmapWidth = bitmap.getWidth();
		BitmapHeight = bitmap.getHeight();
		// 构造渲染器BitmapShader
		bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR,Shader.TileMode.REPEAT);
	}
	
	public BitmapShaderView(Context context,AttributeSet set) {
		super(context, set);
	}
	
	
	@Override
	protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
	super.onDraw(canvas);
	//将图片裁剪为椭圆形    
        //构建ShapeDrawable对象并定义形状为椭圆    
        shapeDrawable = new ShapeDrawable(new OvalShape());  
        //得到画笔并设置渲染器  
        shapeDrawable.getPaint().setShader(bitmapShader);  
        //设置显示区域  
        shapeDrawable.setBounds(20, 20,BitmapWidth-140,BitmapHeight);  
        //绘制shapeDrawable  
        shapeDrawable.draw(canvas);  
	}

}


效果图：

技术分享

2、LinearGradient

相信很多人都看过歌词同步的效果, 一是竖直方向的滚动，另一方面是水平方面的歌词颜色渐变点亮效果,这种效果怎么做呢? 这就需要用到LinearGradient线性渲染,下面还是先看具体的使用:

LinearGradient有两个构造函数;
public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile) 
参数:
float x0: 渐变起始点x坐标
float y0:渐变起始点y坐标
float x1:渐变结束点x坐标
float y1:渐变结束点y坐标
int[] colors:颜色 的int 数组
float[] positions: 相对位置的颜色数组,可为null,  若为null,可为null,颜色沿渐变线均匀分布
Shader.TileMode tile: 渲染器平铺模式

public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,Shader.TileMode tile)
float x0: 渐变起始点x坐标
float y0:渐变起始点y坐标
float x1:渐变结束点x坐标
float y1:渐变结束点y坐标
int color0: 起始渐变色
int color1: 结束渐变色
Shader.TileMode tile: 渲染器平铺模式


代码：

package com.tony.shader;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.graphics.Shader;
import android.view.View;

public class LinearGradientView extends View {

	private LinearGradient linearGradient = null;  
    private Paint paint = null;  
	
    public LinearGradientView(Context context)  
    {  
        super(context);  
        linearGradient = new LinearGradient(0, 0, 100, 100, new int[] {  
                Color.YELLOW, Color.GREEN, Color.TRANSPARENT, Color.WHITE }, null,  
                Shader.TileMode.REPEAT);  
        paint = new Paint();  
    }  
    
	public LinearGradientView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		//设置渲染器
		paint.setShader(linearGradient);  
                //绘制圆环
		canvas.drawCircle(240, 360, 200, paint); 
	}

}


效果：

技术分享

关于这个渲染对象，我们需要多解释一下了，因为这个渲染器用的地方很多：

我们在具体看一下他的构造方法中的参数含义：

Paint paint2 = new Paint();
paint2.setColor(Color.BLACK);
paint2.setStrokeWidth(5);
paint2.setStyle(Paint.Style.FILL);
Shader mShader = new LinearGradient(0,0,100,100,
		Color.RED,
		Color.BLUE, Shader.TileMode.CLAMP);
paint2.setShader(mShader);
Rect rect = new Rect();
rect.left = 0;
rect.right = 300;
rect.top = 0;
rect.bottom = 300;
canvas.drawRect(rect, paint2);
效果图：

技术分享
我们把构造方法中的值改变一下：

Shader mShader = new LinearGradient(0,0,300,300,
		Color.RED,
		Color.BLUE, Shader.TileMode.CLAMP);
在看一下效果：

技术分享
这里我们就是到了构造方法中的四个参数值的含义了：

参数一：渲染开始点的x坐标

参数二：渲染开始点的y坐标

参数三：渲染结束点的x坐标

参数四：渲染结束点的y坐标

因为这里我们设置矩形的大小是高和宽都是300

所以，从第一个例子中我们可以看出：渲染结束点之后的颜色是最后一种颜色：蓝色


我们在将代码改变一下：

Shader mShader = new LinearGradient(0,0,300,0,
		Color.RED,
		Color.BLUE, Shader.TileMode.CLAMP);
效果：

技术分享
结束点的坐标设置成：(300,0)就实现了横向渲染

当然我们也可以实现纵向渲染的，这里就不演示了。


在修改一下代码：

Shader mShader = new LinearGradient(0,0,100,100,
                Color.RED,
                Color.BLUE, Shader.TileMode.MIRROR);
效果：

技术分享
我们将渲染模式改成：Shader.TileMode.MIRROR 镜像模式了

我们看到效果，当渲染结束点是(100,100)的时候，那么后面还是会继续渲染的，而且是相反的(就像照镜子一样)，然后在渲染一下，每次渲染的效果都是和之前的相反。因为矩形的长度和宽度都是300，所以这里会渲染三次。

我们在将代码修改一下：

Shader mShader = new LinearGradient(0,0,100,100,
                Color.RED,
                Color.BLUE, Shader.TileMode.REPEAT);
将渲染模式改成：Shader.TileMode.REPEAT 重复模式了

效果：

技术分享
这里看到也是会渲染三次的，但是和镜像模式不同的是，它们的渲染方向都是一致的。


从上面的三种渲染模式可以看出来，之后渲染的结束点小于渲染图形的大小的时候才会有效果的，如果我们把大小改一下：

Shader mShader = new LinearGradient(0,0,300,300,
                Color.RED,
                Color.BLUE, Shader.TileMode.REPEAT);
我们渲染结束点改成矩形的高度和宽度大小
效果：

技术分享

效果和Shader.TileMode.CLAMP一样的。

这种渲染器用的地方还是很多的，我们后面介绍长条渐变的SeekBar就要用到这种渲染器


3、RadialGradient

圆形渲染器，这种渲染器很好理解，就是同心圆的渲染机制

public RadialGradient(float x, float y, float radius, int[] colors, float[] positions,Shader.TileMode tile)
float x:  圆心X坐标
float y:  圆心Y坐标
float radius: 半径
int[] colors:  渲染颜色数组
floate[] positions: 相对位置数组,可为null,  若为null,可为null,颜色沿渐变线均匀分布
Shader.TileMode tile:渲染器平铺模式

public RadialGradient(float x, float y, float radius, int color0, int color1,Shader.TileMode tile)
float x:  圆心X坐标
float y:  圆心Y坐标
float radius: 半径
int color0: 圆心颜色
int color1: 圆边缘颜色
Shader.TileMode tile:渲染器平铺模式


代码：

package com.tony.shader;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

public class RadialGradientView extends View {

	Paint mPaint = null;
	// 环形渐变渲染
	Shader mRadialGradient = null;
	public RadialGradientView(Context context) {
		super(context);
		//1.圆心X坐标2.Y坐标3.半径 4.颜色数组 5.相对位置数组，可为null 6.渲染器平铺模式 
		mRadialGradient = new RadialGradient(240, 240, 240, new int[] {  
				Color.YELLOW, Color.GREEN, Color.TRANSPARENT, Color.RED }, null,  
                Shader.TileMode.REPEAT);  
  
        mPaint = new Paint();  
	}
	
	
	public RadialGradientView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	 @Override  
	    protected void onDraw(Canvas canvas) {  
	        // 绘制环形渐变  
	        mPaint.setShader(mRadialGradient);  
	        // 第一个,第二个参数表示圆心坐标  
	        // 第三个参数表示半径  
	        canvas.drawCircle(240, 360, 200, mPaint);  
	    }  
	  
	
	

}


效果：

技术分享

关于这个圆形渲染器，我们可以实现水波纹的效果：

package com.tony.testshader;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
/**
 * 水波纹效果
 * @author tony
 *
 */

 public class WaterRipplesView extends View {

	Shader mBitmapShader = null;
	Bitmap mBitmapPn = null;
	Paint mPaint = null;
	Shader mRadialGradient = null;
	Canvas mCanvas = null;
	ShapeDrawable mShapeDrawable = null;

	public WaterRipplesView(Context context) {
		super(context);

		// 初始化工作
		Bitmap bitmapTemp = ((BitmapDrawable) getResources().getDrawable(
				R.drawable.leaf)).getBitmap();
		DisplayMetrics dm = getResources().getDisplayMetrics();
		// 创建与当前使用的设备窗口大小一致的图片
		mBitmapPn = Bitmap.createScaledBitmap(bitmapTemp, dm.widthPixels,
				dm.heightPixels, true);
		// 创建BitmapShader object
		mBitmapShader = new BitmapShader(mBitmapPn, Shader.TileMode.REPEAT,
				Shader.TileMode.MIRROR);
		mPaint = new Paint();
	}

	public WaterRipplesView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);

		// 将图片裁剪为椭圆型
		// 创建ShapeDrawable object，并定义形状为椭圆
		mShapeDrawable = new ShapeDrawable(new OvalShape());// OvalShape:椭圆
		// 设置要绘制的椭圆形的东西为ShapeDrawable图片
		mShapeDrawable.getPaint().setShader(mBitmapShader);
		// 设置显示区域
		mShapeDrawable.setBounds(0, 0, mBitmapPn.getWidth(),
				mBitmapPn.getHeight());
		// 绘制ShapeDrawable
		mShapeDrawable.draw(canvas);
		if (mRadialGradient != null) {
			mPaint.setShader(mRadialGradient);
			canvas.drawCircle(0, 0, 1000, mPaint);
		}

	}

	// @覆写触摸屏事件
	public boolean onTouchEvent(MotionEvent event) {
		// @设置alpha通道（透明度）
		mPaint.setAlpha(400);
		mRadialGradient = new RadialGradient(event.getX(), event.getY(), 48,
				new int[] { Color.WHITE, Color.TRANSPARENT },null, Shader.TileMode.REPEAT);
		// @重绘
		postInvalidate();
		return true;
	}

}


重写触发方法，获取触发点坐标，设置渲染器的圆形坐标，即可

效果：

技术分享


4、SweepGradient

梯度渲染器，或者是扇形选择器，和雷达扫描效果差不多

public SweepGradient(float cx, float cy, int[] colors, float[] positions)
Parameters:
cx 渲染中心点x 坐标
cy 渲染中心y 点坐标
colors 围绕中心渲染的颜色数组，至少要有两种颜色值
positions 相对位置的颜色数组,可为null,  若为null,可为null,颜色沿渐变线均匀分布

public SweepGradient(float cx, float cy, int color0, int color1)
Parameters:
cx 渲染中心点x 坐标
cy 渲染中心点y 坐标
color0 起始渲染颜色
color1 结束渲染颜色


代码：

package com.tony.testshader;  
  
  
import android.content.Context;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.graphics.Shader;  
import android.graphics.SweepGradient;  
import android.util.AttributeSet;  
import android.view.View;  
  
  
public class SweepGradientView extends View {  
      
    Paint mPaint = null;    
    // 梯度渲染    
    Shader mSweepGradient = null;    
      
    public SweepGradientView(Context context) {  
        super(context);  
          
         // 创建SweepGradient对象    
        // 第一个,第二个参数中心坐标    
        // 后面的参数与线性渲染相同    
        mSweepGradient = new SweepGradient(240, 360, new int[] {Color.CYAN,Color.DKGRAY,Color.GRAY,Color.LTGRAY,Color.MAGENTA,    
                Color.GREEN,Color.TRANSPARENT, Color.BLUE }, null);    
        mPaint = new Paint();    
    }  
      
  
  
    public SweepGradientView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  
      
      
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
          
         // 绘制梯度渐变    
        mPaint.setShader(mSweepGradient);    
          
        canvas.drawCircle(240, 360, 200, mPaint);  
    }  
}


效果图：

技术分享
这种渲染器用到的地方很多，我们后面说道自定义圆形渐变的SeekBar就会用到这种渲染器


Android中自定义视图View之---渲染器Shader对象

标签：

原文地址：http://blog.csdn.net/jiangwei0910410003/article/details/42643087
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！