Android着色器Shader使用誤區

[TOC]

  Shader的基本使用很少說了，請參考blog.csdn.net/iispring/ar…，這裏咱們只講解shader使用過程當中的小細節或誤區。

BitmapShader

BitmapShader加載的原圖以下：

測試代碼以下：

public class BitmapShaderView extends View {
    private Paint mPaint;
    private BitmapShader mShader;
    private int mWidth;
    private int mHeight;
    private int mBitmapWidth;
    private int mBitmapHeight;
    private Matrix mMatrix;
    private int mViewMin;
    private int mBitmapMin;

    public BitmapShaderView(Context context) {
        this(context, null);
    }

    public BitmapShaderView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BitmapShaderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init(context);
    }

    private void init(Context context) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_test);

        mBitmapWidth = bitmap.getWidth();
        mBitmapHeight = bitmap.getHeight();

        mMatrix = new Matrix();
        mShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = getWidth();
        mHeight = getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //測試調用函數
        testX(canvas);
    }
}
複製代碼

XML中定義以下：

<com.example.robincxiao.androidcanvas.shader.BitmapShaderView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="10dp" />
複製代碼

爲了進行測試，咱們將BitmapShaderView的寬高都定義爲200dp，這個值大於Bitmap的原始寬高。

繪製圖形大小與Bitmap大小關係

1.繪製圖形大小與Bitmap大小相等

用以下方法替換上面的testX方法

private void test0(Canvas canvas) {
    canvas.drawColor(Color.GRAY);
    mPaint.setShader(mShader);
    canvas.drawRect(0, 0, mBitmapWidth, mBitmapHeight, mPaint);
}
複製代碼

此時繪製的Rect與Bitmap的實際大小一致，獲得以下效果：

2.繪製圖形大小大於Bitmap實際大小

咱們將test0中代碼修改以下

private void test0(Canvas canvas) {
    canvas.drawColor(Color.GRAY);
    mPaint.setShader(mShader);
    canvas.drawRect(0, 0, mWidth, mHeight, mPaint);
}
複製代碼

此時繪製的Rect大小是整個View，遠大於Bitmap的實際大小，獲得以下效果：

對比「1.繪製圖形大小與Bitmap大小相等」的結果，此時發現BitmapShader的第二、3個參數有做用了

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)
複製代碼

小結：當繪製的圖形區域大於Bitmap實際大小時（其實這個說法不許備，具體看後面分析），會按照BitmapShader的第二、3個參數的設置進行着色。

3.繪製圖形大小小於Bitmap實際大小

咱們將test0中代碼修改以下

private void test0(Canvas canvas) {
    canvas.drawColor(Color.GRAY);
    mPaint.setShader(mShader);
    canvas.drawRect(0, 0, mBitmapWidth/2, mBitmapHeight/2, mPaint);
}
複製代碼

此時繪製的Rect大小是隻有Bitmap實際大小的通常，獲得以下效果：

對比「1.繪製圖形大小與Bitmap大小相等」的結果，發現源圖像只有左上角2/3區域被顯示出來了。

總結：在使用BitmapShader進行着色時，要理解繪製圖形大小與Bitmap實際大小最終對着色結果的影響。

座標系對BitmapShader的影響

private void test0(Canvas canvas) {
    canvas.drawColor(Color.GRAY);
    mPaint.setShader(mShader);
    canvas.translate(mWidth/2, mHeight/2);
    canvas.drawRect(0, 0, mBitmapWidth, mBitmapHeight, mPaint);
}
複製代碼

咱們將座標系遠點移動到BitmapShaderView的中心，獲得的結果以下：

發現源Bitmap繪製的啓動已經轉移到BitmapShaderView的中心，但這還說明不了什麼，由於drawRect的啓動也是從中心開始的，獲得上圖所示的結果也是理所固然的。下面咱們再修改test0代碼以下：

private void test0(Canvas canvas) {
    canvas.drawColor(Color.GRAY);
    mPaint.setShader(mShader);
    canvas.translate(mWidth/2, mHeight/2);
    canvas.drawRect(-mBitmapWidth/2, -mBitmapHeight/2, mBitmapWidth/2, mBitmapHeight/2, mPaint);
}
複製代碼

咱們以BitmapShaderView的中心爲中心畫一個正方形，這個正方形的大小與源Bitmap大小是一致的，獲得的結果以下：
（注：BitmapShader的第二、3個參數爲REPEAT）

獲得這樣的結果可能會讓不少人以爲奇怪，按照「1.繪製圖形大小與Bitmap大小相等」的分析，獲得的結果應該與「1.繪製圖形大小與Bitmap大小相等」的結果是一致的。這就是我想講清楚的關鍵點：

• BitmapShader所加載的Bitmap，顯示的規則是：從當前座標系的圓點從左到右、從上到下的顯示；所以Bitmap的繪製是受座標系影響的；
• canvas實際繪製區域成爲A，Bitmap自身繪製的區域B；A與B相交的區域顯示B的內容，A中其它區域將按照BitmapShader的第2、三參數顯示；

LinearGradient、RadialGradient、SweepGradient的使用過程當中，一樣要注意上面的問題。