Java Fx箭头按钮
Java Fx箭头按钮
提问于 2018-08-18 22:39:54
我正在尝试将三角形按钮(如3d箭头键)排列成一个圆圈。我试着用下面的代码通过CSS来实现。但没有成功。它不会将设置应用于按钮。我检查了Jfxtras和jfoenix，但没有找到任何有用的东西。有什么想法吗？
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-19 01:20:59
您可以使用StackPane来实现它。在里面添加一个圆形作为背景(或ImageView)，然后添加4个按钮。要对齐它们，您需要调用：
StackPane.setAlignment(topButton, Pos.TOP_CENTER);
StackPane.setAlignment(rightButton, Pos.CENTER_RIGHT);
StackPane.setAlignment(bottomButton, Pos.BOTTOM_CENTER);
StackPane.setAlignment(leftButton, Pos.CENTER_LEFT);使用上面的代码，您将把按钮放置到正确的位置(向上、向右、向下和向左)，然后您将需要更改按钮的形状，这可以通过使用-fx-shape的CSS非常容易地完成，例如：
#arrow-button{
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.25em;
-fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}现在，上面的CSS将创建一个指向右侧的箭头，因此您必须通过调用以下命令来旋转相应的按钮：
topButton.setRotate(270);
bottomButton.setRotate(90);
leftButton.setRotate(180);最后，为了增加箭头的形状，您只需要设置按钮的首选大小。此外，如果您需要向按钮添加边距，也可以通过调用：
StackPane.setMargin(topButton, new Insets(10, 0, 0, 0));
StackPane.setMargin(rightButton, new Insets(0, 10, 0, 0));
StackPane.setMargin(bottomButton, new Insets(0, 0, 10, 0));
StackPane.setMargin(leftButton, new Insets(0, 0, 0, 10));编辑：
为了在按钮悬停或按下时应用不同的效果，您还应该添加这些CSS规则：
#arrow-button:hover{
/* Example make the arrow yellow if buttos was hovered */
-fx-background-color: -fx-mark-highlight-color, yellow;
}
#arrow-button:pressed{
/* And red if it was pressed, you can apply different effect
* like shadow , padding etc inside this rules.
*/
-fx-background-color: -fx-mark-highlight-color, red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51909749
复制相关文章
相似问题