Android Canvas 编程之 Shader 用法

前言

上一篇《Android绘图Canvas十八般武器之Shader篇(上)》 我们知道了Bitmap的用法,及TileMode的详细情况。接下来,这一篇作为整个知识体系的下半部要讲的是Shader的其它几个子类。

首先声明,网上很多称之为渲染,如图形渲染,线性渲染等,而在这里我更喜欢称为渐变。

LinearGradient 线性渐变渲染器

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

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

LinearGradient的用法。

用法非常简单。

LinearGradient还有一个构造方法。

需要注意的是,这里有一个和它们代表什么意思呢?

实际上LinearGradient除了可以指定起点颜色值和终点颜色值外,还有可以指定许多中间颜色值。就如彩虹一般。而数组存放的就是这样的颜色值组合。大家看看代码和图片效果就可能直观感受到。

颜色很丰富是不是?颜色从一个颜色过渡到另外一个颜色直到过渡到终点颜色。

大家有没有注意到,我将上面代码中的置为,而它代表了什么呢?它其实与数组对应,代表了各个颜色值在位置,数组中的值大小范围从0.0到1.0,0.0代表起点位置,1.0代表终点位置。如果这个数组被置为空的话,颜色就会平均分配。,如果这个数组不为空呢?我们结合代码效果来讲解。

代码中并没有改变,只是多了,效果却不一样了。

需要注意的是,数组中的数组最好是由小到大,这是为什么呢?它不支持0.8 然后再到0.6之类。大家看代码。

可以看到颜色可以从0.6的位置过渡到0.8,后面的就不起作用了。

RadialGradient 环行渲染器

我喜欢称它为径向渐变,因为PHOTOSHOP中就对应有径向渐变的概念。

径向渐变,所谓径向就是辐射状,由中心向四周辐射。

径向渐变也只有两个构造方法,基本用法跟线性渐变差不多。

上代码。

效果:

同LinearGradient一样,这里也有一个颜色数组和位置数组,意义也是一样的,也可以为null,如果为null的话,数组的颜色就会平均分配在区域之中。否则,它对应的颜色就会按照比例填充。

SweepGradient 梯度渐变渲染器

梯度渐变,或者叫做扫描渐变。我觉得扫描更适合吧,它是指从x轴出发,以逆时钟为方向,以扫描360度形成的区域进行颜色的变换。

代码示例:

效果:

大家应该也明白这个方法中每个参数的含义。

我们把颜色丰富点,本来想弄成赤橙黄绿青蓝紫,结果因为懒,就随便弄了点,效果如下:

ComposeShader 组合渲染器

混合渲染,在这里我又开始称Shader为渲染了,因为ComposeShader不仅仅用于颜色,它能将两个Shader对象参考Xfermode规则进行颜色混合。

网上的一张图:

这张图详细的解释了混合模式的组合效果,我机会我也写一篇相关博文。

再看ComposeShader的两个构造方法。

接下来,我们写代码验证一下。

实战1

编写1个BitmapShader.

编写1个RadiasGradient。

将它们进行混合产生新的Shader.

以新的Shader绘制一个圆。

我们来看看混合后的效果是怎么样的。

哇,好梦幻的狗狗。

实战2 倒影功能

以前刚开始学Android的时候,项目里面要用到倒影,当时的自己是写不出来的,好在网上有现成的代码可以copy。现在我们可以运用ComposeShader来实现这么一个View。

需求分析

倒影与原图比例为1:4。

倒影与原图之间有5px的间隙。

倒影的下边缘不能太平整了,要尽量跟真实的一致。

好了为了节省篇幅,我只粘贴中的代码。

效果:

倒影出来了。

好吧,关于中部分就写完了。还有许多有趣的类和API,有时间我再写。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180830G1MBW300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券