Android基礎入門教程——8.3.13 Paint API之—— Shader(映像渲染)

Android基礎入門教程——8.3.13 Paint API之—— Shader(映像渲染)
  本節引言：

最近一段時間因為工作上的事以及面試等等，耽誤了部落格的更新，這裡道歉下~
今天下午去追夢網路面試了一趟，全齊大神給小弟我上了一課，增長了自己的見識，
以及對以後一些成長的路線的規劃，儘管進去的機率不大，還是要謝謝一番，
另外再一次讓我感受到畢業證的重要性，找工作處處碰壁，錯失了很多機會哈，
各位還在讀大學的讀者，師兄在這裡奉勸一句，千萬別掛科…好的，不BB了，
本節帶來的是Paint的另一個API——Shader(映像渲染)，我們可以調用Paint的setShader()方法來
為畫筆設定Shader渲染效果，我們可以開啟官方的API文檔：Shader

和我們前面的MaskFilter(面具)，ColorFilter(顏色過濾器)，PathEffect(路徑效果)一樣，我們
一般不會直接使用Shader，而是使用它的五個子類，他們分別是：
BitmapShader(映像渲染)，ComposeShader(混合渲染)，LinearGradient(線性渲染)
RadialGradient(環形渲染)，SweepGradient(梯度渲染)
我們同樣一一來介紹下他們的構造方法~

1.構造方法詳解1)BitmapShader(映像渲染)

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

使用一張位元影像作為紋理來對某一地區進行填充，參數依次：
bitmap：用來作為填充的位元影像；
tileX：X軸方向上位元影像的銜接形式；
tileY：Y軸方向上位元影像的銜接形式；
而這個Shader.TileMode有三種：
CLAMP就是如果渲染器超出原始邊界範圍，則會複製邊緣顏色對超出範圍的地區進行著色，
REPEAT則是平鋪形式重複渲染，MIRROR則是在橫向和縱向上以鏡像的方式重複渲染位元影像。

2)ComposeShader(混合渲染)

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

渲染效果的疊加，看到PorterDuff就知道什麼了吧？比如將BitmapShader與LinearGradient的混合渲染
效果等。參數依次：
shaderA：第一種渲染效果
shaderB：第二種渲染效果
mode：兩種渲染效果的疊加模式

3)LinearGradient(線性渲染)

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：平鋪方式

4)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(梯度渲染)

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

掃描渲染，就是以某個點位中心旋轉一周所形成的效果！參數依次是：
cx：掃描的中心x座標
cy：掃描的中心y座標
colors：梯度漸層的顏色數組
positions：指定顏色數組的相對位置

可能從文字上我們可以簡單的知道下他們對應的一個大概作用，但是我們還是寫個代碼來
驗證下他們所起的作用，畢竟有碼(圖)有真相嗎~

2.使用程式碼範例：

運行：

實現代碼：

BitmapShaderView.java：

/** * Created by Jay on 2015/11/4 0030. */public class BitmapShaderView extends View {    private Bitmap mBitmap = null;    private ShapeDrawable sDrawable = null;    private Paint mPaint = null;    private int bitW = 0, bitH = 0;     //Bitmap寬高    private Shader mBitmapShader = null;   //Bitmap渲染    private Shader mLinearGradient = null; //線性漸層渲染    private Shader mComposeShader = null; //混合渲染    private Shader mRadialGradient = null; //環形漸層渲染    private Shader mSweepGradient = null; //梯度渲染    public BitmapShaderView(Context context) {        this(context, null);    }    public BitmapShaderView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public BitmapShaderView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    private void init() {        mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_cat);        bitW = mBitmap.getWidth();        bitH = mBitmap.getHeight();        mPaint = new Paint();        //建立BitmapShader        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);        //建立LinearGradient並設定漸層的顏色數組        mLinearGradient = new LinearGradient(0, 0, 100, 100,                new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.WHITE},                null, Shader.TileMode.REPEAT);        //混合渲染，這裡使用了BitmapShader和LinearGradient進行混合，可以試試其他~        mComposeShader = new ComposeShader(mBitmapShader, mLinearGradient, PorterDuff.Mode.DARKEN);        //環形漸層渲染        mRadialGradient = new RadialGradient(50, 200, 50,                new int[]{Color.GREEN, Color.RED, Color.BLUE, Color.WHITE},                null, Shader.TileMode.REPEAT);        //梯度渲染        mSweepGradient = new SweepGradient(30, 30, new int[]{Color.GREEN, Color.RED,                Color.BLUE, Color.WHITE}, null);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //將圖片裁剪為橢圓形        sDrawable = new ShapeDrawable(new OvalShape());        sDrawable.getPaint().setShader(mBitmapShader);        sDrawable.setBounds(0, 0, bitW, bitH);        sDrawable.draw(canvas);        //繪製線性漸層的矩形        mPaint.setShader(mLinearGradient);        canvas.drawRect(bitW, 0, bitW * 2, bitH, mPaint);        //繪製混合渲染效果        mPaint.setShader(mComposeShader);        canvas.drawRect(0, bitH, bitW , bitH * 2, mPaint);        //繪製環形漸層        mPaint.setShader(mRadialGradient);        canvas.drawCircle(bitW * 2.8f, bitH / 2, bitH / 2, mPaint);        //繪製梯度漸層        mPaint.setShader(mSweepGradient);        canvas.drawRect(bitW, bitH, bitW * 2, bitH * 2, mPaint);    }}

就那麼一百來行代碼，就不用解釋了吧，如果覺得有疑惑的，動手試試~