【Android UI】Paint Gradient 渐变渲染 ③ ( RadialGradient 环形渐变渲染 | 在给定中心和半径的情况下绘制径向渐变的着色器 | 水波纹效果 )

韩曙亮

发布于 2023-03-30 15:58:05

7160

发布于 2023-03-30 15:58:05

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、RadialGradient 环形渐变渲染

Paint 的 RadialGradient 是环形渐变渲染；

RadialGradient 是在给定中心和半径的情况下 绘制径向渐变的着色器。

RadialGradient 文档地址 : https://developer.android.google.cn/reference/kotlin/android/graphics/RadialGradient

1、设置多个渐变颜色的构造函数

RadialGradient(
    centerX: Float, // The x-coordinate of the center of the radius
    centerY: Float, // The y-coordinate of the center of the radius
    radius: Float,  // Must be positive. The radius of the circle for this gradient.
    colors: IntArray, // The sRGB colors to be distributed between the center and edge of the circle This value cannot be null.
    stops: FloatArray?, // May be null. Valid values are between 0.0f and 1.0f. The relative position of each corresponding color in the colors array. If null, colors are distributed evenly between the center and edge of the circle.
    tileMode: Shader.TileMode // The Shader tiling mode This value cannot be null.
)

参数说明 :

centerX: Float : 半径中心的x坐标 ;
centerY: Float : 半径中心的y坐标 ;
radius: Float : 必须为正。此渐变的圆半径。
colors: IntArray : 要分布在圆的中心和边缘之间的sRGB颜色此值不能为null。
stops: FloatArray? : 可能为空。有效值介于0.0f和1.0f之间。颜色数组中每个对应颜色的相对位置。如果为null，则颜色在圆的中心和边缘之间均匀分布。
tileMode: Shader.TileMode : 着色器平铺模式此值不能为null。

RadialGradient(
    centerX: Float, // The x-coordinate of the center of the radius
    centerY: Float, // The y-coordinate of the center of the radius
    radius: Float,  // Must be positive. The radius of the circle for this gradient.
    colors: LongArray, // The colors to be distributed between the center and edge of the circle This value cannot be null.
    stops: FloatArray?, // May be null. Valid values are between 0.0f and 1.0f. The relative position of each corresponding color in the colors array. If null, colors are distributed evenly between the center and edge of the circle.
    tileMode: Shader.TileMode // The Shader tiling mode This value cannot be null.
)

参数说明 :

centerX: Float : 半径中心的x坐标 ;
centerY: Float : 半径中心的y坐标 ;
radius: Float : 必须为正。此渐变的圆半径。
colors: LongArray : 要在圆的中心和边缘之间分布的颜色此值不能为null。
stops: FloatArray? : 可能为空。有效值介于0.0f和1.0f之间。颜色数组中每个对应颜色的相对位置。如果为null，则颜色在圆的中心和边缘之间均匀分布。
tileMode: Shader.TileMode : 着色器平铺模式此值不能为null。

代码示例 :

        mPaint.setShader(new RadialGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                200,
                Color.GREEN, Color.BLUE,
                Shader.TileMode.CLAMP)
        );

2、设置两个渐变颜色的构造函数

RadialGradient(
    centerX: Float, // The x-coordinate of the center of the radius
    centerY: Float, // The y-coordinate of the center of the radius
    radius: Float,  // Must be positive. The radius of the circle for this gradient.
    centerColor: Int, // The sRGB color at the center of the circle.
    edgeColor: Int,   // The sRGB color at the edge of the circle.
    tileMode: Shader.TileMode // The Shader tiling mode This value cannot be null.
)

参数说明 :

centerX: Float : 半径中心的x坐标 ;
centerY: Float : 半径中心的y坐标 ;
radius: Float : 必须为正。此渐变的圆半径。
centerColor: Int : 圆中心的sRGB颜色。
edgeColor: Int : 圆边缘的sRGB颜色。
tileMode: Shader.TileMode : 着色器平铺模式此值不能为null。

RadialGradient(
    centerX: Float, // The x-coordinate of the center of the radius
    centerY: Float, // The y-coordinate of the center of the radius
    radius: Float,  // Must be positive. The radius of the circle for this gradient.
    centerColor: Long, // The color at the center of the circle.
    edgeColor: Long,   // The color at the edge of the circle.
    tileMode: Shader.TileMode // The Shader tiling mode This value cannot be null.
)

参数说明 :

centerX: Float : 半径中心的x坐标 ;
centerY: Float : 半径中心的y坐标 ;
radius: Float : 必须为正。此渐变的圆半径。
centerColor: Long : 圆中心的颜色。
edgeColor: Long: 圆边缘的颜色。
tileMode: Shader.TileMode : 着色器平铺模式此值不能为null。

代码示例 :

        mPaint.setShader(new RadialGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                200,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0F, 0.5F, 1.0F},
                Shader.TileMode.CLAMP)
        );

二、完整代码示例

1、设置多个渐变颜色的构造函数

package kim.hsl.paintgradient.radial;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class RadialGradientView extends View {

    /**
     * 画笔工具
     * 线性渐变渲染 需要设置给该 画笔工具
     */
    private Paint mPaint;

    /**
     * 使用线性渐变绘制的区域
     */
    private RectF mRectF;

    public RadialGradientView(Context context) {
        this(context, null);
    }

    public RadialGradientView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RadialGradientView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
    }

    /**
     * 初始化 画笔工具, 主要是设置该画笔的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPaint.setShader(new RadialGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                200,
                Color.GREEN, Color.BLUE,
                Shader.TileMode.CLAMP)
        );

        canvas.drawCircle(this.getWidth() / 2, this.getHeight() / 2, 200, mPaint);
    }

}

2、设置两个渐变颜色的构造函数

package kim.hsl.paintgradient.radial;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class RadialGradientView2 extends View {

    /**
     * 画笔工具
     * 线性渐变渲染 需要设置给该 画笔工具
     */
    private Paint mPaint;

    /**
     * 使用线性渐变绘制的区域
     */
    private RectF mRectF;

    public RadialGradientView2(Context context) {
        this(context, null);
    }

    public RadialGradientView2(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RadialGradientView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
    }

    /**
     * 初始化 画笔工具, 主要是设置该画笔的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPaint.setShader(new RadialGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                200,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0F, 0.5F, 1.0F},
                Shader.TileMode.CLAMP)
        );

        canvas.drawCircle(this.getWidth() / 2, this.getHeight() / 2, 200, mPaint);
    }

}