Question

好的，总而言之，我正在尝试创建一种聊天/消息系统，需要一些帮助。我正在尝试在容器上创建一个箭头，如下图所示。图像从ControlsFX和PopOver窗口中删除。我不能使用他们的popover小部件，因为它对我正在使用它的行为有点不稳定。

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

还应该注意，弹出窗口不是一个窗口，它是一个用文本行填充的简单VBox。如果需要的话，我当然可以将它包装在Pane中。任何人都可以想出创建此箭头的正确方法吗？我也把我的VBox背景作为渐变，所以箭头不能像通过getChildren（）一样在底部，添加“相同颜色”，因为渐变会关闭。它必须（某种程度上）是容器的一部分。

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

好吧所以我今天花了大部分时间学习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处创建了许多气泡形状，您可以使用其界面搜索气泡并选择所需的形状，或者如果您有工具，则可以为自定义形状定义自己的svg路径（例如Inkscape）和技能。要从现有的svg文件中提取svg路径，请打开svg文件，希望它以紧凑的路径字符串格式编码，如果是，只需将路径部分从svg复制并粘贴到JavaFX css文件中。

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

窗格形状修改

1 个答案: