关于javafx:JavaFx教程一-基本概念

往年打算踏出畛域之外，做一点桌面开发，在几个桌面开发之间抉择了一下，最终还是抉择了 JavaFx，起因这个也是用 Java 做的，不必再学习一门语言。JavaFx 还有一个游戏引擎，打算前面写一点游戏玩玩。那么 JDK 版本的抉择呢，抉择了 JDK 11，很大的起因在于 JDK 带有 Jlink 能够对 JDK 进行裁剪，让最终生成的平台包尽可能的小。

javaFx 有个非常不错的文档: https://fxdocs.github.io/docs…

本篇教程基本上根据这个文档。浏览本系列教程的前提是有 JavaSE 的根底，maven 熟练掌握。

前言

在我迈入大学的时候，我没想到第一门编程语言进去的是一个黑窗口，这让我非常失落，这让我一点能源都没有，甚至让我一度非常失落。前面我买了本 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 都有封装好的办法来监听解决这些事件。

写在最初

目前来说 JavaFx 的参考资料绝对有点少，我在学习中也是一波三折，官网的开发者文档着实有点不敌对，所幸在搜索引擎上以 JavaFx 瞎搜，搜到了不错的参考资料:https://fxdocs.github.io/docs…。然而这篇文档感觉还是不够面向初学者，好在是串了一条主线，本文是基于这篇文章，再加上了本人的了解的。