JavaFX css border-radius issue

Question

I am trying to simulate the effect one would get from this css example:

border-radius: 50%;

From searching the API and reading posts on forums

Answer 1

It looks like a CSS border-radius: 50% should create an elliptical border, and JavaFX CSS does support the % shorthand for either -fx-border-radius or -fx-background-radius. To get the desired effect, however, use Path.subtract() to create an elliptical matte for the image, as shown below.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;

/**
 * @see http://stackoverflow.com/a/38008678/230513
 */
public class Test extends Application {

    private final Image IMAGE = new Image("http://i.imgur.com/kxXhIH1.jpg");

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Test");
        int w = (int) (IMAGE.getWidth());
        int h = (int) (IMAGE.getHeight());
        ImageView view = new ImageView(IMAGE);
        Rectangle r = new Rectangle(w, h);
        Ellipse e = new Ellipse(w / 2, h / 2, w / 2, h / 2);
        Shape matte = Path.subtract(r, e);
        matte.setFill(Color.SIENNA);
        StackPane root = new StackPane();
        root.getChildren().addAll(view, matte);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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