如何在JavaFX CSS中创建自定义边框样式？

Question

我想创建类似于预先设定的“虚线”风格的边框样式 （-fx-border-style: dashed）。

如何在CSS中使用自定义长度的短划线段，线帽和线连接创建虚线边框？

Answer 1

请参阅JavaFX CSS reference for Region，特别是-fx-border-style的可能值。您可以使用segments(...)定义任意线段长度：还有line-cap（square，butt或round）和{{1}的设置（line-join，miter或bevel）。

快速举例：

round

带

定制虚线border.css：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class CustomBorderExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Region region = new Region();
        region.getStyleClass().add("custom-dashed-border");
        region.setMinSize(400, 400);
        StackPane root = new StackPane(region);
        root.setPadding(new Insets(16));
        Scene scene = new Scene(root, 480, 480);
        scene.getStylesheets().add("custom-dashed-border.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

给出了

Answer 2

阅读区域JavaFX 8 CSS Reference Guide，它提供了相当多的功能，例如虚线边框。从本质上讲，它是从HTML样式CSS边界规范中获得的大部分内容（尽管显然有点不同，因为它使用JavaFX属性名称，并且可能无法实现HTML浏览器的完整CSS规范）。注意：此级别的自定义不会执行您请求的所有内容，例如边框线的自定义虚线长度（据我所知）。

如果还不够，请将节点放在StackPane中，并在节点顶部放置一个Rectangle，将矩形的大小绑定到节点的大小并设置Rectangle笔划CSS的样式。

不幸的是，我现在没有时间在这里提供完整的示例，但是快速（完全未经测试的）样本将是：

ImageView image = new ImageView(new Image("http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-15/128/Amazon-Kindle-icon.png"))
Rectangle border = new Rectangle(0, 0, image.getWidth(), image.getHeight());
border.getStyleClass().add("dashed-border");
StackPane borderedImage = new StackPane(image, border);

此处的示例仅适用于固定大小的节点，但如果您有一个可变大小的节点，则可以使用绑定来保持叠加矩形大小与基础节点同步。

你的CSS是这样的：

.dashed-border {
    -fx-fill: transparent;
    -fx-stroke: green;
    -fx-stroke-width: 5;
    -fx-stroke-dash-array: 12 2 4 2;
    -fx-stroke-dash-offset: 6;
    -fx-stroke-line-cap: butt;
}

形状笔划设置的CSS定义在Shape section the JavaFX 8 CSS Reference guide。

中定义

另请注意，此方法不限于矩形区域，它对任意形状都同样有效。