Android中的自绘View的那些事儿(三)之 颜色渐变渲染器:LinearGradient、RadialGradient 和 SweepGradient的简介
2017-11-27 20:09
691 查看
我们在上一篇文章《Android中的自绘View的那些事儿(二)之 Shader渲染器和BitmapShader位图渲染器的简介》介绍了渲染器基类Shader以及它五个子类中的BitmapShader位图渲染器的使用,今天我们继续来谈谈LinearGradient线性渲染器、RadialGradient环形渲染器和
SweepGradient梯度渲染器这三个颜色渐变渲染器
上面代码中,定义了一个LinearGradient,前面4个参数指定颜色渐变的两个坐标,第5个参数是一个颜色数组,这里是红、绿、蓝以及黄,第6个参数是颜色分布的比例
上面代码中,定义了两个RadialGradient,其中RadialGradientA指定的圆心坐标和半径都跟绘出的圆保持一致,而RadialGradientB则在半径上加了50像素
上面代码中,定义了一个SweepGradient,参数都很简单,分别是跟绘制保持一至的圆心还有颜色数组和颜色分布数组
SweepGradient梯度渲染器这三个颜色渐变渲染器
LinearGradient线性渲染器
LinearGradient就是创建一个沿着直线绘制线性渐变的渲染器。我们来看看它的构造函数:LinearGradient (float x0, // 颜色渐变的起点X轴坐标 float y0, // 颜色渐变的起点Y轴坐标 float x1, // 颜色渐变的终点X轴坐标 float y1, // 颜色渐变的终点Y轴坐标 int[] colors, // 渐变分布的颜色数组,即是渐变从始点到终点的颜色过渡数组,数组长度不限,但决不能为空 float[] positions, //渐变分布的颜色数组对应的位置,取值范围是[0-1]的浮点值数组,数组长度要和colors保持一致,也可为空,若为空,则表示颜色均匀分布 Shader.TileMode tile) // 渲染平铺模式
示例:
public class MyView extends View { public MyView(Context context) { this(context, null, 0); } public MyView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getWidth(); int height = 500; int[] colors = { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW}; float[] positions = { 0f, 0.5f, 0.8f, 1f }; LinearGradient linearGradient = new LinearGradient(0, 0, width, 0, colors,positions, Shader.TileMode.CLAMP); Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setShader(linearGradient); canvas.drawRect(0, 0, width, height, paint); } }
上面代码中,定义了一个LinearGradient,前面4个参数指定颜色渐变的两个坐标,第5个参数是一个颜色数组,这里是红、绿、蓝以及黄,第6个参数是颜色分布的比例
运行效果:
RadialGradient环形渲染器
RadialGradient就是创建一个渲染中心和半径的径向渐变的渲染器。我们来看看它的构造函数:RadialGradient (float centerX, // 圆心的X坐标 float centerY, // 圆心的Y坐标 float radius, // 圆的半径 int[] colors, // 渐变分布的颜色数组(跟前面介绍LinearGradient的colors一样) float[] stops, // 渐变分布的颜色数组对应的位置(跟前面介绍LinearGradient的positions参数一样) Shader.TileMode tileMode) // 渲染平铺模式
示例:
public class MyView extends View { public MyView(Context context) { this(context, null, 0); } public MyView(Context context, AttributeSetattrs) { this(context, attrs, 0); } public MyView(Context context, AttributeSetattrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getWidth(); int height = getHeight(); int radius = 200; int[] colors = { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW}; float[] positions = { 0f, 0.9f, 0.95f, 1f }; Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); RadialGradient radialGradientA = new RadialGradient(width / 2, height / 4, radius,colors, positions, Shader.TileMode.CLAMP); paint.setShader(radialGradientA); canvas.drawCircle(width / 2, height / 4, radius,paint); RadialGradient radialGradientB = new RadialGradient(width / 2, height / 4 * 3 + 50, radius, colors, positions,Shader.TileMode.CLAMP); paint.setShader(radialGradientB); canvas.drawCircle(width / 2, height / 4 * 3, radius, paint); } }
上面代码中,定义了两个RadialGradient,其中RadialGradientA指定的圆心坐标和半径都跟绘出的圆保持一致,而RadialGradientB则在半径上加了50像素
运行效果:
SweepGradient梯度渲染器
SweepGradient就是在中心点绘制扫描梯度的渲染器。我们来看看它的构造函数:SweepGradient (float cx, // 圆心的X坐标 float cy, // 圆心的Y坐标 int[] colors, // 渐变分布的颜色数组(跟前面介绍LinearGradient的colors一样) float[] positions) // 渐变分布的颜色数组对应的位置(跟前面介绍LinearGradient的positions参数一样)
示例
public class MyView extends View { public MyView(Context context) { this(context, null, 0); } public MyView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getWidth(); int height = getHeight(); int radius = 200; int[] colors = { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW}; float[] positions = { 0f, 0.9f, 0.95f, 1f }; Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); SweepGradient sweepGradient = new SweepGradient(width / 2, height / 2, colors, positions); paint.setShader(sweepGradient); canvas.drawCircle(width / 2, height / 2, radius, paint); } }
上面代码中,定义了一个SweepGradient,参数都很简单,分别是跟绘制保持一至的圆心还有颜色数组和颜色分布数组
运行效果:
相关文章推荐
- Android 渐变 LinearGradient RadialGradient SweepGradient
- Android-LinearGradient实现TextView字体渐变的效果
- Android-LinearGradient实现TextView字体渐变的效果
- Android中的自绘View的那些事儿(二)之 Shader渲染器和BitmapShader位图渲染器的简介
- Android 实现字体颜色渐变(滚动),包括表情:AnimatorSet、LinearGradient
- Android渲染器Shader:环状放射渐变渲染器RadialGradient(三)
- Android渲染器Shader:环状放射渐变渲染器RadialGradient(三)
- Android渲染器Shader:梯度渐变扫描渲染器SweepGradient(二)
- Android渲染器Shader:梯度渐变扫描渲染器SweepGradient(二)
- Android中的自绘View的那些事儿(四)之 ComposeShader组合渲染器的简介
- Android中的自绘View的那些事儿(五)之 遮罩滤镜:BlurMaskFilter 和 EmbossMaskFilter 的简介
- Android 颜色渲染(六) RadialGradient 环形渲染
- Android 颜色渲染(八) SweepGradient扫描/梯度渲染
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
- android viewPager 滑动标题颜色渐变效果
- UnityEditor中建立两个Color,实现mesh的颜色渐变(Gradient)(GUI.changed,SceneView.RepaintAll())
- android 监听webView滑动距离和标题栏颜色渐变
- Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
- highcharts图表组件实战经验篇:如何设置柱状图柱子立体(颜色渐变)效果类似3D效果之linearGradient和stops
- Android 颜色渐变(gradient)的实现总结