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

I would like to create border style similar to predifened "dashed" style (-fx-border-style: dashed).

我想创建类似于preifened“dashed”样式的边框样式(-fx-border-style:dashed)。

How to create dashed border in CSS with custom lengths of dash segments, line cap and line join?

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

2 个解决方案

#1

See the JavaFX CSS reference for Region, in particular the possible values for -fx-border-style. You can use segments(...) to define arbitrary line segment lengths: there are also settings for line-cap (square, butt, or round) and line-join (miter, bevel, or round).

请参阅Region的JavaFX CSS参考,特别是-fx-border-style的可能值。您可以使用段(...)来定义任意线段长度:还有线帽(方形,对角线或圆形)和线连接(斜接,斜角或圆形)的设置。

Quick example:

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

with

custom-dashed-border.css:

.custom-dashed-border {
    -fx-border-color: blue ;
    -fx-border-width: 5 ; 
    -fx-border-style: segments(10, 15, 15, 15)  line-cap round ;
}

which gives

#2

Read the JavaFX 8 CSS Reference Guide for Regions, which provides quite a bit of functionality, such as dashed borders. Essentially, it is most of the stuff you get from HTML style CSS border specifications (though obviously a little bit different as it uses JavaFX attribute names and may not implement the full CSS specification that a HTML browser would). Note: this level of customization does not do everything you request such as custom dashed length for border lines (as far as I can tell).

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

If that isn't enough, place your node in a StackPane with a Rectangle on top of the node, bind the rectangle's size to the node's size and style the Rectangle stroke CSS.

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

Unfortunately I don't have time provide a full example here right now, but a quick (completely untested) sample would be:

不幸的是,我现在没有时间在这里提供一个完整的例子,但是一个快速(完全未经测试的)样本将是:

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

The sample here is just for a fixed size node, but if you have a variable sized node, you can use binding to keep the overlay rectangle size in sync with the underlying node.

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

Where your CSS is something like:

你的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;
}

The CSS definitions for the stroke settings for shapes are defined in the Shape section the JavaFX 8 CSS Reference guide.

形状描边设置的CSS定义在JavaFX 8 CSS参考指南的“形状”部分中定义。

Also note, this approach isn't limited to rectangular areas, it will work equally for arbitrary shapes.

还要注意,这种方法不仅限于矩形区域,它对任意形状都同样有效。