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有两个构造函数,渲染方式:从左上角向右下角渲染(即渐变)。
/**
* 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