javafxgraphicsjavafx-8graphics2djavafx-9

Rectangle with rounded corner as ProgressBar using Path


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.


Solution

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