通过渲染器Shader实现图像变换效果

在上一篇文章中，一起学习了通过设定画笔风格来实现图形变换，没读过的朋友可以点击下面链接：

http://www.cnblogs.com/fuly550871915/p/4886455.html

是不是觉得自己学到的知识更多了呢？那么再多学一点总没坏处。在本篇文章中，将会一起学习通过给画笔设定Shader属性，实现图形变换。并带领读者一起实现两个实际例子，图片渲染器和线性渲染器。有没有发现我们的画笔特别强大呢？？确实，我们曾经给它设置过颜色矩阵属性，设置过xfermode风格属性，现在又来设定Shader属性。好了，废话不多说了，进入本章的主要内容吧。

一、基础知识

渲染效果大家都应该见到过，比如下面的这张图片。

上面是一张中规中矩的线性渲染的图片，从蓝色渲染到红色。但是在android中，有一个很奇葩的渲染方法，叫图片渲染。什么是图片渲染呢？？没法说清楚，到下面的实战项目中大家看到效果就明白了。其他的渲染，比如线性渐变，矩形渐变等都是大家熟知的了。

对于给画笔设定图片渲染，首先要实例化一个图片渲染对象，然后再设定给画笔。示例代码如下：

//初始化图片渲染器
mBitmapShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
//将画笔绑定图片渲染器
paint.setShader(mBitmapShader);

其中bmp是一个Bitmap图片，而渲染的模式有Shader.TileMode.REPEAT，Shader.TileMode.CLAMP，Shader.TileMode.MIRROR。分别是重复模式，拉伸边缘像素模式，镜像模式。这几种模式你现在无法理解，到实战项目中，我们会演示效果，到时候你就明白了。上面的代码是x方向和y方向都设定为重复渲染模式。

对于给画笔设定普通的渲染器，比如说线性渲染，一句代码搞定，如下：

//方法new LinearGradient(x0, y0, x1, y1, color0, color1, tile)
//设置线性渲染器，(x0,y0)是起点坐标，(x1,y1)是终点坐标
//从color0渲染到color1，当然这里的color也可以改为透明度
//最后的tile表示选择一种渲染模式
paint.setShader(new LinearGradient(0, 0, 300, 300, Color.BLUE, Color.RED, Shader.TileMode.CLAMP));

注释中说的很清楚了，至于渲染模式，上面也有解释。

好了，然我们快进入实战，看看这些方法到底是怎么用的吧。

二、图片渲染实战

这里我们需要一张图片资源，读者可以替换为自己的图片，建议图片选的小一点尽量。这样效果看起来方便一些。在上一篇文章的代码基础上我们接着往下写。首先新建MyShaderView继承自view。代码中的注释很详细，在代码中用画笔绑定了图片渲染器然后画了一个圆出来。如下：

 package com.fuly.image;

 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.BitmapShader;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.graphics.Shader;
 import android.util.AttributeSet;
 import android.view.View;
 /**
  * 利用渲染器shader变换图像
  * @author fuly1314
  *
  */
 public class MyShaderView extends View{

     private Bitmap bmp;
     private Paint paint = new Paint();
     private BitmapShader mBitmapShader;//图片渲染器

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

     }
     public MyShaderView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
     }

     protected void onDraw(Canvas canvas) {

         super.onDraw(canvas);

         bmp = BitmapFactory.decodeResource(getResources(), R.drawable.hudie2);
         //初始化图片渲染器
         mBitmapShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
         //将画笔绑定图片渲染器
         paint.setShader(mBitmapShader);

         canvas.drawCircle(150, 150, 300, paint);

     }

 }

然后新建布局imageshader.xml把这个view装进去。如下：

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:gravity="center">

   <com.fuly.image.MyShaderView
       android:layout_marginLeft="20dp"
       android:layout_marginTop="20dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

 </LinearLayout>

接着新建活动ShaderActivity显示这个布局，此时别忘记给这个活动注册。如下：

 package com.fuly.image;

 import android.app.Activity;
 import android.os.Bundle;

 public class ShaderActivity extends Activity{

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);
         setContentView(R.layout.imageshader);

     }

 }

最后给MainActivity中的按钮添加监听事件，如下：

 package com.fuly.image;

 import android.os.Bundle;
 import android.view.View;
 import android.app.Activity;
 import android.content.Intent;

 public class MainActivity extends Activity {

     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
     }

     //下面是按钮事件
     public void btnMatrix(View v){
         Intent intent = new Intent(this,MatrixActivity.class);
         startActivity(intent);
     }
     public void btnXFermode(View v){
         Intent intent = new Intent(this,XFermodeActivity.class);
         startActivity(intent);
     }
     public void btnShader(View v){
         Intent intent = new Intent(this,ShaderActivity.class);
         startActivity(intent);
     }

 }

