自定义View画出五彩斑斓的渐变折线图

2023-12-06 05:54:30

复杂多变的世界，离不开各种各样的图，而我们今天就来学习如何绘制一张炫酷无比的渐变折线图，使用自定义View，使用LinearGradient、Paint、shader，一步一步帮你绘制出五彩斑斓的渐变折线图。

折线图是数据可视化中经常会使用到的图表，在Android开发中，可以使用自定义View来绘制折线图，从而实现各种自定义需求。

本文将介绍如何在自定义View中使用LinearGradient、Paint和shader来实现渐变色折线图。

绘制渐变色折线图

首先，我们需要创建自定义View类。

public class GradientLineChartView extends View {

    private Paint mPaint;
    private LinearGradient mLinearGradient;
    private Path mPath;
    private List<Point> mPoints;

    public GradientLineChartView(Context context) {
        super(context);
        init();
    }

    public GradientLineChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public GradientLineChartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mLinearGradient = new LinearGradient(0, 0, getWidth(), getHeight(), Color.RED, Color.BLUE, Shader.TileMode.MIRROR);
        mPaint.setShader(mLinearGradient);
        mPath = new Path();
        mPoints = new ArrayList<>();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mPoints == null || mPoints.isEmpty()) {
            return;
        }
        mPath.moveTo(mPoints.get(0).x, mPoints.get(0).y);
        for (int i = 1; i < mPoints.size(); i++) {
            mPath.lineTo(mPoints.get(i).x, mPoints.get(i).y);
        }
        canvas.drawPath(mPath, mPaint);
    }

    public void setPoints(List<Point> points) {
        mPoints = points;
        invalidate();
    }
}