Question

我试图在自定义视图中绘制这样的东西，它是带有复杂波形的进度条

进展是相同的贝塞尔曲线，但我只显示一部分取决于百分比。

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

        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的样式。或者你可能也希望关闭你想要绘制的那个区域，然后使用其中一个填充样式的路径

Answer 2

最后我使用ClippingPath解决了它

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

Android Draw Canvas Bezier曲线和进度

2 个答案: