- 简短版本:
我在 CodePen 上的 HTML/CSS 生成了一个简单的按钮,该按钮会在悬停时旋转和增大。我希望它集成到我的 JavaFX GUI 中,该 GUI 使用与 FXML 文件交互的 SceneBuilder。 GUI 有编号为 1-4 的按钮,我希望它们的样式类似于 CodePen 上的按钮。我不确定如何将 HTML/CSS 放入正确的位置。
- 详细信息:
我的 JavaFX GUI 由 3 个文件组成。 Main.java、sample.fxml 和 Controller.java。我一直在使用 SceneBuilder 创建如下所示的 GUI。 SceneBuilder 因此已将代码写入 sample.fxml 文件中。然而,CodePen 代码是纯 CSS 和 HTML,所以我不确定如何将它们集成到我的 JavaFX 文件中。这个CodePen按钮有简单的代码found here.
我查阅了 JavaFX 文档,它给了我这样的代码
Rectangle rect = new Rectangle (100, 40, 100, 100);
rect.setArcHeight(100);
rect.setArcWidth(100);
rect.setFill(Color.BLUE);
RotateTransition rt = new RotateTransition(Duration.millis(400), rect);
rt.setByAngle(360);
rt.setAutoReverse(true);
我已将其更改为一个圆圈,但这段代码在我的 Main.java 文件中,似乎根本没有解决 FXML。我见过 JavaFX CSS 写成这样
-fx-background-color: #7cafc2;
-fx-text-fill: #FFFFFF;
-fx-background-radius: 4;
但这似乎不适用于转换、缩放等。如何将 CSS 和 HTML 集成到 FXML 中,使其与 SceneBuilder 一致?我只是想要我的 CodePen 按钮中的 4 个来替换我当前 GUI 上的按钮 1-4。
这里有更多信息,非常感谢大家
图形用户界面:
主.java
import ...
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Form Demo");
primaryStage.setScene(new Scene(root, 420, 475));
primaryStage.show();
}
}
sample.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import....
<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<BorderPane VBox.vgrow="ALWAYS" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<top>
<VBox>
<children>
<HBox spacing="10.0" VBox.vgrow="ALWAYS">
<children>
<Label fx:id="fileLabel1" prefHeight="33.0" prefWidth="100.0" text="NAS Form:" textOverrun="WORD_ELLIPSIS">
<font>
<Font name="System Bold" size="17.0" />
</font>
<padding>
<Insets top="7.0" />
</padding>
</Label>
<Label fx:id="fileLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="33.0" prefWidth="209.0" text="No file selected" HBox.hgrow="ALWAYS">
<padding>
<Insets top="7.0" />
</padding>
<font>
<Font size="17.0" />
</font></Label>
<Region nodeOrientation="RIGHT_TO_LEFT" prefHeight="31.0" prefWidth="10.0" HBox.hgrow="ALWAYS" />
<Button mnemonicParsing="false" onAction="#Browse" prefHeight="31.0" prefWidth="90.0" text="Browse " HBox.hgrow="ALWAYS" />
</children>
<VBox.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</VBox.margin>
</HBox>
<Separator prefWidth="200.0" />
<Region prefHeight="30.0" prefWidth="200.0" />
<HBox VBox.vgrow="ALWAYS">
<children>
<Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" />
<Button mnemonicParsing="false" onAction="#FieldData" text="Field Data" HBox.hgrow="ALWAYS" />
<Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" />
<Button mnemonicParsing="false" onAction="#CompData" text="Comp Data" HBox.hgrow="ALWAYS" />
<Region prefHeight="200.0" prefWidth="100.0" />
</children>
</HBox>
<HBox VBox.vgrow="ALWAYS">
<children>
<Region prefHeight="200.0" prefWidth="19.0" HBox.hgrow="ALWAYS" />
<Button mnemonicParsing="false" onAction="#Photos" text="Photos" HBox.hgrow="ALWAYS" />
<Region prefHeight="200.0" prefWidth="35.0" HBox.hgrow="ALWAYS" />
<Button mnemonicParsing="false" onAction="#Sketch" text="Sketch" HBox.hgrow="ALWAYS">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Region prefHeight="200.0" prefWidth="125.0" />
</children>
</HBox>
</children>
</VBox>
</top>
</BorderPane>
</VBox>
最佳答案
没有办法将 HTML/CSS 集成到 JavaFX 中。
要创建跳跃效果,您可以在代码中创建动画。
创建一个新的类扩展按钮:
public class HoverButton extends Button {
private ScaleTransition scale;
private RotateTransition rotate;
private ParallelTransition transition;
public HoverButton () {
super();
createAnimations();
addEvents();
}
private void createAnimations() {
scale = new ScaleTransition(Duration.seconds(0.2), this);
rotate = new RotateTransition(Duration.seconds(0.2), this);
transition = new ParallelTransition(scale, rotate);
}
private void addEvents() {
setOnMouseEntered((e) -> {
transition.stop();
scale.setToX(1.195);
scale.setToY(1.195);
rotate.setToAngle(360);
transition.play();
});
setOnMouseExited((e) -> {
transition.stop();
scale.setToX(1);
scale.setToY(1);
rotate.setToAngle(0);
transition.play();
});
}
}
在您的 FXML 中添加:
<?import your.package.HoverButton?>
并将所有按钮替换为 HoverButton。
如果您想通过 CSS 控制效果,请查看此内容。 https://wiki.openjdk.java.net/display/OpenJFX/CSS+API+to+support+custom+UI+Controls
关于java - 将 HTML/CSS 集成到 JavaFX 的 FXML 和 CSS 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33337378/