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

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

前言

Android中绘图离不开的就是Canvas了，Canvas是一个庞大的知识体系，有java层的，也有jni层深入到Framework。Canvas有许多的知识内容，构建了一个武器库一般，所谓十八般武艺是也，Paint是Canvas的一个重要的合作伙伴，但今天要讲的不是Canvas也不是Paint，而是与Paint相关的知识点Shader.

什么是Shader？

Shader在英语辞典中被解释为着色器。查阅维基百科，有以下结论：

In the field of computer graphics, a shader is a computer program that is used to do shading: the production of appropriate levels of color within an image, or, in the modern era, also to produce special effects or do video post-processing. A definition in layperson’s terms might be given as “a program that tells a computer how to draw something in a specific and unique way.

在计算机图形领域，一个Shader是指一段用来着色的计算机程序，通常用来生成一张图片中适当等级的颜色值，或者是生成特殊的视觉效果，或者是对视频画面进行处理。对于非专业人士的角度来看，它可以被描述为–“一种告诉计算机怎么样通过某种特殊手段绘制一些图像的程序”。

看起来还是比较抽象难懂，但是我觉得正确理解它的定义是应该的，这能让我们真正写出非常高效的代码。

Android中也有Shader的概念，对照上面的定义，它应该也是将图形画面产生某种特殊效果的一类东西。具体是不是这样的呢？我可以先告诉你答案–是的。
为了提高大家对Shader的兴趣，先让大家看看通过Shader得到的一些效果图片。

是不是挺有趣啊？如果你对这些感兴趣，请跟随我的节奏，看下面内容。

Android中Shader相关知识点

看API终于不要翻墙了，其实我也一直没有翻墙，想看API的时候，直接去www.androidxref.com查看源码去了。那么现在可以直接上官网中文页面，查看了。Android中Shader的API地址为Shader

Android中对Shader是这样解释的

Shader是一种基类对象，它在图形绘制过程中返回一段段颜色值，通过调用Paint.setShader()方法，可以将它的子类安装进画笔，这样Paint对象在绘制过程中所获取的颜色就是来自Shader对象。

上面提到了Shader的子类，Shader有5个子类 BitmapShader, ComposeShader, LinearGradient, RadialGradient, SweepGradient。 本文的目的也是分别讲它的各个子类。

图片渲染器 BitmapShader

BitmapShader将一张图片当作纹理(在OpenGL中，纹理就是贴图的意思，可以理解为一个没有颜色的正文形被贴上了一张图片，这样视觉效果就是一张正方形的图片)来绘制。而这张图片可以通过设置BitmapShader的tiling mode来达到镜面和重复的效果。

BitmapShader (Bitmap bitmap, 
                Shader.TileMode tileX, 
                Shader.TileMode tileY)

上面是BitmapShader的构造方法。

bitmap是指纹理图片，
tileX是指在X方向轴的tiling mode
tileY是指在Y方向轴的tiling mode

很多人可能有疑问，这个TileMode是什么？

神秘莫测的TileMode

什么是TileMode呢？
事实上它只是一个枚举而已。它只有三个值。

Shader.TileMode CLAMP
Shader.TileMode MIRROR
Shader.TileMode REPEAT

CLAMP

它的意思当要绘制的区间大于图片纹理本身的区间时，多出来的空间位置将被纹理图片的边缘颜色填充。文字很难解释，我用图片来代替吧。
原图如下：

原图的分辨率是562*336

我们编写一个自定义View–CustomView。然后在它的onDraw()方法中画一个矩形，并且设置画笔的Shader为BitmapShader，Shader的tiling模式为CLAMP.
代码如下：

@Overr