zoukankan      html  css  js  c++  java
  • Paint的Gradient的用法(转)

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

    Paint的Gradient的用法

    96 
    嗯哼嗯哼嗯哼嗯哼 
    2017.07.04 15:45* 字数 173 阅读 46评论 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

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

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

  • 相关阅读:
    (二)ElasticSearch-Rest命令操作
    (一)ElasticSearch介绍
    (四)SpringCloudAlibaba处理分布式事务-Seata
    网络设备及组网知识
    GITLAB使用
    Ionic APP开发
    开发工具快捷键大全
    web socket接口测试 Jmeter压力测试工具
    VMware Workstation pro无法在Windows上运行,检查可在Windows上运行的此应用的更新版本
    克隆管理员账号
  • 原文地址:https://www.cnblogs.com/weizhxa/p/9040589.html
Copyright © 2011-2022 走看看