线性渐变颜色实现

作者: Sunny君907 | 来源:发表于2019-01-15 16:47 被阅读0次

线性渐变颜色实现
canvas入门基础3 完结篇~
CSS实现条纹背景
渐变色简单实现
IOS 绘制之渐变
css3渐变
渐变
Android 线性颜色渐变
CSS3 动画
微信小程序常用代码

采用drawable xml 中的shape gradient属性

<shape xml:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
        android:angle="0"
        android:endColor="#00000000"
        android:startColor="#0d000000"
        android:type="linear"
        android:useLevel="true"/>
</shape>

多重渐变，自定义view，实现复杂需求的可以采用LinearGradent

 /** Create a shader that draws a linear gradient along a line.
        @param x0           The x-coordinate for the start of the gradient line
        @param y0           The y-coordinate for the start of the gradient line
        @param x1           The x-coordinate for the end of the gradient line
        @param y1           The y-coordinate for the end of the gradient line
        @param  colors      The colors to be distributed along the gradient line
        @param  positions   May be null. The relative positions [0..1] of
                            each corresponding color in the colors array. If this is null,
                            the the colors are distributed evenly along the gradient line.
        @param  tile        The Shader tiling mode
    */
    publicLinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[], TileMode tile) {
        }

1.LinearGradient.TileMode.CLAMP
参考：https://www.2cto.com/kf/201603/492626.html
这种模式表示重复最后一种颜色直到该View结束的地方，如果我设置着色器开始的位置为（0，0），结束位置为（getMeasuredWidth(), 0）表示我的着色器要给整个View在水平方向上渲染不同的颜色，代码如下：

@Override
protectedvoidonDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = newPaint();
    paint.setColor(Color.GREEN);
    LinearGradient linearGradient = newLinearGradient(0, 0, getMeasuredWidth(), 0,new int[]{ Color.RED, Color.WHITE, Color.BLUE }, null, LinearGradient.TileMode.CLAMP);
    paint.setShader(linearGradient);
    canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
}

2.LinearGradient.TileMode.REPEAT
LinearGradient.TileMode.REPEAT表示着色器在水平或者垂直方向上对控件进行重复着色，类似于windows系统桌面背景中的“平铺”，那么接下来我们来看看着色器对这种模式的处理方式，假如我希望着色器开始渲染的位置为（0，0），结束渲染的位置为（getMeasuredWidth()/2, getMeasuredHeight()/2），但与之前不同的是这次的平铺方式变为LinearGradient.TileMode.REPEAT，我们来看看代码：

@Override
protectedvoidonDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = newPaint();
    paint.setColor(Color.GREEN);
    LinearGradient linearGradient = newLinearGradient(0, 0, getMeasuredWidth()/2, getMeasuredHeight()/2,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.REPEAT);
    paint.setShader(linearGradient);
    canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
}

3.LinearGradient.TileMode.MIRROR
LinearGradient.TileMode.MIRROR模式会在水平方向或者垂直方向上以镜像的方式进行渲染，这种渲染方式的一个特征就是具有翻转的效果，比如我希望我的着色器开始渲染的位置为（0，0），结束渲染的位置为（getMeasuredWidth()/2, 0），那么效果图是什么样子呢？我们先来看看代码：

@Override
protectedvoidonDraw(Canvas canvas) {
    super.onDraw(canvas);
    Paint paint = newPaint();
    paint.setColor(Color.GREEN);
    LinearGradient linearGradient = newLinearGradient(0, 0, getMeasuredWidth()/2, 0,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.MIRROR);
    paint.setShader(linearGradient);
    canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(),paint);
}