Paint的Gradient的用法

Paint的Gradient的用法

shader的基本介绍
shader是一个在绘制的过程中能够水平的平分颜色的一个基类,通过Shader的子类的实现来给Paint设置Shader,设置过之后,绘制任何对象时都会带着这个Shader的颜色。
BitmapShader
这是一个非常有用的类,下面我会介绍一些这个类的基本的用法,中间会包括一些Shader的基本用法,都在这个介绍类的里面了,下面可 is hi,我们首先看看这个类的构造函数,然后直接使用,看看会有什么奇妙的东西发生。这个Shader作为纹理被用来绘制Bitmap看看构造方法.
  • REPEAT

      mRect = new RectF(0,0,200,200);
      mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl);
      BitmapShader shader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
      mPaint.setShader(shader);
      canvas.drawRect(0,0,getWidth(),getHeight() ,mPaint);
    
paint_3_shader_1.png
    根据图片,我们看到绘制出来的不是单独的的一张照片,而是单张照片的重复,这就涉及到在上面的代码中,我们没有提到的Shader.TileMode这个内部类。这个类内部有三个值,分别是CLAMP,REPEAT,MIRROR。
  其中CLAMP代表的是重复绘制这个Shader的边缘的像素,当超出这个Shader的原始界限的时候,REPEAT就是重复,MIRROR就是镜像。这个三个值的不用多说,看看代码的效果就明白了。

上代码:

  • CLAMP

      mRect = new RectF(0,0,200,200);
      mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl);
      BitmapShader shader = new BitmapShader(mBitmap,Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
      mPaint.setShader(shader);
      canvas.drawRect(0,0,getWidth(),getHeight() ,mPaint);
    
paint_3_shader_2.png
  • MIRROR

      mRect = new RectF(0,0,200,200);
      mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.girl);
      BitmapShader shader = new BitmapShader(mBitmap,Shader.TileMode. MIRROR, Shader.TileMode. MIRROR);
      mPaint.setShader(shader);
      canvas.drawRect(0,0,getWidth(),getHeight() ,mPaint);
    
paint_3_shader_3.png
解释一下构造方法:
BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)
bitmap:就是你给这个BitmapShader设置的图片
tileX:就是当这个Shader超出这个图像的原始的边界的时候,给这个Shader设置的X轴方向的拉伸规则
tileY:同理上面的tileX


Matrix
下面再来一个比较有点意思的类,Matrix,矩阵。Matrix是一个为了转换坐标持有一个3*3的矩阵的一个类。因为这里是在Shader的知识里面,我们就介绍一点基本知识就行,Matrix的构造方法没什么要看的,大家一看就明白,分别是Matrix(),Matrix(Matrix src)然后看看他的setScale(float sx, float sy)方法,sx,sy分别表示X,Y轴的缩放比例。我们在Shader的setLocalMatrix (Matrix localM)里面会用到矩阵的变换,那么

上代码:

BitmapShader shader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
Matrix matrix = new Matrix();
matrix.setScale(1.5f,0.5f);
shader.setLocalMatrix(matrix);
mPaint.setShader(shader);       
canvas.drawRect(0,0,getWidth(),getHeight() ,mPaint);
paint_3_shader_4.png
从上面的图可以看出,X轴放大了1.5倍,Y轴缩小了0.5倍

下面我们接着看看Matrix的其它方法setTranslate(float dx, float dy),设置  矩阵沿着X,Y轴分别平移dx,dy。dx为正,图片就右移,反之左移,dy为正图片下移,反之上移

上代码:

BitmapShader shader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
Matrix matrix = new Matrix();
matrix.setTranslate(50,50);
shader.setLocalMatrix(matrix);
mPaint.setShader(shader);       
canvas.drawRect(0,0,getWidth(),getHeight() ,mPaint);
paint_3_shader_5.png
setRotate(float degrees),设置矩阵围绕着原点旋转degrees度。
setSkew(float kx, float ky),设置矩阵的X,Y方向的倾斜度。
这两个方法,我就不运行了,大家自己试一下。
好了,到这里我就把BitmapShader介绍的差不多了,也介绍了Shader的setLocalMatrix(matrix)方法
顺便说了一点Matrix类,下面回归主题,看看其它的Shader的子类。
LinearGradient
线性渐变,比较简单,把构造方法弄明白就行了
LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)
x0,y0,x1,y1 : 代表这个颜色变化的起点位置和终点位置
colors: 是颜色的变化的范围
positions :是每个颜色的在总变化的范围所占的所有的值加起来等于1 。类似于权重,可以为null,为null的话就是每个颜色所占的比重相同
tile:是这个图形的拉伸规则,参看BitmapShader

上代码:

LinearGradient gradient = new LinearGradient(0,200,200,200,new int[]{Color.RED,Color.YELLOW,Color.GREEN},null, Shader.TileMode.CLAMP);
mPaint.setShader(gradient);
canvas.drawRect(0,0,getWidth(),getHeight(),mPaint);
paint_3_shader_6.png
RadialGradient
径向渐变,直接看
RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)
centerX,centerY,radius,是画圆的三个要素,中心坐标加半径。
colors:是颜色的变化范围
stops:这个数组里面的数对应的是颜色的变化范围到什么位置停止,就是这个数组如果
是{0.1f,0.2f,0.3f},假设colors是{Color.RED,Color.YELLOW,Color.GREEN}
那么红色的变化范围是0~0.1,黄色的变化0.1f~0.2f,绿色作为最后一个颜色,会自动
填充到1.0f

上代码:

RadialGradient gradient = new RadialGradient(200,200,100,new int[]{Color.RED,Color.YELLOW,Color.GREEN},new float[]{0.1f,0.2f,0.3f}, Shader.TileMode.REPEAT);
mPaint.setShader(gradient);
canvas.drawRect(0,0,getWidth(),getHeight(),mPaint);
paint_3_shader_7.png
SweepGradient
扫描渐变
SweepGradient(float cx, float cy, int[] colors, float[] positions)
cx:扫描渐变的中心点的X轴的坐标
cy:扫描渐变的中心点的Y轴的坐标
colors:渐变的颜色的范围
position:渐变的颜色数组对应的渐变的位置

上代码:

SweepGradient gradient = new SweepGradient(200,200,new int[]{Color.RED,Color.YELLOW,Color.GREEN,Color.CYAN},null);
mPaint.setShader(gradient);
canvas.drawCircle(200,200,100,mPaint);
paint_3_shader_8.png
ComposeShader
组合渐变,就是通过Xfermode或者PorterDuff.Mode的方式结合两种Shader,这个类
的重点就在于结合的方式,具体的两个类,请大家参看我的其它文章。
下面我们直接看一下代码

BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
LinearGradient linearGradient = new LinearGradient(0,200,200,200,new int[]{Color.RED,Color.YELLOW,Color.GREEN},null, Shader.TileMode.CLAMP);
ComposeShader composeShader = new ComposeShader(linearGradient, bitmapShader, PorterDuff.Mode.OVERLAY);
mPaint.setShader(composeShader);
canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
paint_3_shader_9.png

好了,这篇文章就到此结束了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容