Canvas渐变属性绘制
五颜六色,七彩缤纷。有时候我们的UI设计稿也极尽色彩之能,比如下图这样:
这种渐变效果我们能画吗?不得不说,Android
系统的基础构架还是很强大的,我们可以使用LinearGradient
进行绘制,与其相关的还有SweepGradient
,RadialGradient
.
LinearGradient
,SweepGradient
及RadialGradient
均为Shader
子类,所以与前文类似,我们只需要调用paint.setShader
方法将对象设置进去,然后进行绘制即可。
LinearGradient
使用代码如下:
int[] mColors = {Color.RED,Color.YELLOW,Color.GREEN,Color.BLUE};
//从(0,0)到(400,400)绘制线性渐变,也就是对角线区域为渐变水平线
LinearGradient linearGradient =
new LinearGradient(0, 0, 400, 400, mColors, null, Shader.TileMode.MIRROR);
paint.setShader(linearGradient);
canvas.drawRect(0,0,800,800,paint);
paint.setTextSize(400);
//使用渐变着色器绘制文本注意
canvas.drawText("注意:",200,1600,paint);
上述代码中我们使用的LinearGradient
的构造原型是:LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],@Nullable float positions[], @NonNull TileMode tile)
,其中:
-
x0
,y0
,x1
,y1
:分别表示x轴及y轴起终点 -
colors
:是一个颜色数组,表示渐变的颜色序列,我们这里依次是红黄绿蓝 -
positions
:表示各个颜色在总长度上所占的比例,每个元素的取值范围在0到1之间,总体的和应该等于1,如果每个颜色的长度都相同,则可以取null
-
tile
:绘制模式,前文已介绍
当然我们也可以通过修改x0
,y0
,x1
,y1
的值使其变成水平或竖直方向的渐变效果,当x0=x1
时,绘制出来的效果为垂直方向的颜色渐变,当y0=y1
时,绘制出来效果是水平方向的颜色渐变。
LinearGradient
还有一个构造原型:
LinearGradient(float x0, float y0, float x1, float y1,
@ColorInt int color0, @ColorInt int color1,
@NonNull TileMode tile)
和上一个的区别是,这个构造原型里指定的颜色比较单一,只用指定起始颜色color0
和结束颜色color1
即可。
SweepGradient
SweepGradient
-扫描渲染,也被称为梯度渲染,经常被用来实现雷达扫描效果。它的构造函数也有两个,第一个SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[])
,这个构造函数中:
-
cx
,cy
:绘制的中心点坐标 -
colors
:用于绘制渐变效果的颜色数组,至少有两个元素,一个开始颜色,一个结束颜色 -
positions
:同LinearGradient
中的positions
,用于指定各个颜色所占的长度比例,每个元素的取值范围在0到1之间,总体的和应该等于1,如果比例一样,则可以取null
第二个SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1)
,这个构造函数中只需要指定中心坐标和开始结束颜色就好。
使用代码如下:
float[] sweepPositions = {0.1f,0.1f,0.8f};
SweepGradient sweepGradient = new SweepGradient(550,850, sweepColors, sweepPositions);
paint.setShader(sweepGradient);
canvas.drawRect(100,700,1000,1000,paint);
运行效果:
RadialGradient
RadialGradient
-环形渲染,用它可以实现水波纹动画,同样有两个构造函数,第一个是RadialGradient(float centerX, float centerY, float radius,@NonNull @ColorInt int colors[], @Nullable float stops[],@NonNull TileMode tileMode)
其中:
-
centerX
,centerY
:圆环所在圆的圆心坐标 -
radius
:绘制半径 -
colors
:绘制的渐变颜色数组 -
stops
:各颜色所占的百分比,相同则取null -
tileMode
:绘制模式,前文已介绍
另一个构造函数是RadialGradient(float centerX, float centerY, float radius,@ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode)
,直接声明圆心位置颜色和边界颜色,其他参数与第一个构造函数参数含义一致。
代码如下:
int[] radialColors = {Color.RED,Color.YELLOW,Color.GREEN};
RadialGradient radialGradient = new RadialGradient(700,1700,200,radialColors,null,TileMode.REPEAT);
paint.setShader(radialGradient);
canvas.drawCircle(700,1700,700,paint);
运行效果:
由于代码中设置的绘制模式是TileMode.REPEAT
,所以红黄绿交替重复绘制。
原文始发于微信公众号(小海编码日记):View绘制系列(13)-Canvas渐变属性绘制
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/67899.html