CODEWITHSUNDEEP
androidandroid-canvasandroid-custom-viewandroid-progressbar
schwertfisch
schwertfisch

Reputation: 4579

Android Draw Canvas Bezier Curve and Progress

i'm trying to draw something like this in a custom view, it's a progressbar with a complex wave enter image description here

The progress is the same Bezier Curve but i have only show a part depending of percent. this would be the final result

Actually I managed to draw the Bezier Curve and fill the background Shape thanks to @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);

Any idea how can i calculate the percent and show only a part of curve? this is the image goal.

Thanks in advanced Sorry for my english

Upvotes: 2

Views: 1687

Answers (2)

schwertfisch
schwertfisch

Reputation: 4579

Finally i solved it using ClippingPath

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

Upvotes: 1

Blackbelt
Blackbelt

Reputation: 157447

try using FILL_AND_STROKE as style for your paintBezzier instead of STROKE. Or probably you want also to close the area around you want to draw the with, and then use one of the fill style of path

Upvotes: 1

Related Questions