使用 Path 作为 ProgressBar 的圆角矩形

Question

我需要在 javafx 中绘制带有进度条的矩形圆角。
我已经做了一些用角绘制矩形的代码。但是我如何显示进度效果。以下是我试图模仿的例子。 http://jsfiddle.net/m1erickson/P2qTq/

还有其他方法可以做到这一点。指导我谢谢。

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

--> 更新 <--

我找到了另一种方法。使用带有笔划偏移的矩形。 但仍然面临一个问题，笔画是从顺时针方向开始的。

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

如果您知道更好的解决方案，请告诉我。

Answer 1

我使用矩形和笔划-破折号-偏移解决了它。这可能会帮助其他人并节省宝贵的时间。

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

使用 Path 作为 ProgressBar 的圆角矩形

Rectangle with rounded corner as ProgressBar using Path

graphics

javafx

graphics2d

javafx-8

javafx-9