javafx 中的圆角

Question

有什么办法可以在 javafx 中使折线的角变圆。我尝试了描边线连接，但没有用。我想像下图中的细线一样制作角。

Answer 1

线连接在这里没有帮助，因为它们控制了 2 个路径元素的行为，这些元素在线连接点处的方向不同。他们自己不修改路径元素。您需要改用 Path。

ArcTo 和 QuadCurveTo 为您提供创建圆角的选项。两者看起来非常相似。下面的代码让你玩转曲线开始的角落的距离：

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

javafx 中的圆角

Rounded corners in javafx

javafx

rounded-corners

polyline