Search code examples
javafxrounded-cornerspolyline

Rounded corners in javafx


Is there any way to make polyline's corners rounded in javafx. I tried stroke line join but it did not work. I want to make corners like the thin line in the image below.

Image


Solution

  • Line join don't help here, since they control the behavior for 2 path elements that don't have the same direction at the point where the lines join. They don't modify the path elements themselves. You need to use Path instead.

    ArcTo and QuadCurveTo provide you with options for creating round corners. Both look pretty similar. The following code let's you play around with distance from the corner where the curve starts a bit:

    private Path arcPath(DoubleProperty distanceProperty) {
        MoveTo moveTo = new MoveTo(300, 300);
    
        // end the line at the given distance right of the intersection of the lines
        HLineTo lineTo1 = new HLineTo();
        lineTo1.xProperty().bind(distanceProperty.add(50));
    
        ArcTo arcTo = new ArcTo();
    
        // end the curve at the given distance above the intersection of the lines
        arcTo.setX(50);
        arcTo.yProperty().bind(distanceProperty.negate().add(300));
    
        // radius is equal to the distance
        arcTo.radiusXProperty().bind(distanceProperty);
        arcTo.radiusYProperty().bind(distanceProperty);
    
        arcTo.setSweepFlag(true);
    
        VLineTo lineTo2 = new VLineTo(50);
        return new Path(moveTo, lineTo1, arcTo, lineTo2);
    }
    
    private Path quadPath(DoubleProperty distanceProperty) {
        MoveTo moveTo = new MoveTo(300, 300);
    
        // end the line at the given distance right of the intersection of the lines
        HLineTo lineTo1 = new HLineTo();
        lineTo1.xProperty().bind(distanceProperty.add(50));
    
        QuadCurveTo curveTo = new QuadCurveTo();
    
        // control point at the location where the lines would intersect
        curveTo.setControlX(50);
        curveTo.setControlY(300);
    
        // end the curve at the given distance above the intersection of the lines
        curveTo.setX(50);
        curveTo.yProperty().bind(distanceProperty.negate().add(300));
    
        VLineTo lineTo2 = new VLineTo(50);
        return new Path(moveTo, lineTo1, curveTo, lineTo2);
    }
    
    Slider distanceSlider = new Slider(0, 250, 10);
    Label label = new Label();
    label.textProperty().bind(distanceSlider.valueProperty().asString("%.2f"));
    HBox controls = new HBox(distanceSlider, label);
    
    Path path1 = quadPath(distanceSlider.valueProperty());
    Path path2 = arcPath(distanceSlider.valueProperty());
    
    VBox root = new VBox(new HBox(new Pane(path1), new Pane(path2)), controls);