javafx dropshadow 增加事件区域 - 导致 3d 按钮样式出现问题

Question

我使用 css 和 dropShadow 效果创建了一些 3d 按钮。它很漂亮，但我在事件捕获方面遇到了一些问题。当我向按钮添加 dropShadow 效果时，按钮捕获事件的区域会增大。

由此产生的两个副作用：

• 当我点击它旁边的按钮时按下它
• MOUSE_CLICKED 事件未触发，因为阴影区域 当我按下按钮时减少（带有 css 的 3d 效果）

我找到了一种解决此问题的方法，方法是在组中添加按钮并将阴影效果应用于组。它有效，但并不美观。

你知道另一种方法吗？你不觉得在事件冒泡中考虑阴影区域很奇怪吗？

/**
 * The Class ButtonExample.
 */
public class ButtonShadowSample extends Application {

  /** {@inheritDoc} */
  @Override
  public void start(Stage stage) throws Exception {
    stage.setTitle("Button Shadow");

    Button button = new Button("BOUTON1");
    button.getStyleClass().add("realistic-button");
    button.setOnAction(evt -> System.out.println("Button1 action"));

    Button button2 = new Button("BOUTON2");
    button2.getStyleClass().add("realistic-button2");
    button2.setOnAction(evt -> System.out.println("Button2 action"));
    Group group = new Group(button2);
    group.getStyleClass().add("group");

    VBox vbox = new VBox(button, group);
    vbox.setSpacing(5);

    stage.setScene(new Scene(vbox));

    stage.getScene().getStylesheets().add(ButtonShadowSample.class.getResource("ButtonShadowSample.css").toExternalForm());
    stage.show();
  }

  /**
   * The main method.
   *
   * @param args the arguments
   */
  public static void main(String... args) {
    launch(args);
  }
}

CSS：

.root {
    -fx-background: white;
}

.realistic-button {
    -fx-background-color:
        #000000,
        linear-gradient(#464646 0%, #323232 100%);
    -fx-background-insets: 0 0 0 0, 0 1 5 0;
    -fx-background-radius: 5, 5;
    -fx-padding: 5;
    -fx-pref-height: 34;
    -fx-min-height: 34;
    -fx-alignment: bottom-center;
    -fx-font-family: "Helvetica";
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5), 10, 0.4, 3, 3);
}

.realistic-button:pressed {
    -fx-background-color:
        #000000,
        linear-gradient(#464646 0%, #323232 100%);
    -fx-background-insets: 2 1 0 1, 2 0 2 1;
    -fx-background-radius: 5, 5;
    -fx-padding: 5 4 2 6;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5), 5, 0.5, 0, 1);
}

.realistic-button2 {
    -fx-background-color:
        #000000,
        linear-gradient(#464646 0%, #323232 100%);
    -fx-background-insets: 0 0 0 0, 0 1 5 0;
    -fx-background-radius: 5, 5;
    -fx-pref-height: 34;
    -fx-min-height: 34;
    -fx-padding: 5;
    -fx-alignment: bottom-center;
    -fx-font-family: "Helvetica";
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
}

.realistic-button2:pressed {
    -fx-background-color:
        #000000,
        linear-gradient(#464646 0%, #323232 100%);
    -fx-background-insets: 2 1 0 1, 2 0 2 1;
    -fx-background-radius: 5, 5;
    -fx-padding: 5 4 2 6;
}

.group {
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5), 10, 0.4, 3, 3);
}

.group:pressed {
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5), 5, 0.5, 0, 1);
}

Answer 1

我有一个带有阴影效果的similar issue，当它只应用于悬停时。效果是最初重新计算了布局。我认为这里正在发生类似的事情。

解决方法是给按钮添加一些内边距：

button.setPadding(new Insets(10));

或作为 CSS 样式：

-fx-padding: 10px;