Paint的Gradient的用法（转）

转自：https://www.jianshu.com/p/02b02c1696b2

Paint的Gradient的用法

嗯哼嗯哼嗯哼嗯哼 关注

2017.07.04 15:45* 字数 173 阅读 46评论 0喜欢 0

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

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

小礼物走一走，来简书关注我