Rectangle with rounded corner as ProgressBar using Path - javafx

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.

Answer 1

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);
});