好吧,长话短说,我正在尝试创建一种聊天/消息系统,需要一点帮助。我正在尝试在我的容器上创建一个箭头,如下图所示。该图像是从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确保箭头的点无论如何都保持不变,但它不起作用。对此有什么想法吗?
有许多方法可以实现您想要的效果。一种方法是在区域上使用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中来分层内容。