【Android UI】Paint Gradient 渐变渲染 ② ( SweepGradient 梯度渐变渲染 | 围绕中心点绘制扫描渐变的着色器 | 多渐变色构造函数 | 雷达扫描效果 )

韩曙亮

发布于 2023-03-30 15:57:44

5070

发布于 2023-03-30 15:57:44

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

文章目录

一、SweepGradient 梯度渐变渲染

Paint 的 SweepGradient 是梯度渐变渲染；

SweepGradient 是围绕中心点绘制扫描渐变的着色器。

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

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

public SweepGradient (
				float cx, // The x-coordinate of the center
                float cy, // The y-coordinate of the center
                int[] colors, // The sRGB colors to be distributed between around the center. There must be at least 2 colors in the array. This value cannot be null.
                float[] positions // May be NULL. The relative position of each corresponding color in the colors array, beginning with 0 and ending with 1.0. If the values are not monotonic, the drawing may produce unexpected results. If positions is NULL, then the colors are automatically spaced evenly. This value may be null.
)

参数说明 :

float cx : x 轴中心点 ;
float cy : y 轴中心点 ;
int[] colors : 要在中心周围分布的sRGB颜色。阵列中必须至少有2种颜色。此值不能为null。
float[] positions : 可能为空。颜色数组中每个对应颜色的相对位置，从0开始，以1.0结束。如果值不是单调递增或者单调递减的，图形可能会产生意外的结果。如果位置为空，则颜色会自动均匀分布。此值可能为空。

public SweepGradient (
				float cx, // The x-coordinate of the center
                float cy, // The y-coordinate of the center
                long[] colors, // The colors to be distributed between around the center. There must be at least 2 colors in the array. This value cannot be null.
                float[] positions // May be NULL. The relative position of each corresponding color in the colors array, beginning with 0 and ending with 1.0. If the values are not monotonic, the drawing may produce unexpected results. If positions is NULL, then the colors are automatically spaced evenly. This value may be null.
)

参数说明 :

float cx : x 轴中心点 ;
float cy : y 轴中心点 ;
long[] colors : 围绕中心分布的颜色。阵列中必须至少有2种颜色。此值不能为null。
float[] positions : 可能为空。颜色数组中每个对应颜色的相对位置，从0开始，以1.0结束。如果值不是单调递增或者单调递减的，图形可能会产生意外的结果。如果位置为空，则颜色会自动均匀分布。此值可能为空。

代码示例 :

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

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

public SweepGradient (
				float cx, 	// The x-coordinate of the center
                float cy,   // The y-coordinate of the center
                int color0, // The sRGB color to use at the start of the sweep
                int color1  // The sRGB color to use at the end of the sweep
)

参数说明 :

float cx : x 轴中心点 ;
float cy : y 轴中心点 ;
int color0 : 扫描开始时使用的sRGB颜色 ;
int color1 : 扫描结束时要使用的sRGB颜色 ;

public SweepGradient (
				float cx, 	// The x-coordinate of the center
                float cy,   // The y-coordinate of the center
                long color0, // The color to use at the start of the sweep
                long color1  // The color to use at the end of the sweep
)

参数说明 :

float cx : x 轴中心点 ;
float cy : y 轴中心点 ;
int color0 : 扫描开始时使用的颜色 ;
int color1 : 扫描结束时要使用的颜色 ;

代码示例 :

        mPaint.setShader(new SweepGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                Color.GREEN, Color.BLUE)
        );

二、完整代码示例

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

package kim.hsl.paintgradient.sweep;

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

import androidx.annotation.Nullable;

public class SweepGradientView2 extends View {

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

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

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

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

    public SweepGradientView2(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 SweepGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0F, 0.5F, 1.0F})
        );

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

}

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

package kim.hsl.paintgradient.sweep;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
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 SweepGradientView extends View {

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

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

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

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

    public SweepGradientView(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 SweepGradient(
                this.getWidth() / 2,
                this.getHeight() / 2,
                Color.GREEN, Color.BLUE)
        );

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

}