title: Rectangle with rounded corner as ProgressBar using Path
body: <p>i need to draw rectangle rounded corner with progressbar in javafx.<br>
  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.
  <a href="http://jsfiddle.net/m1erickson/P2qTq/" rel="nofollow noreferrer">http://jsfiddle.net/m1erickson/P2qTq/</a></p>
  
  <p>there is any other way to do this. guide me thank you.</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>--> Update &lt;--</p>
  
  <p>i found another way to do it. using Rectangle with stroke-offset. 
  <strong>but still facing one issue stroke are starting from clockwise</strong>.</p>
  
  <pre><code>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) -&gt; {
              rectangle.setStrokeDashOffset(length-(length*(newValue.doubleValue()/100)));
          });
  </code></pre>
  
  <p>if you know better solution then please let me know.</p>