CODEWITHSUNDEEP
cssjavafx
user8733070
user8733070

Reputation: 31

JavaFX button with svg shape still has rectangular clickable area

I want to make a button with a shape of svg format and i have written the CSS code below:

.button {

    -fx-background-color: #44c553;
    -size: 100px;
    -fx-min-height: -size;
    -fx-min-width: -size;
    -fx-max-height: -size;
    -fx-max-width: -size;
    -fx-shape: "m207.10955,279.95363l101.61276,-154.83848l101.61276,154.83848l-203.22552,0z" ;
}

the problem is that when i hover mouse on button i can press it from outside of its shape because the button borders are still rectangular. how can i make the button not clickable from outside of its shape?

Upvotes: 1

Views: 298

Answers (1)

Slaw
Slaw

Reputation: 45856

Node has the pickOnBounds property:

Defines how the picking computation is done for this node when triggered by a MouseEvent or a contains function call. If pickOnBounds is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.

This property has a default value of false, which is what you want. However, the Region class sets this property to true in its only constructor:

Creates a new Region with an empty Background and and empty Border. The Region defaults to having pickOnBounds set to true, meaning that any pick (mouse picking or touch picking etc) that occurs within the bounds in local of the Region will return true, regardless of whether the Region is filled or transparent.

Since Button is a subclass of Region it also has its pickOnBounds property set to true. In order to have the behavior you want you'll need to set this property back to false. Unfortunately, pickOnBounds doesn't seem settable from CSS; meaning you'll need to set it from code or FXML.

Upvotes: 1

Related Questions