Paint的高级渲染

Paint的高级渲染主要用到方法：
public Shader setShader(Shader shader);
Shader：着色器，Canvas的drawXXXX这个方法是画具体的形状，画笔的shader定义的就是图形的着色和外观，即Canvas定义了一个区域（如：矩形，圆形等），Paint的Shader就是给这个区域填充内容（内容可以是图片，颜色等），也就是着色。

一.Shader的继承关系：

这里写图片描述

Shader类型	功能描述	应用场景
BitmapShader	位图图像渲染，用BitMap对绘制的图形进行渲染着色，简单来说是用图片来填充指定的区域，可实现效果	圆形头像，放大镜效果
LinearGradient	线性渲染	霓虹灯文字，倒影图片，取色器
SweepGradient	渐变渲染/梯度渲染	雷达扫描效果
RadialGradient	环形渲染	水波纹效果
ComposeShader	组合渲染	可以把前面集中结合起来实现丰富的效果

二、实例练习

1.BitmapShader：

    /**
     * Call this to create a new shader that will draw with a bitmap.
     * 
     * @param bitmap            The bitmap to use inside the shader
     * @param tileX             The tiling mode for x to draw the bitmap in.
     * @param tileY             The tiling mode for y to draw the bitmap in.
     */
    public BitmapShader(@NonNull Bitmap bitmap, TileMode tileX, TileMode tileY){}

可以看出，BitmapShader构造函数需要三个参数：
-bitmap : 图片
-tileX : 图片x轴方向上的拉伸模式
-tileY : 图片在y轴方向上的拉伸模式

TileMode 拉伸形式，当图片比我们指定的图形(如：Rect)区域小的时候，会根据我们指定的拉伸模式，来拉伸我们的图片
    CLAMP --是拉伸最后一个像素并铺满
    MIRROR ---是横向纵向不足处不断翻转镜像平铺
    REPEAT ---类似电脑壁纸，横向纵向不足的重复放置

代码

BitmapShader bitmapShader = new BitmapShader(mBitMap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setShader(bitmapShader);
mPaint.setAntiAlias(true);
canvas.drawCircle(mHeight , mHeight , mHeight , mPaint);

不同模式的实现效果如下：

模式	实现效果
Shader.TileMode.CLAMP
Shader.TileMode.REPEAT
Shader.TileMode.MIRROR

正常情况下，实现圆形头像的话，会改变头像的大小，使之与圆形区域一样大，或者改变圆形区域的大小，如：

BitmapShader bitmapShader = new BitmapShader(mBitMap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
mPaint.setShader(bitmapShader);
mPaint.setAntiAlias(true);
float scale = ((float) Math.max(mWidth, mHeight)) / Math.min(mWidth, mHeight);
Matrix matrix = new Matrix();
matrix.setScale(scale, scale);
canvas.drawCircle(mHeight / 2, mHeight / 2, mHeight / 2, mPaint);
//canvas.drawOval(new RectF(0, 0, mWidth, mHeight), mPaint);//画椭圆
//canvas.drawRect(new Rect(0, 0, 600, 800), mPaint);//矩形

实现效果：

圆形头像	椭圆头像	矩形头像

圆形头像的其他实现方式：

ShapeDrawable shapeDrawable = new ShapeDrawable(new OvalShape());
BitmapShader bitmapShader = new BitmapShader(mBitMap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
shapeDrawable.getPaint().setShader(bitmapShader);
shapeDrawable.setBounds(0, 0, mWidth, mWidth);
shapeDrawable.draw(canvas);

通过ShapeDrawable来实现圆形头像，其实就是通过ShapeDrawable来指定一个圆形的区域，相当于是封装了一下(里面封装了画笔，图形区域和绘制方法)。

2.LinearGradient：线性渲染
LinearGradient有两个构造函数，渲染方式：从左上角向右下角渲染（即渐变）。

扫描二维码关注公众号，回复： 6638474 查看本文章

/**
* x0, y0, 起始点
*  x1, y1, 结束点
* int[]  mColors, 中间依次要出现的几个颜色
* float[] positions,数组大小跟colors数组一样大，中间依次摆放的几个颜色分别放置在那个位置上(参考比例从左往右)，各个颜色显示的占比，如new int[]{0.1,0.2,0.3,0.4}
*    tile
*/
public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],
TileMode tile);
public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,
TileMode tile)

线性渲染支持但颜色和多颜色，positions[]可以传null，有系统自动分配位置。
实例：

int[] mColors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};
LinearGradient linearGradient = new LinearGradient(0, 0, 800, 800,Color.RED,Color.YELLOW ,Shader.TileMode.CLAMP);
//LinearGradient linearGradient = new LinearGradient(0, 0, 800, 800, mColors, null,                       //Shader.TileMode.CLAMP);
mPaint.setShader(linearGradient);
canvas.drawRect(0, 0, 800, 800, mPaint);

实现效果：

两种颜色	多种颜色

3.RadialGradient:环形渐变
构造函数，与LinearGradient类似，不在赘述。渲染方式：从圆心位置开始，向外层渲染。

 public RadialGradient(float centerX, float centerY, float radius,
               @NonNull int colors[], @Nullable float stops[], @NonNull TileMode tileMode);
 public RadialGradient(float centerX, float centerY, float radius,
            int centerColor, int edgeColor, @NonNull TileMode tileMode)

环形渲染从圆心开始，一次向外层画，

RadialGradient radialGradient = new RadialGradient(400, 400, 400, mColors, null, Shader.TileMode.CLAMP);
        mPaint.setShader(radialGradient);
        canvas.drawCircle(400,400,400,mPaint);

实现效果：这里写图片描述

4.SweepGradient：梯度渲染
指定一个圆心，从3点钟方向开始，沿着顺时针依次画出给定的颜色。
实例：

int[] mColors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};
SweepGradient sweepGradient = new SweepGradient(400, 400, mColors, null);
mPaint.setShader(sweepGradient);
//canvas.drawCircle(400, 400, 300, mPaint);
canvas.drawRect(100,100,700,700,mPaint);

圆形	矩形

5.ComposeShader：组合渐变
用ComposeShader即可实现心形图渐变效果，如下：

/***************用ComposeShader即可实现心形图渐变效果*********************************/
        //创建BitmapShader，用以绘制心
        BitmapShader bitmapShader = new BitmapShader(mBitMap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        //创建LinearGradient，用以产生从左上角到右下角的颜色渐变效果
        LinearGradient linearGradient = new LinearGradient(0, 0, mWidth, mHeight, Color.GREEN, Color.BLUE, Shader.TileMode.CLAMP);
        //bitmapShader对应目标像素，linearGradient对应源像素，像素颜色混合采用MULTIPLY模式
        ComposeShader composeShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);
        //将组合的composeShader作为画笔paint绘图所使用的shader
        mPaint.setShader(composeShader);
        //用composeShader绘制矩形区域
        canvas.drawRect(0, 0, mWidth, mHeight, mPaint);

实现效果：这里写图片描述

代码：
1、倒影图片效果：
https://github.com/meiSThub/DN_Homework/blob/master/app/src/main/java/com/mei/test/ui/paint/InvertedImageActivity.java
2、雷达扫描：
https://github.com/meiSThub/DN_Homework/blob/master/app/src/main/java/com/mei/test/ui/paint/RadarActivity.java
3、水波纹按钮：
https://github.com/meiSThub/DN_Homework/blob/master/app/src/main/java/com/mei/test/ui/paint/RippleActivity.java