Java Fx botões de seta

Anupmpunith:

Estou tentando organizar botões triangulares (como teclas de seta 3d) em torno de um círculo. Eu tentei fazer via CSS com código abaixo. mas não deu certo. Ela não se aplica as configurações para o botão. Eu verifiquei Jfxtras e jfoenix mas não conseguiu encontrar nada de útil. Todas as ideias agradar?

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

JKostikiadis:

Você poderia usar um StackPanepara alcançá-lo. Dentro adicionar um círculo como um fundo (ou um ImageView) e, em seguida, adicione 4 botões. Para alinhá-los você precisa chamada:

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

Com o código acima, você vai colocar os botões para o local correto (para cima, direita, baixo e à esquerda), então você terá de mudar a forma do botão, que pode ser feito muito fácil com CSS usando o -fx-shapepor exemplo:

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

Agora, o CSS acima irá criar uma seta apontando para a direita, então você terá que rodar os botões apropriados pelo telefone:

topButton.setRotate(270);
bottomButton.setRotate(90);
leftButton.setRotate(180);

Por último, a fim de aumentar a forma das setas você só precisa definir o tamanho preferido do botão. Também no caso de você precisar adicionar uma margem para os botões que você pode fazer isso também pelo telefone:

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

Editar:

A fim de aplicar o efeito diferente quando os botões são ou pairavam ou pressionado você também deve adicionar as regras de 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;
}