CODEWITHSUNDEEP
javajavafx
Racapuce
Racapuce

Reputation: 15

Reproduce javaFX focus effect

I would like to reproduce the same focus effect that the JavaFX modena theme has by default, when you click on a button for example. This in order to apply this effect on a Shape gaining focus.

I don't work with FXML and CSS, but I could try it if it is easier.

Upvotes: 0

Views: 190

Answers (1)

fabian
fabian

Reputation: 82461

In modena multiple background fills are combined to achieve this effect. For obvious reasons this is not applicable to shapes. (Shapes do not have a background property and there's no fill available allow you to change the color ortogonal to the edges at every possible point of arbitrary shapes.)

You could use a DropShadow effect to achieve a look similar to the focus look of controls though:

@Override
public void start(Stage primaryStage) {
    Circle circle = new Circle(100, null);
    circle.setStrokeWidth(5);
    circle.setStroke(Color.BLACK);
    Effect effect = new DropShadow(BlurType.GAUSSIAN, Color.DODGERBLUE, 5, 0.75, 0, 0);

    Scene scene = new Scene(new StackPane(circle), 250, 250);
    scene.setOnMouseClicked(evt -> circle.setEffect(circle.getEffect() == null ? effect : null));
    primaryStage.setScene(scene);
    primaryStage.show();
}

Result (left without effect, right with effect applied)

result screenshot

The DropShadow effect can also be applied via CSS, see https://docs.oracle.com/javase/10/docs/api/javafx/scene/doc-files/cssref.html#typeeffect

Upvotes: 2

Related Questions