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 property：

定义当由MouseEvent或contains函数调用触发时，如何为此节点进行选择计算。如果pickOnBounds为true，则通过与该节点的边界相交来计算拾取，否则通过与该节点的几何形状相交来计算拾取。

此属性的默认值为false，这是您想要的。但是，Region类仅在其constructor中将此属性设置为true：

用一个空的背景和空的边框创建一个新的区域。 Region默认将pickOnBounds设置为true，这意味着在Region本地范围内发生的任何拾取（鼠标拾取或触摸拾取等）都将返回true，而与Region是填充还是透明无关。

由于Button是Region的子类，因此它的pickOnBounds属性也设置为true。为了具有所需的行为，您需要将此属性设置回false。不幸的是，pickOnBounds似乎无法从CSS设置；这意味着您需要通过代码或FXML进行设置。

svg形状的JavaFX按钮仍具有矩形可点击区域

1 个答案: