Java Fx箭头按钮

时间:2018-08-18 14:39:54

标签: java javafx jfoenix jfxtras

我试图将一个三角形按钮(如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;
}

enter image description here

1 个答案:

答案 0 :(得分:4)

您可以使用display来实现。在内部添加一个Circle作为背景(或ImageView),然后添加4个按钮。要对齐它们,您需要致电:

StackPane

使用上面的代码,您将按钮放置在正确的位置(上,右,下和左),然后您需要更改按钮的形状,这可以通过CSS使用{{ 1}}例如:

StackPane.setAlignment(topButton, Pos.TOP_CENTER);
StackPane.setAlignment(rightButton, Pos.CENTER_RIGHT);
StackPane.setAlignment(bottomButton, Pos.BOTTOM_CENTER);
StackPane.setAlignment(leftButton, Pos.CENTER_LEFT);

现在,以上CSS将创建一个指向右侧的箭头,因此您必须通过调用以下按钮来旋转相应的按钮:

-fx-shape

最后,为了增加箭头的形状,您只需要设置按钮的首选大小即可。同样,如果您需要在按钮上添加边距,也可以通过调用:

#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);