BitmapShader解析

BitmapShader是Shader的子类，它一般通过Paint.setShader(Shader shader)来设置。它只有一个构造函数

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

参数1：是用来着色的bitmap

参数2 ：绘制完一个完整的bitmap后，视图剩余X轴方向的绘制方式

参数3：绘制完一个完整的bitmap后，视图剩余Y轴方向的绘制方式

参数2 参数3的绘制方式有：

CLAMP 拉伸  基于绘制的第一个完成的bitmap，X轴方向基本bitmap右边最后一个像素拉伸，Y轴方向基于bitmap下方最后一个像                         素拉伸

REPEAT 重复 基于绘制的第一个完成的bitmap，X轴Y轴方向重复的绘制bitmap

MIRROR 镜像 基于绘制的第一个完成的bitmap,横向不断翻转重复，纵向不断翻转重复

这里有一点要注意的是BitmapShader的绘制顺序是先绘制Y轴然后在基于Y轴的绘制X轴。

下面来看看三种模式的效果

1、X轴 Y轴都是CLAMP  X Y 轴都是以最后一个像素向外拉伸

图一

2、X，Y轴都是REPEAT  X Y轴都是重复绘制bitmap

图二

3、X Y轴都是MIRROR  X Y轴不断的翻转重复

图三

4、X轴REPEAT  Y轴CLAMP

图四

这里X轴方向上面是按重复绘制bitmap，而下面不是了呢？这个和BitmapShader的绘制顺序有关。BitmapShader是先绘制Y轴然后在基于Y轴的绘制，绘制X轴。来看看下面这张图

图五

我们把第四张图划分一下区域。实际的绘制流程是：首先是绘制标号为1的区域，然后在绘制标号为3的区域。最后绘制标号为2和4的区域，它们分别，标号2是基于标号1重复绘制，标号4是基于标号3重复绘制。

好了，看了上面几张图，也大概了解了这三个模式的绘制方式，我们先来看看代码。

public class BitmapShaderView extends View {

    private Paint mPaint;
    private Rect rect;
    private Bitmap bitmap;

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

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

        int screenWidth=ScreenUitl.getScreenWidth(context);
        int screenHeight=ScreenUitl.getScreenHeight(context);


        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

        bitmap=BitmapFactory.decodeResource(getResources(), R.mipmap.c);

        rect=new Rect(0,0,screenWidth,screenHeight);

        mPaint.setShader(new BitmapShader(bitmap,Shader.TileMode.MIRROR,Shader.TileMode.MIRROR));
    }

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

        canvas.drawRect(rect,mPaint);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/head" />

  <com.self.mydemoproject.widget.bitmapShader.BitmapShaderView
      android:id="@+id/content_iv"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>

 

在这里我们把BitmapShaderView设置布满屏幕，在BitmapShaderView绘制Rect的时候也是设置绘制屏幕宽高的Rect。那如果我们绘制的Rect的时候，绘制的宽高不是屏幕的宽高二十小于屏幕宽高呢。下面我们来看看效果

在看看我们代码里面的设置

      mPaint=new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

        bitmap=BitmapFactory.decodeResource(getResources(), R.mipmap.c);

        rect=new Rect(0,0,bitmap.getWidth(),bitmap.getHeight());

        mPaint.setShader(new BitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.CLAMP));

这里我们设置Rect的宽高就是bitmap的宽高，这里只显示了一个位图。也就是上面标号为1的区域，那标号为2，3，4区域怎么不显示呢。

我们在来重新设置一下Rect。看看效果

 mPaint=new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

        bitmap=BitmapFactory.decodeResource(getResources(), R.mipmap.c);

        rect=new Rect(200,500,bitmap.getWidth()+200,bitmap.getHeight()+500);

        mPaint.setShader(new BitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.CLAMP));

重新设置了Rect的区域后，发现区域1竟然不显示了，显示的区域部分是区域3，部分是区域4。

不管Rect如果变化，BitmapShaderView的宽高始终是屏幕的宽高，那我们设置BitmapShaderView的宽高，移动一下它的位置试试。

LinearLayout.LayoutParams layoutParams= (LinearLayout.LayoutParams) content_iv.getLayoutParams();
        layoutParams.setMargins(200,500,0,0);
        content_iv.setLayoutParams(layoutParams);

 mPaint=new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

        bitmap=BitmapFactory.decodeResource(getResources(), R.mipmap.c);

        rect=new Rect(0,0,bitmap.getWidth()*2,bitmap.getHeight()*2);

        mPaint.setShader(new BitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.CLAMP));

我们把BitmapShaderView 左边Margin200,上边Margin500，此时BitmapShaderView的左上角坐标为（200，500）。rect改为（0，0，width*2,height*2)。看效果

相当于是把图五左移200，下移500。

总结：

BitmapShader的绘制原理是从视图原点开始绘制第一个Bitmap,然后在按设置的模式先绘制Y轴，然后根据Y轴的绘制，绘制X轴这样去绘制超过Bitmap的部分。按这样的原理绘制的图形此时并不会显示，只有当canvas调用draw绘制后，才显示canvas绘制的那部分。