提问者:小点点

窗格形状修改


好吧,长话短说,我正在尝试创建一种聊天/消息系统,需要一点帮助。我正在尝试在我的容器上创建一个箭头,如下图所示。该图像是从ControlsFX和他们的Popover窗口中取出的。我不能使用他们的popover小部件,因为它的行为有点不稳定。

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

还应该注意的是,弹出窗口不是一个窗口,它是一个简单的VBox,里面填充了几行文本。如果需要,我当然可以将其包装在窗格中。有人能想出正确的方法来创建这个箭头吗?我也有我的VBox背景作为渐变,所以箭头不能像通过getKids()放在底部一样。添加相同的颜色,因为那样渐变就会关闭。它必须(以某种方式)是容器的一部分。

=========================================================================== 编辑:

好吧,所以我今天花了大部分时间学习SVG路径,它不是太复杂,但有点乏味。我最终选择的路径是:

"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"

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


共1个答案

匿名用户

有许多方法可以实现您想要的效果。一种方法是在区域上使用CSS-fx-form属性规范。有关此设置以及如何使用它的信息,请参阅JavaFXCSS参考。

下面的示例使用内联样式,但对于更易于维护和充实的应用程序,请使用外部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已经创建了许多气泡形状,您可以使用其界面搜索语音气泡并选择您想要的形状,或者如果您有工具(例如Inkscape)和技能,您可以为自定义形状定义自己的svg路径。要从现有的svg文件中提取svg路径,请打开svg文件,希望它以紧凑的路径字符串格式编码,如果是,只需将svg中的路径部分复制并粘贴到您的JavaFX css文件中。

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