窗格形状修改

Question

好吧，长话短说，我正在尝试创建一种 chat/message 系统，需要一点帮助。我正在尝试在我的容器上创建一个箭头，如下图所示。该图像取自 ControlsFX 和它们的 PopOver window。我不能使用他们的弹出窗口小部件，因为它与我使用它的目的有点不协调。

我继续创建了我自己的小聊天 window 弹出窗口，它将自身定位在我定义的父对象上，但我真的希望它有一个指向该对象的箭头。箭头也将始终面朝下，并且应该位于弹出窗口的左下角。

还应注意，弹出窗口不是 window，它是一个填充有文本行的简单 VBox。如果需要，我当然可以将它包装在一个 Pane 中。任何人都可以想出正确的方法来创建这个箭头吗？我的 VBox 背景也作为渐变，所以箭头不能像通过 getChildren().add 和 "same color" 一样放在底部，因为这样渐变就会关闭。它必须（以某种方式）成为容器的一部分。

============================================= ============================== 编辑：

好吧，我今天大部分时间都在学习 SVG Pathing，它不是太复杂，但有点乏味。我最终选择的路径是：

"M30 0 h100 a6,6 0 0,1 6,6 v50 a6,6 0 0,1 -6,6 h-88 L38 68 L34 62 h-4 a6,6 0 
 0,1 -6,-6 v-50 a6,6 0 0,1 6,-6 z"

现在唯一的问题是箭头尾部的高度会随着窗格的大小而增加。例如，如果我在框中有很多文本，则窗格的高度会增加（当然）并且箭头也会变长。这种行为并不完全破坏交易，但它并不是我真正想要的。我希望路径中的大写 Ls 能够确保箭头的点无论如何都保持不变，但它没有用。对此有什么想法吗？

Answer 1

有多种方法可以达到您想要的效果。一种方法是在区域上使用 CSS -fx-shape 属性规范。有关此设置及其使用方法的信息，请参阅 JavaFX CSS reference。

下面的示例使用内联样式，但为了更易于维护和实质性的应用程序，请使用外部 CSS 样式表。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Bubble extends Application {
    private static final String SQUARE_BUBBLE =
            "M24 1h-24v16.981h4v5.019l7-5.019h13z";
    // source for svg path string: https://iconmonstr.com/speech-bubble-7/
    private static final String ROUND_BUBBLE =
            "M12 1c-6.628 0-12 4.573-12 10.213 0 2.39.932 4.591 2.427 6.164l-2.427 5.623 7.563-2.26c9.495 2.598 16.437-3.251 16.437-9.527 0-5.64-5.372-10.213-12-10.213z";

    @Override
    public void start(Stage stage) {
        Label label = new Label("hello, world");
        label.setStyle("-fx-font-size: 16px;");

        StackPane bubble = new StackPane(label);
        bubble.setPadding(new Insets(20));
        bubble.setStyle(
            "-fx-background-color: lightblue; " +
            "-fx-border-color: navy; -fx-border-width: 2px; " + 
            "-fx-shape: \"" + ROUND_BUBBLE + "\";"
        );
        bubble.setEffect(new DropShadow(10, 5, 5, Color.MIDNIGHTBLUE));

        StackPane layout = new StackPane(bubble);
        layout.setPadding(new Insets(20));

        stage.setScene(new Scene(layout));
        stage.show();
    }

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

我知道这个应用程序中演示的气泡形状并不完全是您想要的形状，但从您的描述中我不明白您想要的形状是什么。 iconmonstr.com 处已经创建了许多气泡形状，您可以只使用其界面搜索对话气泡和 select 您想要的形状，或者如果您可以为自定义形状定义自己的 svg 路径拥有相应的工具（例如 Inkscape）和技能。要从现有 svg 文件中提取 svg 路径，请打开 svg 文件，希望它以紧凑的路径字符串格式编码，如果是，只需将 svg 中的路径部分复制并粘贴到您的 JavaFX css 文件.

另一种方法是以编程方式构建一个 path，您可以通过将两者都放在 StackPane 中来与内容分层。

窗格形状修改

Pane Shape Modification

java

javafx

javafx-8

javafx-2

javafx-css