Java Fx flecha botones

Anupmpunith:

Estoy tratando de organizar los botones triangulares (como teclas de flecha 3d) alrededor de un círculo. Traté de hacerlo a través de CSS con el código de abajo. pero no funcionó. No se aplica la configuración para el botón. Revisé Jfxtras y jfoenix pero no pude encontrar nada útil. por favor, alguna idea?

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

JKostikiadis:

Se puede usar un StackPanepara lograrlo. Dentro de añadir un círculo como fondo (o un ImageView) y luego añadir 4 botones. Para alinearlos necesita llamar a:

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

Con el código anterior, va a colocar los botones a la ubicación correcta (arriba, derecha, abajo ya la izquierda), entonces tendrá que cambiar la forma del botón, que se puede hacer muy fácil con CSS utilizando el -fx-shapepor ejemplo:

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

Ahora el CSS anterior creará una flecha que apunta hacia la derecha, por lo que tendrá que girar los botones apropiados, llamando al:

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

Por último, con el fin de aumentar la forma de las flechas sólo tiene que establecer el tamaño preferido del botón. También en caso de tener que añadir un margen a los botones que se pueden hacer eso también llamando al:

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:

Con el fin de aplicar efectos diferentes cuando los botones están bien revoloteaban o presionados también se debe agregar esas reglas 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;
}