Android UI | Shader

Shader 着色器，相当于给图形填充内容。通过查看源码，可以知道他有5个子类

一、BitmapShader 位图图像渲染

位图图像渲染，用BitMap对绘制的图形进行渲染着色，简单来说是用图片对图形进行贴图
可以用于绘制 圆形图像、放大镜效果

案例

/**
 * TileMode.CLAMP 拉伸最后一个像素去铺满剩下的地方
 * TileMode.MIRROR 通过镜像翻转铺满剩下的地方。
 * TileMode.REPEAT 重复图片平铺整个画面（电脑设置壁纸）
*/
BitmapShader bitMapShader = new BitmapShader(mBitMap, Shader.TileMode.MIRROR,.TileMode.MIRROR);
mPaint.setShader(bitMapShader);
mPaint.setAntiAlias(true);

float scale = Math.max(mWidth,mHeight) / Math.min(mWidth,mHeight);
// 这里可以给图片做一个矩阵处理（缩放、拉伸、旋转等等）
Matrix matrix = new Matrix();
matrix.setScale(scale,scale);
bitMapShader.setLocalMatrix(matrix);

canvas.drawCircle(mHeight / 2,mHeight / 2, mHeight / 2 ,mPaint);

圆形头像也可以通过 ShaderDrawable 实现

//通过shapeDrawable也可以实现
ShapeDrawable shapeDrawble = new ShapeDrawable(new OvalShape());
shapeDrawble.getPaint().setShader(bitMapShader);
shapeDrawble.setBounds(0,0,mWidth,mWidth);
shapeDrawble.draw(canvas);

二、LinearGradient 线性渲染

霓虹灯文字，倒影图片

/**线性渐变
 * x0, y0, 起始点
 *  x1, y1, 结束点
 * int[]  mColors, 中间依次要出现的几个颜色
 * float[] positions,数组大小跟colors数组一样大，中间依次摆放的几个颜色分别放置在那个位置上(参考比例从左往右)
 *    tile
 */
LinearGradient linearGradient = new LinearGradient( 0, 0,800, 800, mColors, null, Shader.TileMode.CLAMP);
// linearGradient = new LinearGradient(0, 0, 400, 400, mColors, null, Shader.TileMode.REPEAT);
mPaint.setShader(linearGradient);
canvas.drawRect(0, 0, 800, 800, mPaint);

三、RadialGradient 环形渲染

水波纹效果

 RadialGradient mRadialGradient = new RadialGradient(300, 300, 100, mColors, null, Shader.TileMode.REPEAT);
mPaint.setShader(mRadialGradient);
canvas.drawCircle(300, 300, 300, mPaint);

四、SweepGradient 渐变渲染/梯度渲染

雷达扫描效果

SweepGradient mSweepGradient = new SweepGradient(300, 300, mColors, null);
mPaint.setShader(mSweepGradient);
canvas.drawCircle(300, 300, 300, mPaint);

五、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);