Rectangle with rounded corner as ProgressBar using Path

Question

i need to draw rectangle rounded corner with progressbar in javafx.
i already did some code which draw rectangle with corner. but how do i show progress effect. Following are the example which I am trying to imitate. http://jsfiddle.net/m1erickson/P2qTq/

there is any other way to do this. guide me thank you.

void drawLine(double x1,double  y1,double x2,double y2) {
    MoveTo move= new MoveTo(x1, y1);
    path.getElements().add(move);
    LineTo line= new LineTo(x2,y2);
    path.getElements().add(line);
    path.setStroke(Paint.valueOf("#000000"));
}

void drawCorner(double x0,double y0,double x1,double y1) {
    QuadCurveTo quadCurveTo=new QuadCurveTo();
    quadCurveTo.setX(x0);
    quadCurveTo.setY(y0);
    quadCurveTo.setControlX(x1);
    quadCurveTo.setControlY(y1);
    path.getElements().add(quadCurveTo);
}

    Group group=new Group();
    double angleTRX=offsetX+horizontalLength+cornerRadius;
    double angleTRY=offsetY+cornerRadius;
    double TRCornerX=offsetX+horizontalLength+cornerRadius;
    double TRCornerY=offsetY;
    double bottomRY=angleTRY+verticalLength;

    //draw top line
    drawLine(offsetX, offsetY, offsetX + horizontalLength, offsetY);
    //draw top right corner
    drawCorner(angleTRX, offsetY+cornerRadius, TRCornerX, offsetY);
    //draw right line
    drawLine(angleTRX,angleTRY, angleTRX,bottomRY);
    //draw bottom right corner
    drawCorner(offsetX+horizontalLength,offsetY+verticalLength+cornerRadius*2,
            offsetX+horizontalLength+cornerRadius,offsetY+verticalLength+cornerRadius*2);
    //draw bottom line
    drawLine(offsetX+horizontalLength,offsetY+verticalLength+cornerRadius*2,
            offsetX,offsetY+verticalLength+cornerRadius*2);
    //draw left bottom corner
    drawCorner(offsetX-cornerRadius,offsetY+verticalLength+cornerRadius,
            offsetX-cornerRadius,offsetY+verticalLength+cornerRadius*2);
    //draw left line
    drawLine(offsetX-cornerRadius,offsetY+verticalLength+cornerRadius,
            offsetX-cornerRadius,offsetY+cornerRadius);
    //draw top left corner
    drawCorner(offsetX,offsetY,offsetX-cornerRadius,offsetY);
    group.getChildren().add(path);

--> Update <--

i found another way to do it. using Rectangle with stroke-offset. but still facing one issue stroke are starting from clockwise.

Rectangle rectangle= new Rectangle();
        rectangle.setX(offsetX);
        rectangle.setY(offsetY);
        rectangle.setArcHeight(cornerRadius);
        rectangle.setArcWidth(cornerRadius);
        rectangle.setWidth(200);
        rectangle.setHeight(200);
        rectangle.setStroke(Paint.valueOf("#000000"));
        rectangle.setFill(Paint.valueOf("#ffffff"));
        rectangle.setStrokeWidth(5);
        rectangle.setStrokeMiterLimit(5);
        rectangle.setSmooth(true);
        rectangle.setStrokeLineCap(StrokeLineCap.ROUND);
        rectangle.setStrokeLineJoin(StrokeLineJoin.ROUND);
        double length=rectangle.getWidth()*2+rectangle.getHeight()*2;
        //set stroke dash length
        rectangle.getStrokeDashArray().addAll(length);
        //display empty stroke/border
        rectangle.setStrokeDashOffset(length);
        group.getChildren().add(rectangle);
        container.add(group,0,0);

        slider.valueProperty().addListener((observable, oldValue, newValue) -> {
            rectangle.setStrokeDashOffset(length-(length*(newValue.doubleValue()/100)));
        });

if you know better solution then please let me know.

(Correct me If I am wrong but.. ) If all you want is to make the ProgressBar to have rounded corners,you can achieve it by applying some CSS on it you don't actually have to reinvent the wheel. — JKostikiadis, Nov 20 '18 at 13:53
no i don't want to do this. actually i want to do draw progressbar in square format look into following jsfiddle link found on google. http://jsfiddle.net/m1erickson/P2qTq/ — mcd, Nov 20 '18 at 14:01
Oh I get it now. If it is possible edit your question and add the link you provide in the commend above to help others as well. — JKostikiadis, Nov 20 '18 at 14:25

score 3 · Accepted Answer · answered Nov 21 '18 at 11:43

i solved it using Rectangle and stroke-dash-offset. this might help others and save its valuable time.

    Rectangle rectangle= new Rectangle();
    rectangle.setX(offsetX);
    rectangle.setY(offsetY);
    rectangle.setWidth(200);
    rectangle.setHeight(200);
    rectangle.setStroke(Paint.valueOf("#000000"));
    rectangle.setFill(Color.TRANSPARENT);
    rectangle.setStrokeWidth(5);
    rectangle.setStrokeMiterLimit(5);
    rectangle.setSmooth(true);
    rectangle.setStrokeLineCap(StrokeLineCap.ROUND);
   // rectangle.setStrokeLineJoin(StrokeLineJoin.ROUND);
    double length=rectangle.getWidth()*2+rectangle.getHeight()*2;

    //set stroke dash length
    rectangle.getStrokeDashArray().addAll(length);

   //display empty stroke/border
    rectangle.setStrokeDashOffset(length);

    group.getChildren().add(rectangle);
    container.add(group,0,0);

    slider.valueProperty().addListener((observable, oldValue, newValue) -> {
            double offset=length-((length*(newValue.doubleValue()/100)));
            rectangle.setStrokeDashOffset(-offset);
    });

That was exactly what i had in mind as well, also in case you want to round the corners of the rectangle you could use the `rectangle.setArcHeight(radius);` and `rectangle.setArcWidth(radius);`. Lastly I would use `setStrokeLineCap(StrokeLineCap.BUTT)` to make the 'loading" took the same as the link you provided. — JKostikiadis, Nov 21 '18 at 17:24

Rectangle with rounded corner as ProgressBar using Path

1 Answers1