Java Fx箭头按钮

Question

Java Fx箭头按钮

4

我正在尝试在一个圆形周围布置三角形按钮(类似于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;
}

- anupampunith

请添加一个您想要实现的图像。 - DVarga

@Dvarga，我添加了一张图片。每个箭头都应该是一个按钮，当我点击它时会执行不同的任务。谢谢。 - anupampunith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JKostikiadis · Accepted Answer

您可以使用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);

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