Android View之Shader

(一)Shader概述

Shader是着色器,其作用是给图像着色,配合画笔Paint使用。一般不直接使用,它有自己的子类:BitmapShader、LinearGradient、SweepGradient、RadialGradient、ComposeShader等。

(二)TileMode平铺模式

1> Shader.TileMode.CLAMP:

边缘拉伸模式,边缘会往外拉伸的一个像素来填充区域。

2> Shader.TileMode.MIRROR:

镜像模式,关于X轴/Y轴(镜面对称)翻转复制。

3> Shader.TileMode.REPEAT:

重复模式,关于X轴/Y轴平移复制。

(三)Shader实例

BitmapShader 的用法:

1
2
3
4
5
6
7
8
9
10
11
/**
* 调用它来创建一个新的着色器,它将用位图绘制。
*
* @param bitmap 在着色器内部使用的位图。
* @param tileX 在X轴绘制位图的平铺模式。
* @param tileY 在Y轴绘制位图的平铺模式。
*/
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
// 添加着色器
mPaint.setShader(mBitmapShader);
canvas.drawCircle(0, 0, 400, mPaint);

LinearGradient 的用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* 线性渐变着色器。注意:起点和终点是相对于屏幕坐标系而言的。
* @param (x0, y0) 渐变起点
* @param (x1, y1) 渐变终点
* @param color0 起点的颜色
* @param color1 终点的颜色
* @param title 平铺模式
*/
mShader = new LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile);
mPaint.setShader(mShader);


/**
* 线性渐变着色器。注意:渐变区域遵循(left, top, right, bottom)。
* (x0, y0) 渐变起点
* (x1, y1) 渐变终点
* colors 传入颜色数组
* positions 传入位置数组(可以为null) 取值范围[0, 1F]
* title 平铺模式
*/
mShader = new LinearGradient(-200, -200, 200, 200, new int[]{Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE},
new float[]{0, 0.3F, 0.6F, 0.8F}, Shader.TileMode.CLAMP);
mPaint.setShader(mShader);

SweepGradient 的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 梯度渐变着色器,围绕中心点绘制扫描梯度。
*
* @param cx The x-coordinate of the center
* @param cy The y-coordinate of the center
* @param color0 The color to use at the start of the sweep
* @param color1 The color to use at the end of the sweep
*/
mShader = new SweepGradient(0, 0, int color0, int color1);
mPaint.setShader(mShader);


/**
* 梯度渐变着色器,围绕中心点绘制扫描梯度。
* @param cx The x-coordinate of the center
* @param cy The y-coordinate of the center
* colors 传入颜色数组
* positions 传入位置数组(可以为null) 取值范围[0, 1F]
*/
mShader = new SweepGradient(0, 0, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[]{0.2F, 0.5F, 0.8F});
mPaint.setShader(mShader);

RadialGradient 的用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* 径向渐变着色器,从圆形中心向四周渐变。
*
* @param centerX The x-coordinate of the center of the radius
* @param centerY The y-coordinate of the center of the radius
* @param radius Must be positive. The radius of the circle for this gradient
* @param centerColor The color at the center of the circle.
* @param edgeColor The color at the edge of the circle.
* @param tileMode The Shader tiling mode
*/
mShader = new RadialGradient(0, 0, 200, Color.RED, Color.YELLOW, Shader.TileMode.CLAMP);
mPaint.setShader(mShader);


/**
* 径向渐变着色器,从圆形中心向四周渐变。
*
* @param centerX The x-coordinate of the center of the radius
* @param centerY The y-coordinate of the center of the radius
* @param radius Must be positive. The radius of the circle for this gradient
* @param centerColor The color at the center of the circle.
* @param edgeColor The color at the edge of the circle.
* @param tileMode The Shader tiling mode
*/
mShader = new RadialGradient(0, 0, 200, new int[]{Color.RED, Color.YELLOW, Color.BLUE},
new float[]{0.1F, 0.4F, 0.5F}, Shader.TileMode.CLAMP);
mPaint.setShader(mShader);

ComposeShader 的用法

两个Shader组合在一起作为一个新Shader

1
2
3
4
5
Shader shader01 = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
Shader shader02 = new SweepGradient(0, 0, new int[]{Color.RED, Color.YELLOW, Color.GREEN}, new float[]{0.2F, 0.5F, 0.8F});

mPaint.setShader(new ComposeShader(shader01, shader02, PorterDuff.Mode.DARKEN));
canvas.drawCircle(0, 0, 300, mPaint);

Shader的矩阵变换

1
2
3
4
5
6
7
Matrix matrix = new Matrix();
matrix.preTranslate(100, 100);
matrix.preRotate(20);
matrix.preScale(0.5f, 1);
matrix.preSkew(2f, 1f);
// 设置Shader的变换矩阵
mShader.setLocalMatrix(matrix);
Hawky wechat
欢迎订阅我的微信公众号
坚持原创技术分享,您的支持将鼓励我继续创作!

分享