Android绘图Canvas十八般武器之Shader详解及实战篇(上)
2016-12-15 20:14
435 查看
本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
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是这样解释的
Shader是一种基类对象,它在图形绘制过程中返回一段段颜色值,通过调用Paint.setShader()方法,可以将它的子类安装进画笔,这样Paint对象在绘制过程中所获取的颜色就是来自Shader对象。
上面提到了Shader的子类,
上面是BitmapShader的构造方法。
很多人可能有疑问,这个TileMode是什么?
事实上它只是一个枚举而已。它只有三个值。
原图如下:
原图的分辨率是562*336
我们编写一个自定义View–CustomView。然后在它的
代码如下:
大家现在只需要关注
在MainActivity中的布局文件中,我们加入这个自定义View。
我们可以看到CustomView的宽占手机整个屏幕,高是400dp.
我们在代码中以CustomView的宽高画一个矩形,并以上面的图片作为贴图纹理,效果如下:
效果图:
好像和原图有点不一样? 红框外面的是什么?我们把手机弄成横屏再看
这次双不一样了!红框右边也和下边一个德行了
让我们把注意力回到CLAMP的定义。
它的意思当要绘制的区间大于图片纹理本身的区间时,多出来的空间位置将被纹理图片的边缘颜色填充。
结合例子看,这下应该能明白它的含义了吧。上面的例子中,如果贴图的纹理本身小于要绘制的区域,那么超出部分将会以边缘的颜色填充。所以就造成了上面的现象。大家可以细细体会一下。我们看下一个知识点。
这个模式很容易理解大家看图。
这就是镜像的效果。
然后代码如下:
效果:
哇噻!!!好多小狗狗。
大家有没有觉得Repeat模式特别有用呢?一张图就铺满整个空间。
X—->CLAMP Y—->MIRROR
狗狗看起来更忧伤了。
X—->MIRROR Y—->CLAMP
有点恐怖是不是?
X—->CLAMP Y—->REPEAT
可以看到右边的部分拉伸了,然后上下复制同样的图像。
X—->REPEAT Y—->CLAMP
可以看到右边进行了复制,下面进行了拉伸。
X—->REPEAT Y—->MIRROR
右边的复制,下面的是镜像。
X—->MIRROR Y—->REPEAT
右边的是镜像,下面的是上面图像的复制。
好了,TILEMODE讲完了,我们进入主题(感觉怪怪的,这篇文章不是讲TILEMODE的吗?)
我们再来回顾下它的构造方法,bitmap是纹理图片,两个TileMode的参数对象我们也已经知道了含义与用法。现在我们来了解一下它的用法。
上面的代码是绘制一个圆形,然后用图片重复铺图。效果如下:
是不是很有感觉? 像自定义圆形图片控件效果一样。这小狗忧伤的让我想想起了张嘉佳的《从你的全世界路过》的梅茜和刘大黑。
我们再发散思维下圆形图像控件代码编写?
相信大家都知道,用可以设置先用
现在我们尝试用BitmapShader的方式去编写这么一个功能。
思路:
1. 首先我们要确保这个自定义View是正方形的。
2. 我们以目标图片创建一个BitmapShader,然后设置进画笔。
3. 我们用设置好的画笔利用Canvas绘制一个圆形。
4. 关键一点,我们需要对原始的bitmap进行尺寸的调整,使得它的宽高至少要等于圆形的半径。
好了,编写代码.
效果图:
优伤的小狗又出来了。
当然不是!!! Shader被称为着色器,它用来渲染物体。在OPENGL 3d世界中,纹理可以看作是光秃秃的模型的皮肤,它可以为正文体,圆球,甚至复杂的人像模型着色。而在Canvas的范畴内,Shader肯定只是为了2d平面着色,除了矩形,圆形,它肯定还适用于三角形和其它多边形以及任何闭合的不规则图形,如何的图形称为不规则图形呢?
我想说文字算不算???
看图说话:
小狗狗的图像粘贴到文字上了。代码却十分的简单。
好了,讲完了,意犹未尽的感觉。
本来还打算讲
Android绘图Canvas十八般武器之Shader详解及实战篇(下)
前言
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地址为ShaderAndroid中对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.
代码如下:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth(); int h = getHeight(); Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.yourname); mShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); mPaint.setShader(mShader); canvas.drawRect(0,0,w,h,mPaint); }
大家现在只需要关注
mShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);这行代码就可以了,剩下的呆会讲。
在MainActivity中的布局文件中,我们加入这个自定义View。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.frank.gradientdemo.MainActivity"> <com.frank.gradientdemo.CustomView android:layout_width="match_parent" android:layout_height="400dp" /> </RelativeLayout>
我们可以看到CustomView的宽占手机整个屏幕,高是400dp.
我们在代码中以CustomView的宽高画一个矩形,并以上面的图片作为贴图纹理,效果如下:
效果图:
好像和原图有点不一样? 红框外面的是什么?我们把手机弄成横屏再看
这次双不一样了!红框右边也和下边一个德行了
让我们把注意力回到CLAMP的定义。
它的意思当要绘制的区间大于图片纹理本身的区间时,多出来的空间位置将被纹理图片的边缘颜色填充。
结合例子看,这下应该能明白它的含义了吧。上面的例子中,如果贴图的纹理本身小于要绘制的区域,那么超出部分将会以边缘的颜色填充。所以就造成了上面的现象。大家可以细细体会一下。我们看下一个知识点。
MIRROR
这个模式能够让纹理以镜像的方式在X和Y方向复制。这个模式很容易理解大家看图。
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth(); int h = getHeight(); Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.yourname); mShader = new BitmapShader(bmp, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR); mPaint.setShader(mShader); canvas.drawRect(0,0,w,h,mPaint); }
这就是镜像的效果。
REPEAT
它的作用是将图片纹理沿XY轴进行复制。什么意思?看图就懂,在这里,我要换一张图片,作为演示效果。然后代码如下:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth(); int h = getHeight(); Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.repeat); mShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); mPaint.setShader(mShader); canvas.drawRect(0,0,w,h,mPaint); }
效果:
哇噻!!!好多小狗狗。
大家有没有觉得Repeat模式特别有用呢?一张图就铺满整个空间。
混合双打
上面讲过的内容都是针对XY方向为同一种模式。能不能混合使用呢?X—->CLAMP Y—->MIRROR
mShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.MIRROR);
狗狗看起来更忧伤了。
X—->MIRROR Y—->CLAMP
mShader = new BitmapShader(bmp, Shader.TileMode.MIRROR, Shader.TileMode.CLAMP);
有点恐怖是不是?
X—->CLAMP Y—->REPEAT
mShader = new BitmapShader(bmp, Shader.TileMode.CLAMP, Shader.TileMode.REPEAT);
可以看到右边的部分拉伸了,然后上下复制同样的图像。
X—->REPEAT Y—->CLAMP
mShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
可以看到右边进行了复制,下面进行了拉伸。
X—->REPEAT Y—->MIRROR
mShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
右边的复制,下面的是镜像。
X—->MIRROR Y—->REPEAT
mShader = new BitmapShader(bmp, Shader.TileMode.MIRROR, Shader.TileMode.REPEAT);
右边的是镜像,下面的是上面图像的复制。
好了,TILEMODE讲完了,我们进入主题(感觉怪怪的,这篇文章不是讲TILEMODE的吗?)
BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)
我们再来回顾下它的构造方法,bitmap是纹理图片,两个TileMode的参数对象我们也已经知道了含义与用法。现在我们来了解一下它的用法。
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth(); int h = getHeight(); int radius = w <= h ? w/2 : h/2; //1 解析bitmap对象 Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.repeat); //2 以bitmap对象生成BitmapShader,并且设置它的X和Y轴方向上的TILEMODE mShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); //3 将BitmapShader对象安装到画笔对象上 mPaint.setShader(mShader); //4 以该画笔绘制图形 canvas.drawCircle(w/2,h/2,radius,mPaint); }
上面的代码是绘制一个圆形,然后用图片重复铺图。效果如下:
是不是很有感觉? 像自定义圆形图片控件效果一样。这小狗忧伤的让我想想起了张嘉佳的《从你的全世界路过》的梅茜和刘大黑。
我们再发散思维下圆形图像控件代码编写?
相信大家都知道,用可以设置先用
canvas绘制一张图片,然后设置画笔的Xfermode
Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));然后再绘制一个圆。
现在我们尝试用BitmapShader的方式去编写这么一个功能。
思路:
1. 首先我们要确保这个自定义View是正方形的。
2. 我们以目标图片创建一个BitmapShader,然后设置进画笔。
3. 我们用设置好的画笔利用Canvas绘制一个圆形。
4. 关键一点,我们需要对原始的bitmap进行尺寸的调整,使得它的宽高至少要等于圆形的半径。
好了,编写代码.
public class CustomView extends View { private Paint mPaint; private Shader mShader; public CustomView(Context context) { this(context,null); } public CustomView(Context context, AttributeSet attrs) { this(context, attrs,0); } public CustomView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mPaint = new Paint(); mPaint.setAntiAlias(true); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //这里为了方便演示,将尺寸固定为400*400 setMeasuredDimension(400,400); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth(); int h = getHeight(); int radius = w <= h ? w/2 : h/2; //原图 Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.repeat); //以目标宽高创建一个缩放过的图片 Bitmap result = Bitmap.createScaledBitmap(bmp,w,h,false); //用位图创建BitmapShader mShader = new BitmapShader(result, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); mPaint.setShader(mShader); //画圆 canvas.drawCircle(w/2,h/2,radius,mPaint); } }
效果图:
优伤的小狗又出来了。
更牛X的功能。
我们已经知道怎么样通过BitmapShader去渲染一个矩形或者是圆形了,但它的神奇之处就在于此吗???当然不是!!! Shader被称为着色器,它用来渲染物体。在OPENGL 3d世界中,纹理可以看作是光秃秃的模型的皮肤,它可以为正文体,圆球,甚至复杂的人像模型着色。而在Canvas的范畴内,Shader肯定只是为了2d平面着色,除了矩形,圆形,它肯定还适用于三角形和其它多边形以及任何闭合的不规则图形,如何的图形称为不规则图形呢?
我想说文字算不算???
看图说话:
小狗狗的图像粘贴到文字上了。代码却十分的简单。
Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.repeat); mShader = new BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); mPaint.setTextSize(200.0f); mPaint.setColor(Color.RED); mPaint.setTypeface(Typeface.DEFAULT_BOLD); mPaint.setShader(mShader); canvas.drawText("小狗狗",0,h/2,mPaint);
好了,讲完了,意犹未尽的感觉。
本来还打算讲
ComposeShader,
LinearGradient,
RadialGradient,
SweepGradient的,由于篇幅原因,分开讲好了。下一篇讲其它的Shader子类。
Android绘图Canvas十八般武器之Shader详解及实战篇(下)
相关文章推荐
- Android绘图Canvas十八般武器之Shader详解及实战篇(下)
- Android绘图Canvas十八般武器之Shader详解及实战篇(上)
- 绘图Canvas十八般武器之Shader详解及实战
- Android中Canvas绘图之Shader使用图文详解
- Android中Canvas绘图之Shader使用图文详解
- Android中Canvas绘图之Shader使用图文详解
- Android中Canvas绘图之Shader使用图文详解
- Android中Canvas绘图之Shader使用图文详解---转载
- Android中Canvas绘图之Shader使用图文详解
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解
- Android Canvas绘图详解(图文)
- Android Canvas绘图详解(图文)