如何画出这种分段颜色曲线图

请问这种曲线图谁有没有资源,或者解决思路,就是在一个区间的线为不同颜色,贝塞尔曲线的话只能设置三个点的颜色,请问谁能解,感谢

img

请问谁见过,感谢

分段用drawPath绘制吧。

我用的 MPAndroidChart 这个库,重写一个LineRadarRenderer然后设置一下就可以实现:

lineChart.setRenderer(new MyLineChartRenderer(lineChart, lineChart.getAnimator(), lineChart.getViewPortHandler()));

写一个MyLineChartRenderer 继承自LineRadarRenderer
然后重写里面的 protected void drawLinear(Canvas c, ILineDataSet dataSet) {} 这个方法:

img

这是方法中主要绘制曲线的部分,我觉得按你需求,可以传入Y轴的几个区间值,再根据区间限值点和坐标就可以实现分区段显示不同颜色。

没实现过,就说下思路:
通过设置画笔的叠加模式,然后通过图层的叠加进行设置区分

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));

附上叠加模式使用方式链接:https://www.jianshu.com/p/19997b0b5b24

img


public class DbgActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //父控件
        RelativeLayout rl = new RelativeLayout(this);
        //设置背景色
        rl.setBackgroundColor(0xFF4380BB);
        //添加画图控件
        rl.addView(new MultiColorLineView(this));
        setContentView(rl);
    }
    //画图控件
    class MultiColorLineView extends View{

        public MultiColorLineView(Context context) {
            super(context);
        }

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

        public MultiColorLineView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
        //不同层次的颜色区域, 用于下面做MULTY运算
        RectF[] RF_Stages = new RectF[3];
        //不同层的颜色
        int[] stateColors = {Color.RED, Color.GREEN, Color.BLUE};
        //画线
        Path mPath = new Path();
        //画笔
        Paint mPaint = new Paint();
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            //初始化不同层的区域
            float stateH = h * 0.2f;
            for(int i = 0; i < RF_Stages.length; i ++){
                RF_Stages[i] = new RectF(0, i * stateH, w, (i + 1) * stateH);
            }
            //画线的路径
            mPath.reset();
            mPath.moveTo(0, h);
            mPath.lineTo(100, 0);
            mPath.lineTo(200, h/2f);
            mPath.lineTo(300, h);

        }
        //关键部分
        Xfermode xf = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //参考线
            mPaint.setColor(Color.WHITE);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(2);
            canvas.drawLine(0, RF_Stages[0].bottom, getWidth(), RF_Stages[0].bottom, mPaint);
            canvas.drawLine(0, RF_Stages[1].bottom, getWidth(), RF_Stages[1].bottom, mPaint);
            canvas.drawLine(0, RF_Stages[2].bottom, getWidth(), RF_Stages[2].bottom, mPaint);

            //实现不同颜色代码saveLayer很重要
            int layer = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
            mPaint.setStrokeWidth(8);
            //canvas.drawColor(0);
           //先画线
            canvas.drawPath(mPath, mPaint);
            //设置Xfermode
            mPaint.setXfermode(xf);
            mPaint.setStyle(Paint.Style.FILL);
            for(int i = 0; i < RF_Stages.length; i ++){
                mPaint.setColor(stateColors[i]);
                canvas.drawRect(RF_Stages[i], mPaint);
            }
            mPaint.setXfermode(null);
            canvas.restoreToCount(layer);
        }
    }

一摸一样的没有见过。下面链接库用的挺多的。