悬停的CSS技巧较少,带有圆边的按钮上的多个字体

Question

目标:创建一个包含多个文本字体的圆形按钮.

示例:请参见RoundButtonWithMultipleFonts.java和RoundButtonWithMultipleFonts.css

RoundButtonWithMultipleFonts.java:

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Control;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class RoundButtonWithMultipleFonts extends Application {
  public static void main(String... args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) throws Exception {
    stage.setTitle("Button with multiple fonts?");
    stage.setScene(new Scene(getRoot(), 400, 400));
    stage.getScene().getStylesheets().addAll(getClass().getResource("RoundButtonWithMultipleFonts.css").toExternalForm());
    stage.sizeToScene();
    stage.show();
  }

  private Parent getRoot() {
    Button button = new Button(""); // The labels should be the buttons text
    button.setOnMouseClicked(new EventHandler<MouseEvent>() {
      @Override
      public void handle(MouseEvent mouseEvent) {
        System.out.println("Button clicked");
      }
    });

    Label header = new Label("A Prideful Header"); // Label for big font on button
    header.getStyleClass().addAll("header");

    Label footer = new Label("a humble footer"); // Label for small font on button
    footer.getStyleClass().addAll("footer");

    // Since the labels are on top of the button, pass any events they capture to the button
    configurePassThroughEvents(button, header, footer);

    StackPane stack = new StackPane();
    stack.getChildren().addAll(button, header, footer);

    return stack;
  }

  private void configurePassThroughEvents(Control targetControl, Control... sourceControls) {
    MouseEventPassThrough passThroughEvent = new MouseEventPassThrough(targetControl);
    for(Control sourceControl : sourceControls) {
      sourceControl.setOnMouseClicked(passThroughEvent);
      sourceControl.setOnMouseDragged(passThroughEvent);
      sourceControl.setOnMouseDragEntered(passThroughEvent);
      sourceControl.setOnMouseDragExited(passThroughEvent);
      sourceControl.setOnMouseDragOver(passThroughEvent);
      sourceControl.setOnMouseDragReleased(passThroughEvent);
      sourceControl.setOnMouseEntered(passThroughEvent);
      sourceControl.setOnMouseExited(passThroughEvent);
      sourceControl.setOnMouseMoved(passThroughEvent);
      sourceControl.setOnMousePressed(passThroughEvent);
      sourceControl.setOnMouseReleased(passThroughEvent);
    }
  }

  private static class MouseEventPassThrough implements EventHandler<MouseEvent> {
    private final Control targetControl;
    private MouseEventPassThrough(Control targetControl) { this.targetControl = targetControl; }
    @Override public void handle(MouseEvent mouseEvent) { targetControl.fireEvent(mouseEvent); }
  }
}

RoundButtonWithMultipleFonts.css:

.button {
  -fx-border-width: 1px;
  -fx-border-color: #000000;
  -fx-border-radius: 45;
  -fx-background-color: linear-gradient(#ffffff 0%, #cccccc 100%);
  -fx-background-radius: 45;
  -fx-padding: 50 100;
}
.button:hover {
  -fx-background-color: linear-gradient(#ffffff 0%, coral 100%);
}

.label {
  -fx-padding: 10;
  -fx-background-color: cornflowerblue;
}

.header {
  -fx-font-size: 110%;
  -fx-font-weight: bold;
  -fx-translate-y: -20;
}

.footer {
  -fx-font-size: 80%;
  -fx-translate-y: 20;
}

运行时结果:

问题:

1. 当鼠标滚动按钮的一个角落时,按钮进入悬停状态,但鼠标仍然在按钮边框和背景所指示的按钮的视觉边界之外.(见图.)

2. 此示例使用堆栈窗格,多个标签,事件传递机制和css trickery来显示包含具有多种字体的文本的按钮的外观.

问题:

1. 只有当鼠标与带有边框或背景属性的css中指定的按钮视觉边界碰撞时,如何指定按钮才能进入悬停状态？

2. 是否有一种更简单的方法为按钮指定多个字体(使用常规文本布局)而不是在此示例中执行的操作？理想情况下,我希望只使用带有嵌套节点的Button作为文本.这将允许我在按钮文本区域内放置任何我想要的东西,而不需要事件传递机制,StackPane和css技巧.

Answer 1

您可以使用类的setGraphic(Node node);方法Button在按钮上设置自定义标签.这是一个例子,

Label header = new Label("A Prideful Header");
header.getStyleClass().addAll("header");

Label footer = new Label("a humble footer");
footer.getStyleClass().addAll("footer");


VBox box = new VBox();
box.getChildren().addAll(header,footer);

Button button = new Button();
button.setGraphic(box);