Кнопка JavaFX с SVG-формой по-прежнему имеет прямоугольную область нажатия

Question

Я хочу сделать кнопку с формой SVG, и я написал код CSS ниже:

.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" ;
}

проблема в том, что когда я наведу курсор мыши на кнопку, я могу нажать на нее снаружи от ее формы, потому что границы кнопки по-прежнему прямоугольные. как сделать кнопку недоступной для клика снаружи ее формы?

Answer 1

Node имеет свойство pickOnBounds :

Определяет, как выполняется вычисление комплектации для этого узла при запуске вызовом функции MouseEvent или contains. Если pickOnBounds истинно, то выбор рассчитывается путем пересечения с границами этого узла, иначе выбор вычисляется путем пересечения с геометрической формой этого узла.

Это свойство имеет значение по умолчанию false, что вам и нужно. Однако класс Region устанавливает это свойство равным true в своем единственном конструкторе :

Создает новый регион с пустым фоном и пустой рамкой. Регион по умолчанию имеет значение pickOnBounds, установленное в значение true, что означает, что любой выбор (выбор мыши или касание и т. Д.), Который происходит в пределах границ локального региона, будет возвращать значение true, независимо от того, заполнен ли регион или является прозрачным.

Поскольку Button является подклассом Region, его свойство pickOnBounds также установлено на true. Чтобы иметь желаемое поведение, вам нужно установить для этого свойства значение false. К сожалению, pickOnBounds не кажется настраиваемым из CSS; Это означает, что вам нужно установить его из кода или FXML.