4

Como os comento, intento hacer imágenes redondeadas en javafx con ImageView o incluso lo intente con label y panel, pero la propiedades css como las tengo en mi código no me funcionan en ninguno de los componentes.

Este es el código CSS que intente usar para el label o el panel, pero como podréis imaginar la imagen no se redondea.

.imgRedonda{
    -fx-background-image: url("imagen.png");
    -fx-background-radius: 100;
    -fx-background-repeat: no-repeat;
    -fx-background-size: contain;
}

El problema radica en que tampoco con imageview puedo usar -fx-background-radius: 100;

Aquí os dejo una imagen de la interfaz que quiero realizar para que veáis como tendría que quedar las imágenes con bordes redondeados: Diseño de interfaz

2 respuestas 2

1

Según esta respuesta en inglés podrias usar ImgePattern

con algo tan simple como

Circle cir2 = new Circle(250,200,80);
cir2.setFill(new ImagePattern(Image));

aplicación corriendo

public void start(Stage primaryStage) {
    try {
        BorderPane root = new BorderPane();
        root.setPadding(new Insets(10));
        Scene scene = new Scene(root,400,400);
        Label l = new Label("SHAPE IMAGE OF MY SISTER");
        l.setFont(Font.font(Font.getFontNames().get(23), FontWeight.EXTRA_BOLD, 14));
        l.setAlignment(Pos.CENTER);
        l.setPrefWidth(Double.MAX_VALUE);
        root.setTop(l);
        ///////////////el código chido empieza acá
        Circle cir2 = new Circle(250,250,120);
        cir2.setStroke(Color.SEAGREEN);
        Image im = new Image("https://juicylinksmag.files.wordpress.com/2016/02/juliet-ibrahim.jpg",false);
        cir2.setFill(new ImagePattern(im));
        cir2.setEffect(new DropShadow(+25d, 0d, +2d, Color.DARKSEAGREEN));
        //////////////acá termina el código importante
        root.setCenter(cir2);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}
0

enmascarar un nodo imageView con otro que extienda la clase shape

Como ImageView hereda la clase Node , esta puede usar un nodo como máscara (clip ). En este caso Circle que es un tipo Shape . Dado que imageView tiene alto y ancho fijo de 300 px ; el clip debe transladarse en x e y 150 px para estar en el centro . Esta es una aplicación javafx en una sola clase que puede probar .

App.java

public class App extends Application {

@Override
public void start(Stage stage) {

    ImageView imageView = new ImageView("https://ioppublishing.org/wp-content/uploads/2017/03/cat-web-cc0.jpg");
    var clip = new Circle(150);
    clip.setTranslateX(150);
    clip.setTranslateY(150);
    imageView.setClip(clip);
    imageView.setFitHeight(300);
    imageView.setFitWidth(300);

    var scene = new Scene(new StackPane(imageView), 400, 300);

    stage.setScene(scene);
    stage.setTitle("clipping ");
    stage.show();

}

public static void main(String[] args) {
    launch();
}

}

Resultado :

clipping javafx

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.