CODEWITHSUNDEEP
javafxrounded-cornerspolyline
H.Ozer
H.Ozer

Reputation: 115

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

Upvotes: 1

Views: 1591

Answers (1)

fabian
fabian

Reputation: 82461

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

Upvotes: 1

Related Questions