javafx - 使用 JavaFX 创建气泡/语音文本样式

Question

我有一个客户端应用程序，它有一个聊天界面。我使用 CustomHBox、SVGPath 和另一个 HBox 来创建语音框。

我添加了投影效果，我可以看到 HBox 的边框，这给出了三角形并不是真正语音文本的一部分的效果。

我想知道，是否可以在不使用 SVGPath 的情况下产生相同的效果？它可能包括使用标签来玩弄 HBox。

使用 HBox 作为容器而不是 Shape 使用 Shape.union() 创建 Triangle + 的原因矩形是因为一旦场景图上有形状而不是矩形，矩形上的widthProperty.bind()就不起作用了。

Answer 1

我建议使用 JavaFX 的 -fx-shape CSS 属性:

让我们看看这个非常(!)简单的聊天 GUI:

@Override
public void start(Stage primaryStage) {

    GridPane chat = new GridPane();
    chat.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

    ColumnConstraints c1 = new ColumnConstraints();
    c1.setPercentWidth(100);
    chat.getColumnConstraints().add(c1);

    for (int i = 0; i < 20; i++) {
        Label chatMessage = new Label("Hi " + i);
        chatMessage.getStyleClass().add("chat-bubble");
        GridPane.setHalignment(chatMessage, i % 2 == 0 ? HPos.LEFT
                : HPos.RIGHT);
        chat.addRow(i, chatMessage);
    }

    ScrollPane scroll = new ScrollPane(chat);
    scroll.setFitToWidth(true);

    Scene scene = new Scene(scroll, 500, 500);
    scene.getStylesheets().add(getClass().getResource("Test.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
}

我们将使用这个SVG Path from Wikimedia在我们的 CSS 中:

.chat-bubble {
    -fx-shape: "M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z ";
    -fx-background-color: black, white;
    -fx-background-insets: 0,1;
    -fx-padding: 50;
}

现在我们有了一个没有任何技巧的样式化的Label。我承认，使用的 SVG 路径并不理想，但你可以采取任何你想要的并用颜色等填充它。