Botones e imágenes circulares con JavaFX

Hola a todos, hace un tiempo cuando practicaba con la clase MediaPlayer de JavaFX para crear un reproductor de MP3, y decidí agregarle los controles del reproductor pensé en colocarle los botones con forma circular, así que me di la tarea de buscar en la documentación de JavaFX como podría hacer esto y resulta que es bastante simple. Siendo la clase Button descendiente de la clase Region hereda una función llamada setShape(Shape value) y que recibe como parámetro un objeto de la clase Shape, en JavaFX ya existen varias clases que descienden de la clase Shape y entre ellas esta Circle, pues entonces ya está todo listo, veamos como escribir este código y aprender a crear botones circulares.

Creamos un botón que deseemos:

Button playButton = new Button()

Agregamos una imagen al botón, para hacer esto hay que pasarle al método setGraphic() de Button un objeto MediaView y al constructor de MediaView un objeto Image.

playButton.setGraphic(new ImageView(new Image("resources/playImage.png")))

Y ahora si le agregamos la forma que queremos al botón, como será un círculo hay que agregarle al constructor de la clase Circle el valor de radio.

playButton.setShape(new Circle(18))

Y listo tenemos un botón con forma circular, aquí puedes ver como quedaron los botones de control del reproductor MP3.

Imágenes circulares o redondeadas.

También podemos lograr que nuestras imágenes se muestren recortadas de variadas formas, usando la clase Shape y el método setClip() de la clase MediaView. Veamos el código pues es muy simple hacer que las imágenes sean circulares.

Primero creamos un objeto MediaView:

MediaView imageView = new MediaView(new Image("resources/image.png",64,64,true,true,true))

 

Ahora debemos crear la forma que utilizaremos para recortar nuestra imagen, hay que configurar que el círculo este centrado en nuestra imagen, en este caso la imagen la queremos de 64 píxeles entonces centraremos el círculo a 32 píxeles y el radio del círculo será obviamente a la mitad del tamaño de nuestra imagen en este caso también 32 píxeles:

 

Circle clipShape = new Circle()

clipShape.setCenterX(32)

clipShape.setCenterY(32)

clipShape.setRadius(32)

Y ahora le pasamos a ImageView la forma que utilizaremos para recortar a la imagen:

imageView.setClip(clipShape)

Y obtenemos como resultado lo siguiente:

Bueno eso es todo por ahora, espero les sea útil y hasta la próxima.

Aplicar estilos CSS con JavaFX