前言
在我迈入大学的时候，我没想到第一门编程语言出来的是一个黑窗口，这让我十分失落，这让我一点动力都没有，甚至让我一度十分失落。后面我买了本C语言游戏开发，觉得蛮有意思的，但是投入精力不多，我当时的主要精力还是用在数学上。后面开了Java课程，我其实也没那么有兴致，翻到教科书后面发现有桌面开发，于是兴奋起来，但是发现Java Swing比较丑:
于是放弃了学习的想法。但是偶然间发现了Java出了JavaFx，看了看界面发现长的不错，是个“标致的小姑娘”，再加上有个游戏引擎，我打算开发写点游戏玩玩，就打算简单学习一下。
javaFx 是啥？
JavaFX 是一个开源的下一代客户端应用平台，适用于基于Java构建的桌面、移动端和嵌入式系统。--- javaFx官网
所以JavaFx是一个应用平台，我们可以借助JavaFx来构建图形化应用。
从Hello World开始
JDK 11 的安装这里不再赘述，除此之外还需要一个maven archetype，第一个例子我们先跟着做。下面是安装JavaFx archetype 的脚本:
git clone https://github.com/openjfx/javafx-maven-archetypes.git cd javafx-maven-archetypes mvn clean install
# 坐标如下 GroupId = org.openjfx ArtifactId = javafx-archetype-simple
稍微解释一下，JDK 11 进行了模块化，rt这个包引入不到。
就会出现一个窗口:
这个maven 模板产生的java Fx 的依赖版本是 13 ，我将其改为了11。下面来解释一下这个代码：
public class App extends Application { @Override public void start(Stage stage) { var javaVersion = SystemInfo.javaVersion(); var javafxVersion = SystemInfo.javafxVersion(); var label = new Label("Hello, JavaFX " + javafxVersion + ", running on Java " + javaVersion + "."); var scene = new Scene(new StackPane(label), 640, 480); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(); } public class SystemInfo { // 获取当前Java的版本 public static String javaVersion() { return System.getProperty("java.version"); } // 获取当前javaFx的版本 public static String javafxVersion() { return System.getProperty("javafx.version"); } }
出来的图形的数据结构如下所示:
Stage 有舞台的意思, 可以理解为JavaFx对当前操作系统窗口的包装，Scene则有场景的意思，所以讨巧一点的理解是，javaFx的设计者将桌面开发理解为戏剧的演出，戏剧需要有舞台，而戏剧则有不同的场景，不同的场景有不同的布置，在上面的“hello world”这个小戏剧中，我们上面只摆了StackPane，StackPane上放了Label。上面是一种比较简单的数据结构图，更为通用的如下：
直接或者间接依附于Scene的元素，统称为Scene Graph，这里将这个词译为场景图，其实看到Graph，我想到的是数据结构里面的图，觉得这个翻译不合适，但是又找不出太好的译名，就姑且用这个译名吧。JavaFx中任意一个窗口都可以表示为上面的数据结构，在任意给定时间，一个Stage都可以有一个Scene附加到它。
JavaFx中场景图中的所有元素都是Node对象。Node有三种类型: 跟、分支、叶。根结点时唯一没有父结点的结点，看到这里有同学可能会问，Scene不是Node的父结点吗？从数据结构上看是，但是Scene本身并不是Node对象，我们可以将Scene理解为大地。分支结点和叶子结点的区别在于叶子结点没有子结点。在场景图中，父结点的许多属性由子结点共享，
变换-Transformations
在JavaFx中变换分为三种: 平移、缩放、旋转。我们将以下面的例子来演示这三种变换:
public class TransformApp extends Application { private Parent createContent(){ // 矩形设置长宽高 Rectangle box = new Rectangle(100,50, Color.BLUE); transform(box); return new Pane(box); } private void transform(Rectangle box) { // 在这里写变换的代码,下面只展示这个方法 } @Override public void start(Stage primaryStage) throws Exception { primaryStage.setScene(new Scene(createContent(),300,300,Color.GRAY)); primaryStage.show(); } public static void main(String[] args) { launch(args); } }
在windows 上运行此程序出来的效果图如下：
Translate 移动
在JavaFx中，结点可以有三维变换(X、Y或Z)和二维变换(X、Y)，但是我们的示例应用程序是2D的，所以我们将只考虑X和Y轴。在JavaFx和计算机图形学中，translate表示移动。下面的程序将上面的矩形在X轴上平移100像素，在Y轴上平移200像素。
代码如下:
private void transform(Rectangle box) { // 在这里写变换的代码,下面只展示这个方法 box.setTranslateX(100); box.setTranslateY(200); }
Scale 缩放
我们可以使用缩放来使得结点变大或者变小，默认情况下，结点在每个轴上的缩放值为1。我们将上面的矩形缩放1.5倍:
private void transform(Rectangle box) { // 在这里写变换的代码,下面只展示这个方法 box.setScaleX(1.5); box.setScaleY(1.5); }
效果图:
Rotate 旋转
代码:
private void transform(Rectangle box) { // 先平移再旋转,比较明显 box.setTranslateX(100); box.setTranslateY(200); // 旋转30度 box.setRotate(30); }
效果:
事件处理 - Event Handling
事件通知，从字面意思理解就行，就是结点上出现了某事件，来通知监听的人。举一个例子，我们登录系统输入完用户名、密码，点击登录就有对应的监听将你输入的信息发送到服务端。事件通常是事件系统的原语。一般来说，一个事件系统有以下三个职责:
- 触发事件
- 通知监听该事件的监听方
- 处理事件
事件通知有javaFx平台自动完成，我们就只考虑触发事件、监听事件以及如何处理他们就好了。
public class EventApp extends Application { @Override public void start(Stage primaryStage) throws Exception { // 创造一个按钮 Button button = new Button("监听点击事件"); // 监听按钮点击事件,点击按钮输出helloworld button.setOnAction(o->{ System.out.println("hello world"); }); // Pane pane = new Pane(button); primaryStage.setScene(new Scene(pane,300,200)); primaryStage.show(); } }
键鼠事件是最常见的，每个Node都有封装好的方法来监听处理这些事件。
