往年打算踏出畛域之外,做一点桌面开发,在几个桌面开发之间抉择了一下,最终还是抉择了 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…。然而这篇文档感觉还是不够面向初学者,好在是串了一条主线,本文是基于这篇文章,再加上了本人的了解的。