Android學習筆記12：圖像渲染（Shader）

　　在Android中，提供了Shader類專門用來渲染圖像以及一些幾何圖形。

　　Shader類包括了5個直接子類，分別為：BitmapShader、ComposeShader、LinearGradient、RadialGradient以及SweepGradient。其中，BitmapShader用於圖像渲染；ComposeShader用於混合渲染；LinearGradient用於線性渲染；RadialGradient用於環形渲染；而SweepGradient則用於梯度渲染。

　　使用Shader類進行圖像渲染時，首先需要構建Shader對象，然后通過Paint的setShader()方法來設置渲染對象，最后將這個Paint對象繪制到屏幕上即可。

　　有一點需要注意，使用不同的方式渲染圖像時需要構建不同的對象。

1.BitmapShader（圖像渲染）

　　BitmapShader的作用是使用一張位圖作為紋理來對某一區域進行填充。可以想象成在一塊區域內鋪瓷磚，只是這里的瓷磚是一張張位圖而已。

　　BitmapShader函數原型為：

　　public BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY);

　　其中，參數bitmap表示用來作為紋理填充的位圖；參數tileX表示在位圖X方向上位圖銜接形式；參數tileY表示在位圖Y方向上位圖銜接形式。

　　Shader.TileMode有3種參數可供選擇，分別為CLAMP、REPEAT和MIRROR。

　　CLAMP的作用是如果渲染器超出原始邊界范圍，則會復制邊緣顏色對超出范圍的區域進行着色。REPEAT的作用是在橫向和縱向上以平鋪的形式重復渲染位圖。MIRROR的作用是在橫向和縱向上以鏡像的方式重復渲染位圖。

2.LinearGradient（線性渲染）

　　LinearGradient的作用是實現某一區域內顏色的線性漸變效果。

　　LinearGradient的函數原型為：

　　public LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile);

　　其中，參數x0表示漸變的起始點x坐標；參數y0表示漸變的起始點y坐標；參數x1表示漸變的終點x坐標；參數y1表示漸變的終點y坐標；參數colors表示漸變的顏色數組；參數positions用來指定顏色數組的相對位置；參數tile表示平鋪方式。

　　通常，參數positions設為null，表示顏色數組以斜坡線的形式均勻分布。

3.ComposeShader（混合渲染）

　　ComposeShader的作用是實現渲染效果的疊加，如BitmapShader與LinearGradient的混合渲染效果等。

　　ComposeShader的函數原型為：

　　public ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode);

　　其中，參數shaderA表示某一種渲染效果；參數shaderB也表示某一種渲染效果；參數mode表示兩種渲染效果的疊加模式。

　　PorterDuff.Mode有16種參數可供選擇，分別為：CLEAR、SRC、DST、SRC_OVER、DST_OVER、SRC_IN、DST_IN、SRC_OUT、DST_OUT、SRC_ATOP、DST_ATOP、XOR、DARKEN、LIGHTEN、MULTIPLY、SCREEN。

　　這16種疊加模式的具體疊加效果如圖1所示。

圖1 疊加效果

4.RadialGradient（環形渲染）

　　RadialGradient的作用是在某一區域內實現環形的漸變效果。

　　RadialGradient的函數原型為：

　　public RadialGradient (float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile);

　　其中，參數x表示環形的圓心x坐標；參數y表示環形的圓心y坐標；參數radius表示環形的半徑；參數colors表示環形漸變的顏色數組；參數positions用來指定顏色數組的相對位置；參數tile表示平鋪的方式。

5.SweepGradient（梯度渲染）

　　SweepGradient也稱為掃描渲染，是指在某一中心以x軸正方向逆時針旋轉一周而形成的掃描效果的渲染形式。

　　SweepGradient的函數原型為：

　　public SweepGradient (float cx, float cy, int[] colors, float[] positions);

　　其中，參數cx表示掃描的中心x坐標；參數cy表示掃描的中心y坐標；參數colors表示梯度漸變的顏色數組；參數positions用來指定顏色數組的相對位置。

6.實例

　　在本實例中，分別實現了上述的5種渲染效果。效果如圖2所示。其中，最上面的是BitmapShader效果圖；第二排的左邊是LinearGradient的效果圖；第二排的右邊是RadialGradient的效果圖；第三排的左邊是ComposeShader的效果圖（LinearGradient與RadialGradient的混合效果）；第三排的右邊是SweepGradient的效果圖。

圖2 渲染效果

　　定義了MyView類，用來繪制各種渲染效果，MyView.java源碼如下。

package com.example.android_imageshader;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposeShader;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;

@SuppressLint({ "DrawAllocation", "DrawAllocation", "DrawAllocation" })
public class MyView extends View  {
    
    Bitmap mBitmap = null;                              //Bitmap對象    
    Shader mBitmapShader = null;               //Bitmap渲染對象
    Shader mLinearGradient = null;             //線性漸變渲染對象
    Shader mComposeShader = null;           //混合渲染對象
    Shader mRadialGradient = null;             //環形渲染對象
    Shader mSweepGradient = null;             //梯度渲染對象
            
    public MyView(Context context) {
        super(context);
        
        //加載圖像資源
        mBitmap = ((BitmapDrawable) getResources().
                getDrawable(R.drawable.snow)).getBitmap();
        
        //創建Bitmap渲染對象
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, 
                Shader.TileMode.MIRROR);
    
        //創建線性渲染對象
        int mColorLinear[] = {Color.RED, Color.GREEN, Color.BLUE, Color.WHITE}; 
        mLinearGradient = new LinearGradient(0, 0, 100, 100, mColorLinear, null, 
                Shader.TileMode.REPEAT);
                    
        //創建環形渲染對象
        int mColorRadial[] = {Color.GREEN, Color.RED, Color.BLUE, Color.WHITE};
        mRadialGradient = new RadialGradient(350, 325, 75, mColorRadial, null, 
                Shader.TileMode.REPEAT);
    
        //創建混合渲染對象
        mComposeShader = new ComposeShader(mLinearGradient, mRadialGradient, 
                PorterDuff.Mode.DARKEN);
        
        //創建梯形渲染對象
        int mColorSweep[] = {Color.GREEN, Color.RED, Color.BLUE, Color.YELLOW, Color.GREEN};
        mSweepGradient = new SweepGradient(370, 495, mColorSweep, null);        
    }

    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        Paint mPaint = new Paint();
        canvas.drawColor(Color.GRAY);      //背景置為灰色
        
        //繪制Bitmap渲染的橢圓
        mPaint.setShader(mBitmapShader);
        canvas.drawOval(new RectF(90, 20, 90+mBitmap.getWidth(), 
                20+mBitmap.getHeight()), mPaint);

        //繪制線性漸變的矩形
        mPaint.setShader(mLinearGradient);
        canvas.drawRect(10, 250, 250, 400, mPaint);
        
        //繪制環形漸變的圓
        mPaint.setShader(mRadialGradient);
        canvas.drawCircle(350, 325, 75, mPaint);
        
        //繪制混合漸變(線性與環形混合)的矩形
        mPaint.setShader(mComposeShader);
        canvas.drawRect(10, 420, 250, 570, mPaint);
                
        //繪制梯形漸變的矩形
        mPaint.setShader(mSweepGradient);
        canvas.drawRect(270, 420, 470, 570, mPaint);
    }    
}

 

 

相關資料：

Android學習筆記進階15之Shader渲染:

http://www.cnblogs.com/snake-hand/archive/2012/02/17/2454394.html

Graphics中PorterDuff.Mode!!!!!!

http://blog.csdn.net/dylancao/article/details/7722617