Java Fx 箭头按钮

Question

我正在尝试将三角形按钮（如 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;
}

Answer 1

您可以使用

StackPane

来实现它。在里面添加一个 Circle 作为背景（或 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);

使用上面的代码，您将按钮放置到正确的位置（上、右、下、左），然后您需要更改按钮的形状，这可以通过 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);

最后，为了增加箭头的形状，您只需设置按钮的首选大小。另外，如果您需要为按钮添加边距，您也可以通过调用来做到这一点：

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;
}

Answer 2

我通过将以下 css 添加到左右按钮来完成我的任务：

 .right-arrow-button{
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-padding: 0.25em;
    -fx-background-color:#ff8e31;
    -fx-fill:#ff8e31;
    -fx-shape: "m13.707 11.293-5-5A1 1 0 0 0 7 7v10a1 1 0 0 0 .617.924A.987.987 0 0 0 8 18a1 1 0 0 0 .707-.293l5-5a1 1 0 0 0 0-1.414zM16 18a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v10a1 1 0 0 1-1 1z";
 
   }

.left-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-background-color:#ff8e31;
    -fx-fill:#ff8e31;
    -fx-shape: "M16.383 6.076a.994.994 0 0 0-1.09.217l-5 5a1 1 0 0 0 0 1.414l5 5A1 1 0 0 0 16 18a.987.987 0 0 0 .383-.076A1 1 0 0 0 17 17V7a1 1 0 0 0-.617-.924zM8 6a1 1 0 0 0-1 1v10a1 1 0 0 0 2 0V7a1 1 0 0 0-1-1z";
}