好了，快运行程序看看效果。如下：

注意在图片渲染中，我们使用了REPEAT模式。从效果来看其实就是用我们的这张小蝴蝶的图片来填充我们画的圆，如果发现图片太小，填充不完怎么办，那就不断重复画这个图片直到填充完为止。这下你明白什么是REPEAT模式了吧。下面我们将MyShaderView的第42行，即实例化图片渲染的代码改变一下，变成MIRROR模式，如下：

 //初始化图片渲染器
 mBitmapShader = new BitmapShader(bmp, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);

只改这一个地方，然后重新运行程序，效果图如下：

有没有发现跟REPEAT模式有什么不同？也就是说在填充的时候，发现图片不够大，那就画它的镜像（即在镜子里的图像，也就是倒影）来填充，如此反复，直到填充完为止。这既是MIRROR模式的效果了。那么CLAMP模式又是什么样的呢？我们仍然修改第42行代码，如下：

//初始化图片渲染器
mBitmapShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

为了让显示效果更好一点，我们替换为另外一张图片，此时要修改相应的获取bmp的代码。这个即修改第40的代码即可。我就不贴出来了。然后运行程序，效果如下：

                        

上图中，左侧是效果图，右侧就是我所使用的那张原图。可以看到，CLAMP模式的意思其实当发现原来图片不够填充的时候，就拉伸原图片边缘的像素直到填充满为止。

好了。经过那上面的三轮实验，相信你不经对着三种模式有所了解，而且对图片渲染也很熟悉了。那么下面就让我们来实现常规的渲染，比如线性渐变。

三、线性渐变实战

在这里简单起见，我就简单的单纯的只实现一个线性渐变的效果吧。目的是为让大家看看，普通的渲染是怎么绑定画笔的。目前来说，掌握这个就达到这篇文章的目的了。首先老规矩，新建LinearShaderView继承自view，在这里的代码中，将为画笔绑定一个线性渐变的渲染，并用它画出一个矩形。代码如下：

 package com.fuly.image;

 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.BitmapShader;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.LinearGradient;
 import android.graphics.Paint;
 import android.graphics.Shader;
 import android.util.AttributeSet;
 import android.view.View;
 /**
  * 利用线性渲染器shader变换图像
  * @author fuly1314
  *
  */
 public class LinearShaderView extends View{

     private Paint paint = new Paint();

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

     }
     public LinearShaderView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
     }

     protected void onDraw(Canvas canvas) {

         super.onDraw(canvas);
         //方法new LinearGradient(x0, y0, x1, y1, color0, color1, tile)
         //设置线性渲染器，(x0,y0)是起点坐标，(x1,y1)是终点坐标
         //从color0渲染到color1，当然这里的color也可以改为透明度
         //最后的tile表示选择一种渲染模式
         paint.setShader(new LinearGradient(0, 0, 300, 300, Color.BLUE, Color.RED,
                 Shader.TileMode.CLAMP));
         //初始化图片渲染器

         canvas.drawRect(0, 0, 300, 300, paint);

     }

 }

新建布局imagelinearshader.xml，将这个布局加进去，代码如下：

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:gravity="center">

   <com.fuly.image.LinearShaderView

       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

 </LinearLayout>

然后该新建活动了LinearShaderActivity用来显示我们的布局，代码如下：

 package com.fuly.image;

 import android.app.Activity;
 import android.os.Bundle;

 public class LinearShaderActivity extends Activity{

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);
         setContentView(R.layout.imagelinearshader);

     }

 }

最后呢，就是MainActivity中的按钮事件了，如下：

 package com.fuly.image;

 import android.os.Bundle;
 import android.view.View;
 import android.app.Activity;
 import android.content.Intent;

 public class MainActivity extends Activity {

     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
     }

     //下面是按钮事件
     public void btnMatrix(View v){
         Intent intent = new Intent(this,MatrixActivity.class);
         startActivity(intent);
     }
     public void btnXFermode(View v){
         Intent intent = new Intent(this,XFermodeActivity.class);
         startActivity(intent);
     }
     public void btnShader(View v){
         Intent intent = new Intent(this,ShaderActivity.class);
         startActivity(intent);
     }
     public void btnLShader(View v){
         Intent intent = new Intent(this,LinearShaderActivity.class);
         startActivity(intent);
     }

 }

然后运行程序，效果如下：

好了，至此，你有没有学会怎么给画笔绑定普通的渲染呢？上面实现的效果比较简单，其实利用线性渐变结合xfermode风格可以实现常见的水面倒影效果，这个有兴趣可以自己百度下相关案例。

不知道你有没有发现，不知不觉间我们已经实现了4个按钮的效果了。还有最后一个按钮“像素块实验”没有实现了，下一篇文章中，我们就来看看这个效果吧。然后这个图形变换基础系列文章就完结了。