问题描述
好的，总而言之，我正在尝试创建一种聊天/消息系统，需要一些帮助。我正在尝试在容器上创建一个箭头，如下图所示。图像从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确保箭头的点数无论什么都保持不变，但它不起作用。对此有何看法？
有多种方法可以达到你想要的效果。
一种方法是在区域上使用CSS -fx-shape 属性规范。请参阅
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;
// svg路径字符串的来源：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（阶段阶段）{
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（新场景（布局））;
stage.show（）;
}
public static void main（String [] args）{
launch（args）;
}
}
我意识到此应用程序中演示的气泡形状不是这正是你想要的形状，但我不明白你的描述你想要的形状是什么。已经在上创建了许多气泡形状，您只需使用其界面即可搜索语音气泡并选择您想要的形状，或者如果您拥有工具（例如Inkscape）和技能，您可以为自定义形状定义自己的svg路径。要从现有的svg文件中提取svg路径，请打开svg文件，希望它以紧凑的路径字符串格式编码，如果是，只需将路径部分从svg复制并粘贴到JavaFX css文件中。
另一种方法是以编程方式构建，您可以通过将它们放在StackPane中来与内容进行分层。
Ok so to make a long story short I'm trying to create a sort of chat/message system and need a small bit of assistance. I'm trying to create an arrow on my container as the one shown in the image below. The image is taken off of ControlsFX and from their PopOver window. I CANNOT use their popover widget because it behaves a little wonky with what I'm using it for.
I went ahead and created my own little chat window popup that positions itself over the parent object that I define but I would really like it to have an arrow pointing to the object. The arrow will also ALWAYS face down and should be in the lower left-hand corner of the popup.
It should also be noted that the popup is NOT a window its a simple VBox that populates with lines of text. I could of course wrap that in a Pane if its needed. Can anyone come up with the proper way to create this arrow? I have my VBox background as a gradient as well so the arrow can't just be like plopped on the bottom through getChildren().add with the "same color" because then the gradient would be off. It has to be (somehow) a part of the container.
===========================================================================EDIT:
Alright so I spent the greater part of today learning SVG Pathing which isn't too awful complicated but it's slightly tedious. The path I ended up going with is:
"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"
Now the only problem with this is the arrow tail height grows with the size of the pane. For instance if I have a LOT of text in the box the pane grows in height (of course) and the arrow gets longer too. This behavior isn't a total deal breaker but it's not really what I had intended. I expected the capital Ls in the pathing to make sure that the points of the arrow stay put no matter what but it didn't work. Any thoughts on this?
There are a number of ways to achieve the effect which you wish.One way is to use a CSS -fx-shape attribute specification on a region. See the JavaFX CSS reference for info on this setting and how to use it.
The sample below uses inline styles, but for a more maintainable and substantial application use an external CSS stylesheet.
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);
}
}
I realize that the bubble shape demoed in this application isn't exactly the shape which you want but I don't understand from your description what the shape you want is. There are numerous bubble shapes already created at iconmonstr.com, you can just use its interface to search for speech bubbles and select the shape you want, or you can define your own svg path for your custom shape if you have the tools (e.g. Inkscape) and skill for that. To extract the svg path from an existing svg file, open up the svg file, hope that it is encoded in a compact path string format, and if it is, just copy and paste the path part from the svg into your JavaFX css file.
Another way to do this would be to programmatically construct a path which you would layer with the content by placing both in a StackPane.
这篇关于窗格形状修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！