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
。#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";
}
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;
}