Android绘制Canvas贝塞尔曲线和进度

Question

我正在尝试在自定义视图中绘制类似的东西，它是一个带有复杂波浪的进度条

进度与贝塞尔曲线相同，但我只显示了一部分取决于百分比。

实际上，由于@Blackbelt，我设法绘制了贝塞尔曲线并填充了背景形状，

        Paint paintBezzier = new Paint() {
            {
                setStyle(Style.FILL_AND_STROKE);
                setStrokeCap(Paint.Cap.ROUND);
                setStrokeWidth(10.0f);
                setAntiAlias(true);
            }
        };

        Paint paintBezzierProgressBase = new Paint() {
            {
                setStyle(Style.STROKE);
                setStrokeCap(Paint.Cap.ROUND);
                setStrokeWidth(10.0f);
                setAntiAlias(true);
            }
        };


        int xControl1 = 0;
        int yControl1 = 0;

        int xControl2 = 0;
        int yControl2 = 0;


        int x1 = 0;
        int y1 = contentHeight/2;

        int x2 = contentWidth;
        int y2 = contentHeight/2;

        xControl1 = contentWidth/2;
        yControl1 = 0 - 40;

        xControl2 = contentWidth/2;
        yControl2 = contentHeight+40;


        Path backgroundPath = new Path();
        paintBezzier.setColor(Color.parseColor("#ffffff"));
        paintBezzier.setStrokeWidth(5);
        backgroundPath.moveTo(x1, y1);
        backgroundPath.cubicTo(xControl1, yControl1, xControl2, yControl2, x2, y2);
        backgroundPath.lineTo(x2, y2);
        backgroundPath.lineTo(contentWidth, contentHeight);
        backgroundPath.lineTo(x1, contentHeight);
        backgroundPath.lineTo(x1, y1);
        backgroundPath.close();

        //TODO calculate progress

        Path pathProgress = new Path();
        paintBezzierProgressBase.setColor(Color.parseColor("#F1AD3D"));
        paintBezzierProgressBase.setStrokeWidth(7);
        pathProgress.moveTo(x1, y1);
        pathProgress.cubicTo(xControl1, yControl1, xControl2, yControl2, x2, y2);


        canvas.drawPath(backgroundPath, paintBezzier);
        canvas.drawPath(path, paintBezzierProgressBase);

知道如何计算百分比并仅显示曲线的一部分吗？这是图像目标。

提前致谢对不起我的英语

Answer 1

尝试使用 FILL_AND_STROKE 作为 paintBezzier 的样式而不是 STROKE。或者您可能还想关闭要绘制的周围区域，然后使用 path

的一种填充样式

Answer 2

最后我用 ClippingPath 解决了它

  canvas.clipRect(rectangle, Region.Op.REPLACE);
  canvas.drawPath(pathProgress, paintBezzierProgressBase);

Android绘制Canvas贝塞尔曲线和进度

Android Draw Canvas Bezier Curve and Progress

android

android-custom-view

android-progressbar

android-canvas