Android绘图Canvas十八般武器之Shader详解及实战篇(下)

最新推荐文章于 2021-05-26 08:01:14 发布

frank909

最新推荐文章于 2021-05-26 08:01:14 发布

阅读量1.3w

点赞数 5

分类专栏： Android笔记 Android 中级进阶相关的知识点文章标签： android canvas sweepradia xfermode 线性渐变

本文链接：https://blog.csdn.net/briblue/article/details/53694042

版权

本文详细介绍了Android中Canvas的Shader使用，包括LinearGradient、RadialGradient、SweepGradient和ComposeShader的原理与实战应用，通过实例展示了如何创建线性、环形、扫描和混合渐变效果，以及实现倒影功能。

摘要由CSDN通过智能技术生成

前言

上一篇《Android绘图Canvas十八般武器之Shader篇(上)》我们知道了Bitmap的用法，及TileMode的详细情况。接下来，这一篇作为整个知识体系的下半部要讲的是Shader的其它几个子类。
首先声明，网上很多称之为渲染，如图形渲染，线性渲染等，而在这里我更喜欢称为渐变。

LinearGradient 线性渐变渲染器

LinearGradient中文翻译过来就是线性渐变的意思。线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d，终点设置一个颜色值如#CC423C，然后在一个区域内绘图，这个图像的颜色将呈现非常美妙的效果，颜色会从起点颜色到终点颜色过渡。给一张图，大家直观感受一下
这里写图片描述

我们看LinearGradient的API，发现它只有两个构造方法，非常简单。

LinearGradient (float x0, 
                float y0, 
                float x1, 
                float y1, 
                int color0, 
                int color1, 
                Shader.TileMode tile)

//x0 和y0是颜色渐变的起点坐标。
//x1和y1是颜色渐变的终点坐标。
//color0是起点颜色值 
//color0是终点颜色值。
//tile 就是TileMode类型参数，这个我们上一篇已经讲过了。

LinearGradient的用法。

//1   创建LinearGradient对象，并设置它的起点坐标，终点坐标，起点颜色值，终点颜色值，然后设置TileMode
mShader = new LinearGradient(0,0,w,0,Color.parseColor("#faf84d"),
                Color.parseColor("#CC423C"), Shader.TileMode.CLAMP);  

//2  将Shader赋值给Paint对象。
mPaint.setShader(mShader);  

//3  绘制图形
canvas.drawRect(0,0,w,h/2,mPaint);

用法非常简单。

LinearGradient还有一个构造方法。

LinearGradient (float x0, 
                float y0, 
                float x1, 
                float y1, 
                int[] colors, 
                float[] positions, 
                Shader.TileMode tile)

需要注意的是，这里有一个int[] colors和float[] positions它们代表什么意思呢？
实际上LinearGradient除了可以指定起点颜色值和终点颜色值外，还有可以指定许多中间颜色值。就如彩虹一般。而colors[]数组存放的就是这样的颜色值组合。大家看看代码和图片效果就可能直观感受到。

//渐变的是一个颜色序列(#faf84d,#003449,#808080,#cc423c)
mShader = new LinearGradient(0,0,w,0,new int[]{Color.parseColor("#faf84d"),Color.parseColor("#003449"),
        Color.parseColor("#808080"),
        Color.parseColor("#CC423C")},null,Shader.TileMode.CLAMP);
mPaint.setShader(mShader);
canvas.drawRect(0,0,w,h/2,mPaint);