Javafx 简明教程

JavaFX - Quick Guide

JavaFX - Overview

Rich Internet Applications 是那些提供类似桌面应用程序功能和体验的网络应用程序。与普通网络应用程序相比,它们为用户提供更好的视觉体验。这些应用程序作为浏览器插件或虚拟机提供,用于将传统的静态应用程序转换为增强、流畅、动画化且引人入胜的应用程序。

不同于传统的桌面应用程序,RIA 无需任何附加软件即可运行。作为替代,您应该根据应用程序安装 ActiveX、Java、Flash 等软件。

在 RIA 中,图形呈现由客户端处理,因为它有一个插件,为丰富的图形提供支持。简而言之,RIA 中的数据处理在服务器端执行,而相关的对象处理在客户端执行。

我们有三种主要技术可以用来开发 RIA。这些技术包括以下内容: −

  1. Adobe Flash

  2. Microsoft Silverlight

  3. JavaFX

Adobe Flash

该软件平台由 Adobe Systems 开发,用于创建 Rich Internet Applications。此外,您还可以构建其他应用程序,例如 Vector、动画、浏览器游戏、桌面应用程序、移动应用程序和游戏等。

这是用于开发和执行 RIA 的最常用平台,桌面浏览器普及率为 96%。

Microsoft Silverlight

与 Adobe Flash 一样,Microsoft Silverlight 也是一种用于开发和执行 Rich Internet Applications 的软件应用程序框架。最初,此框架用于流媒体。当前版本也支持多媒体、图形和动画。

该平台应用较少,桌面浏览器渗透率为 66%。

JavaFX

JavaFX 是一个 Java 库,您可以使用它来开发 Rich Internet Applications。通过使用 Java 技术,这些应用程序的浏览器普及率为 76%。

What is JavaFX?

JavaFX 是一个用于构建 Rich Internet Applications 的 Java 库。使用此库编写的应用程序可以在多个平台上始终如一地运行。使用 JavaFX 开发的应用程序可以在各种设备上运行,例如台式机、移动电话、电视、平板电脑等。

要使用 Java 编程语言开发 GUI Applications ,程序员依赖于诸如 Advanced Windowing ToolkitSwing 的库。在 JavaFX 出现后,这些 Java 程序员现在可以用丰富的内容高效地开发 GUI 应用程序。

Need for JavaFX

要开发具有丰富功能的 Client Side Applications ,程序员过去依赖多种库来添加诸如媒体、用户界面控件、网络、2D 和 3D 等功能。JavaFX 在一个库中包含所有这些功能。除此之外,开发人员还可以访问 Java 库的现有功能,例如 Swing

JavaFX 提供了一组丰富的图形和媒体 API,并且通过硬件加速图形提高了现代 Graphical Processing Unit 的效率。JavaFX 还提供了可供开发人员组合图形动画和用户界面控件的界面。

人们可以使用基于 JVM 的技术(例如 Java、Groovy 和 JRuby)使用 JavaFX。如果开发人员选择 JavaFX,则无需学习其他技术,因为掌握上述任何技术都足以使用 JavaFX 开发 RIA。

Features of JavaFX

以下是 JavaFX 的一些重要功能:

  1. Written in Java − JavaFX 库用 Java 编写,并且适用于可以在 JVM 上执行的语言,其中包括 Java, Groovy and JRuby 。这些 JavaFX 应用程序还与平台无关。

  2. FXML − JavaFX 中有 FXML 这门语言,它是一种 HTML 声明式标记语言。此语言的唯一目的是定义用户界面。

  3. Scene Builder − JavaFX 提供了一个名为场景生成器的应用程序。通过在 IDE 处(如 Eclipse 和 NetBeans)集成此应用程序,用户可以使用拖放设计界面,该界面用于开发 FXML 应用程序(就像 Swing 拖放和 DreamWeaver 应用程序一样)。

  4. Swing Interoperability − 在 JavaFX 应用程序中,可以使用 Swing Node 类嵌入 Swing 内容。同样,您可以使用 JavaFX 功能(例如嵌入式 Web 内容和丰富图形媒体)更新现有的 Swing 应用程序。

  5. Built-in UI controls − JavaFX 库提供用户界面控件,我们可用其开发一款功能齐全的应用程序。

  6. CSS like Styling − JavaFX 提供 CSS 样式。使用此样式,您可以借助简单的 CSS 知识改进应用程序的设计。

  7. Canvas and Printing API − JavaFX 提供 Canvas,这是一种立即可用模式的渲染 API。在程序包 javafx.scene.canvas 中,它包含一组 Canvas 类,我们可以使用这组类直接在 JavaFX 场景的区域中进行绘图。JavaFX 还提供用于程序包 javafx.print 中打印用途的类。

  8. Rich set of API’s − JavaFX 库提供了一组丰富的 API,用于开发 GUI 应用程序、2D 和 3D 图形等。这组 API 还包括 Java 平台的功能。因此,使用此 API,您可以访问 Java 语言的功能,例如泛型、注释、多线程和 lambda 表达式。传统 Java 集合库得到了增强,其中包含了可观察列表和映射等概念。用户可以使用这些概念来观察数据模型中的变化。

  9. Integrated Graphics library − JavaFX 提供了 2d3d 图形的类。

  10. Graphics pipeline − JavaFX 支持基于称为 Prism 的硬件加速图形管道的图形。它与受支持的图形卡或 GPU 配合使用时,提供平滑的图形。如果系统不支持配卡,Prism 则会默认为软件渲染堆栈。

History of JavaFX

JavaFX 最初是由 Chris Oliver 开发的,他当时在 See Beyond Technology Corporation 公司工作。后来,该家公司在 2005 年被 Sun Microsystems 收购。

以下是有关此项目的更多信息:

  1. 最初,此项目被命名为 F3 (Form Follows Functions) ,并且是为开发 GUI 应用程序提供更丰富的界面而开发的。

  2. Sun Microsystems 在 2005 年 6 月收购了 See Beyond 公司,并将 F3 项目调整为 JavaFX

  3. 2007 年,在每年举办的万维网会议 Java One 上,JavaFX 正式发布。

  4. 2008 年, Net Beans 与 JavaFX 集成已开放。同一年,针对 JavaFX 1.0 发布了 Java Standard Development Kit

  5. 2009 年,Oracle Corporation 收购了 Sun Microsystems,同一年,JavaFX 的下一个版本(1.2)也发布了。

  6. 2010 年,JavaFX 1.3 发布,2011 年发布了 JavaFX 2.0。

  7. 最新版本 JavaFX8 于 2014 年 3 月 18 日作为 Java 的一个组成部分发布。

JavaFX - Environment

从 Java8 开始,JDK (Java Development Kit) 中包含 JavaFX 库。因此,要运行 JavaFX 应用程序,您只需要在您的系统中安装 Java8 或更高版本。

除此之外,像 Eclipse 和 NetBeans 这样的 IDE 为 JavaFX 提供支持。本小节将向您介绍如何以多种方式设置运行 JavaFX 应用程序的环境。

Installing Java8

首先,您需要通过打开命令提示符并在其中键入 “java” 命令来验证您的系统中是否安装了 Java。

如果您尚未在您的系统中安装 Java,命令提示符将显示以下屏幕截图中所示的消息。

installing java

然后按照以下步骤安装 Java。

Step 1 − 访问 JavaSE Downloads 页面,单击 JDK Download 按钮,如以下屏幕截图中突出显示

java se downloads

Step 2 − 单击下载按钮后,您将被重定向到 Java SE Development Kit 8 Downloads 页面。此页面为您提供适用于各个平台的 JDK 链接。

接受许可协议并单击相应链接下载所需软件。

例如,如果您正在使用 Windows 64 位操作系统,那么您需要下载以下屏幕截图中突出显示的 JDK 版本。

java se development kit 8 downloads page

单击突出显示的链接后,适用于 Windows 64 位操作系统的 Java8 开发工具包将下载到您的系统中。

Step 3 − 运行下载的二进制可执行文件以开始安装 JDK8。

java se development kit 8 next

Step 4 − 选择安装目录。

installation directory

Step 5 − 选择目标文件夹并单击下一步后,JavaFX 安装过程将开始显示进度条,如下面的屏幕截图所示。

extracting installer

Step 6 − 根据需要更改安装目录,否则保留默认目录并继续进行。

destination folder

Step 7 − 单击关闭按钮完成安装过程,如下面的屏幕截图所示。

java se installed

Setting up the Path for Windows

安装 Java 后,您需要设置路径变量。假设您已将 Java 安装在 C:\Program Files\java\jdk1.8.0_91 目录中。

现在你可以执行以下步骤:

  1. 右键单击“我的电脑”,然后选择“属性”。

  2. 单击 “高级” 选项卡下的 “环境变量” 按钮。

  3. 现在,更改“路径”变量,使其还包含 Java 可执行文件的路径。例如,如果当前路径设置为“C:\WINDOWS\SYSTEM32”,则将路径更改为“C:\WINDOWS\SYSTEM32;C:\Program Files\java\ jdk1.8.0_91\bin”。

edit environment variable

Setting NetBeans Environment of JavaFX

NetBeans8 为 JavaFX 提供内置支持。安装后,您可以在没有任何额外插件或 JAR 文件的情况下创建 JavaFX 应用程序。要设置 NetBeans 环境,您需要按照以下步骤操作。

Step 1 − 访问 NetBeans website NetBeans 网站,然后单击下载按钮以下载 NetBeans 软件。

netbeans website

Step 2 − 单击 Download 后,您将进入 NetBeans 软件的下载页面,该页面为各种 Java 应用程序提供 NetBeans 捆绑包。下载适用于 JavaSE 的 NetBeans 软件,如下面的屏幕截图所示。

netbeans download page

Step 3 − 单击此按钮后,名为 *netbeans-8.0-windows.exe * 的文件将下载到您的系统中。运行此文件以进行安装。运行此文件后,NetBeans 安装程序将启动,如下面的屏幕截图所示。

configuring installer

配置完成后,您将看到 Welcome Page of the installer

Step 4 − 单击下一步按钮并继续安装。

netbeans ide installer

Step 5 − 下一个窗口包含 NETBEANS IDE 8.0 license agreement 。仔细阅读并通过选中“我接受许可协议中的条款”旁边的复选框接受协议,然后单击 Next 按钮。

netbeans license agreement

Step 6 − 在下一个窗口中,您将遇到 Junit 的许可协议,通过选中“我接受许可协议中的条款,安装 JUnit”旁边的单选按钮接受许可协议,然后单击 Next

accept junit license agreement

Step 7 − 选择您需要安装 Netbeans 8.0 的目标目录。此外,您还可以浏览 Java Development Kit 在系统中安装的位置并单击 Next 按钮。

netbeans installation next

Step 8 − 同样,为 Glassfish Server 安装选择目标目录。浏览 Java 开发工具包目录(现在是 Glassfish 参考),然后单击 Next

glassfish server installation

Step 9 − 勾选 Check for Updates 框以进行自动更新,然后单击安装按钮开始安装。

click install button

Step 10 − 此步骤将启动 NetBeans IDE 8.0 安装,可能需要一段时间。

installation of netbeans ide 8

Step 11 − 一旦进程完成,单击 Finish 按钮以完成安装。

Step 12 − 一旦您启动 NetBeans IDE,您将看到开始页面,如以下屏幕截图所示。

start page

Step 13 − 在文件菜单中,选择 New Project … 以打开新建项目向导,如以下屏幕截图所示。

netbeans file

Step 14 − 在 New Project 向导中,选择 JavaFX 并单击 Next 。它开始为您创建一个新的 JavaFX 应用程序。

new project select javafx

Step 15 − 在 NewJavaFX Application 窗口中选择项目名称和项目位置,然后单击 Finish 。它使用给定的名称创建一个示例应用程序。

project name

在本例中,创建了一个名为 javafxsample 的应用程序。在此应用程序中,NetBeans IDE 将生成一个名为 Javafxsample.java 的 Java 程序。如以下屏幕截图所示,该程序将在 NetBeans 源包 → javafxsample 中创建。

javafxsample java

Step 16 − 右键单击文件并选择 Run File 以运行此代码,如以下屏幕截图所示。

runfile

此自动创建的程序包含生成简单 JavaFX 窗口的代码,该窗口中有一个带有标签 Say ‘Hello World’ 的按钮。每次单击此按钮时,字符串 Hello World 都将显示在控制台上,如下所示。

say hello world

Installing JavaFX in Eclipse

JavaFX 中还提供了一个名为 *e(fx)*clipse 的插件。您可以使用以下步骤在 Eclipse 中设置 JavaFX。首先,确保您的系统中有 Eclipse。如果没有,请下载 Eclipse 并将其安装在系统中。

一旦安装了 Eclipse,请按照下面给出的步骤在您的系统中安装 e(fx)clipse

Step 1 − 在 Help 菜单中打开 Eclipse 并选择 Install New Software … 选项,如下所示。

java eclipse

单击后,它将显示 Available Software 窗口,如以下屏幕截图所示。

available software window

在此窗口的文本框 Work with 中,您需要提供所需软件插件的链接。

Step 2 − 单击 Add … 按钮。将插件名称指定为 e(fx)clipse 。接下来,将以下链接作为位置提供。 http://download.eclipse.org/efxclipse/updates-released/2.3.0/site/

Step 3 − 在指定插件的名称和位置后,单击确定按钮,如以下屏幕截图中所突出显示。

add repository

Step 4 − 添加插件后不久,您将找到两个用于 e(fx)clipse – installe(fx)clipse – single components 的复选框。选中这两个复选框并单击 Add … 按钮,如以下屏幕截图所示。

e(fx)clipse single components

Step 5 − 接下来,打开 Eclipse IDE。单击“文件”菜单,然后选择项目,如下面的屏幕截图所示。

eclipse ide click file menu

Step 6 − 然后,你将得到一个窗口,在其中可以看到 Eclipse 提供的一个向导列表以创建项目。展开 JavaFX 向导,选择 JavaFX Project 并且单击 Next 按钮,如下面的屏幕截图所示。

new project select wizard

Step 7 − 单击 Next 时,将在屏幕上打开“新建项目向导”。在这里,你可以键入所需的项目名称,然后单击 Finish

project name and click finish

Step 8 − 单击“完成”时,一个应用程序将使用提供的名称(样例)创建。在名为 application 的子程序包中,将会生成一个名为 Main.java 的程序,如下所示。

main java

Step 9 − 该自动生成的程序包含用于生成一个空 JavaFX 窗口的代码。右键单击该文件,选择 Run As → Java Application ,如下面的屏幕截图所示。

run as java application

在执行该应用程序时,它会为你提供一个空 JavaFX 窗口,如下所示。

empty javafx window

Note − 我们将在后面的章节中详细讨论代码。

JavaFX - Architecture

JavaFX 提供了一个完整的 API,其中包含丰富的类和接口,以利用丰富的图形构建 GUI 应用程序。该 API 的重要程序包是 −

  1. javafx.animation − 包含用于向 JavaFX 节点添加基于过渡的动画(例如填充、淡入、旋转、缩放和转换)的类。

  2. javafx.application − 包含负责 JavaFX 应用程序生命周期的类集合。

  3. javafx.css − 包含用于向 JavaFX GUI 应用程序添加类 CSS 样式的类。

  4. javafx.event − 包含用于传递和处理 JavaFX 事件的类和接口。

  5. javafx.geometry − 包含用于定义 2D 对象并在其上执行操作的类。

  6. javafx.stage − 此包包含 JavaFX 应用程序的顶级容器类。

  7. javafx.scene − 此包提供类和接口来支持场景图。此外,它还提供子包,例如 canvas、chart、control、effect、image、input、layout、media、paint、shape、text、transform、web 等。有几个组件支持 JavaFX 的这一丰富 API。

以下插图显示了 JavaFX API 的架构。在此,您可以看到支持 JavaFX API 的组件。

architecture of javafx api

Scene Graph

在 JavaFX 中,GUI 应用程序使用场景图进行编码。场景图是 GUI 应用程序构建的起始点。它包含被称为节点的 (GUI) 应用程序基础元素。

节点是视觉/图形对象,它可能包括 −

  1. *几何 (图形) 对象 *−(2D 和 3D)例如圆形、矩形、多边形等。

  2. UI controls − 例如按钮、复选框、选项框、文本区域等。

  3. Containers −(布局窗格)例如边框窗格、网格窗格、流窗格等。

  4. Media elements − 例如音频、视频和图像对象。

通常,节点集合组成一个场景图。所有这些节点按层次顺序排列,如下所示。

scene graph

场景图中的每个节点都有一个父节点,且不包含任何父节点的节点被称为 root node

同样,每个节点都必须一个或多个子级,没有子级的节点叫做 leaf node ;有子级的节点叫做 branch node

一个节点实例只能添加到一个场景图一次。一个场景图的节点可以拥有效果、不透明度、变换、事件处理程序、事件处理程序、应用程序特定状态。

Prism

Prism 是一个 high performance hardware–accelerated graphical pipeline ,用于在 JavaFX 中渲染图形。它能渲染 2-D 和 3-D 图形。

要渲染图形,Prism 会使用:

  1. 在 Windows XP 和 Vista 上的 DirectX 9

  2. 在 Windows 7 上的 DirectX 11

  3. 在 Mac 和 Linux、嵌入式系统上的 OpenGL

如果系统上图形硬件支持不足,则 Prism 会使用软件渲染路径处理图形。

如果与受支持的显卡或 GPU 搭配使用,它会提供更流畅的图形。但如果系统不支持显卡,则 Prism 会默认使用软件渲染堆栈(上述两个之一)。

GWT (Glass Windowing Toolkit)

顾名思义,GWT 提供管理 Windows、计时器、表面和事件队列的服务。GWT 将 JavaFX 平台连接到本地操作系统。

Quantum Toolkit

它是对 Prism、Glass、媒体引擎和 Web 引擎的底层组件的抽象。它将 Prism 和 GWT 联系在一起,让它们可用于 JavaFX。

WebView

使用 JavaFX,你还可以将 HTML 内容嵌入到场景图中。WebView 是 JavaFX 的组件,用于处理此内容。它使用一种称为 Web Kit 的技术,这是一个内部开源网络浏览器引擎。此组件支持 HTML5、CSS、JavaScript、DOM 和 SVG 等不同的 Web 技术。

使用 WebView,你可以:

  1. 渲染来自本地或远程 URL 的 HTML 内容。

  2. 支持历史记录并提供后退和前进导航功能。

  3. Reload the content.

  4. 将效果应用到 Web 组件。

  5. Edit the HTML content.

  6. Execute JavaScript commands.

  7. Handle events.

通常,你可以使用 WebView 从 Java 控制 Web 内容。

Media Engine

JavaFX media engine 基于一个名为 Streamer 的开源引擎。此媒体引擎支持视频和音频内容的播放。

JavaFX 媒体引擎为以下文件格式提供的音频支持:

Audio

MP3WAVAIFF

Video

FLV

javafx.scene.media 包含 JavaFX 中提供媒体功能的类和接口。它以三个组件的形式提供,如下所示:

  1. Media Object − 这表示一个媒体文件

  2. Media Player − 播放媒体内容。

  3. Media View − 显示媒体。

JavaFX - Application

在本章中,我们将详细讨论 JavaFX 应用程序的结构,并通过示例学习如何创建 JavaFX 应用程序。

JavaFX Application Structure

一般而言,JavaFX 应用程序将具有三个主要组件,即 Stage, SceneNodes ,如下所示。

javafx application structure

Stage

一个舞台(窗口)包含 JavaFX 应用程序的所有对象。它由包 javafx.stageStage 类表示。主舞台由平台自身创建。创建的舞台对象作为 Application 类的 start() 方法的参数传递(在下一节中说明)。

舞台有两个确定其位置的参数,即 WidthHeight 。它分为内容区和装饰(标题栏和边框)。

有五种类型的舞台可用 −

  1. Decorated

  2. Undecorated

  3. Transparent

  4. Unified

  5. Utility

您必须调用 show() 方法以显示舞台的内容。

Scene

场景表示 JavaFX 应用程序的物理内容。它包含场景图的所有内容。包 javafx.scene 的类 Scene 表示场景对象。在某个实例中,场景对象仅添加到一个舞台。

您可以通过实例化 Scene 类来创建场景。您可以选择场景的大小,方法是将其尺寸(高度和宽度)连同 root node 一起传递给其构造函数。

Scene Graph and Nodes

scene graph 是一个树状数据结构(分层),表示场景的内容。相比之下, node 是场景图的可视/图形对象。

节点可能包括 −

  1. 几何(图形)对象(2D 和 3D),例如 − 圆、矩形、多边形等。

  2. UI 控件,例如 − 按钮、复选框、选择框、文本区域等。

  3. 容器(布局窗格),例如边框窗格、网格窗格、流窗格等。

  4. 媒体元素,例如音频、视频和图像对象。

javafx.sceneNode 类表示 JavaFX 中的一个节点,这个类是所有节点的超类。

如前所述,节点有三种类型 −

  1. Root Node − 第一个场景图称为根节点。

  2. Branch Node/Parent Node − 具有子节点的节点称为分支/父节点。包 javafx.scene 中名为 Parent 的抽象类是所有父节点的基类,而那些父节点将属于以下类型 − Group − 组节点是一个包含子节点列表的集合节点。每当渲染组节点时,它的所有子节点都会按顺序渲染。对组应用的任何转换、效果状态都将应用于所有子节点。 Region − 它是所有基于 JavaFX 节点的 UI 控件的基类,例如图表、窗格和控件。 WebView − 此节点管理 Web 引擎并显示其内容。

  3. Leaf Node − 无子节点的节点称为叶节点。例如,矩形、椭圆、盒子、ImageView、MediaView 是叶节点的示例。

必须将根节点传递到场景图。如果将组传递为根,则所有节点都将剪切到场景,场景大小的任何更改都不会影响场景的布局。

Creating a JavaFX Application

要创建 JavaFX 应用程序,你需要实例化应用程序类并实现其抽象方法 start() 。在此方法中,我们将为 JavaFX 应用程序编写代码。

Application Class

javafx.application 中的 Application 类是 JavaFX 中应用程序的入口点。要创建 JavaFX 应用程序,你需要继承该类并实现其抽象方法 start() 。在此方法中,你需要编写用于 JavaFX 图形的全部代码

main 方法中,你必须使用 launch() 方法启动应用程序。此方法在内部调用 Application 类的 start() 方法,如下所示:

public class JavafxSample extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
      /*
      Code for JavaFX application.
      (Stage, scene, scene graph)
      */
   }
   public static void main(String args[]){
      launch(args);
   }
}

要在 start() 方法中创建典型的 JavaFX 应用程序,你需要执行以下步骤:

  1. 使用所需的节点准备场景图。

  2. 使用所需的维度准备一个 Scene,并将场景图(场景图的根节点)添加到它。

  3. 准备一个舞台,将场景添加到舞台,并显示舞台的内容。

Preparing the Scene Graph

根据你的应用程序,你需要使用必需的节点准备一个场景图。由于根节点是第一个节点,因此你需要创建一个根节点。作为根节点,你可以从 Group, Region or WebView 中选择。

Group − 一个 Group 节点由名称为 Group 的类表示,该类属于包 javafx.scene ,你可以通过实例化此类来创建一个 Group 节点,如下所示:

Group root = new Group();

getChildren() 方法 Group 类提供一个 ObservableList 类的对象,保存节点。我们可以检索该对象,并将节点添加到其中,如下所示。

//Retrieving the observable list object
ObservableList list = root.getChildren();

//Setting the text object as a node
list.add(NodeObject);

我们还可以通过在实例化时将节点对象传递给 Group 类及其构造函数来向组添加节点对象,如下所示。

Group root = new Group(NodeObject);

Region − 这是所有基于 JavaFX Node 的 UI 控件的基类,例如 −

  1. Chart − 此类是所有图表的基本类,属于包 javafx.scene.chart 。此类有两个子类,分别是 PieChartXYChart 。它们反过来又具有子类,例如 AreaChart, BarChart, BubbleChart 等,用于在 JavaFX 中绘制不同类型的 XY 平面图表。您可以使用这些类在应用程序中嵌入图表。

  2. Pane − 窗格是所有布局窗格的基本类,例如 AnchorPane, BorderPane, DialogPane 等。此类属于名为 javafx.scene.layout 的包。您可以使用这些类在应用程序中插入预定义布局。

  3. Control − 这是用户界面控件的基本类,例如 Accordion, ButtonBar, ChoiceBox, ComboBoxBase, HTMLEditor, etc. This class belongs to the package javafx.scene.control 。您可以使用这些类在应用程序中插入各种 UI 元素。

在组中,您可以实例化上述任何类,并将其用作根节点,如下面的程序所示。

//Creating a Stack Pane
StackPane pane = new StackPane();

//Adding text area to the pane
ObservableList list = pane.getChildren();
list.add(NodeObject);

WebView − 此节点管理 Web 引擎并显示其内容。

下面是表示 JavaFX 节点类层次结构的图表。

webview

Preparing the Scene

JavaFX 场景将表示为程序包 javafx.scene 类的 Scene 。你可以通过实例化该类来创建场景,如下面的代码块所示。

在实例化时,必须将根对象传递给场景类的构造函数。

Scene scene = new Scene(root);

您还可以传递两个表示场景高度和宽度的双类型参数,如下所示。

Scene scene = new Scene(root, 600, 300);

Preparing the Stage

这是任何 JavaFX 应用程序的容器,它为应用程序提供了一个窗口。它由 javafx.stage 包的 Stage 类表示。此类的对象作为 Applicationstart() 方法的参数传递。

使用这个对象,您可以在舞台上执行各种操作。主要是,您可以执行以下操作 −

  1. 使用 setTitle() 方法设置舞台标题。

  2. 使用 setScene() 方法将场景对象附加到舞台。

  3. 使用 show() 方法显示场景的内容,如下所示。

//Setting the title to Stage.
primaryStage.setTitle("Sample application");

//Setting the scene to Stage
primaryStage.setScene(scene);

//Displaying the stage
primaryStage.show();

Lifecycle of JavaFX Application

JavaFX 应用程序类有三个生命周期方法,分别是 −

  1. start() − 编写 JavaFX 图形代码的入口点方法。

  2. stop() − 可重写的空方法,您可在此编写逻辑以停止应用程序。

  3. init() − 可重写的空方法,但您不能在此方法中创建 stage 或 scene。

除了这些以外,它提供名为 launch() 的静态方法以启动 JavaFX 应用程序。

由于 launch() 方法是静态的,您需要从静态上下文中(通常是 main)调用它。每当启动 JavaFX 应用程序时,将会按照(相同顺序)执行以下操作。

  1. 创建应用程序类的实例。

  2. Init() method is called.

  3. 调用 start() 方法。

  4. 启动器会等待应用程序完成并调用 stop() 方法。

Terminating the JavaFX Application

当应用程序的最后一个窗口关闭时,JavaFX 应用程序将被隐式终止。您可以通过将布尔值“False”传递给静态方法* setImplicitExit()*(应从静态上下文中调用)来关闭此行为。

您可以使用 * Platform.exit()* 或 * System.exit*(int) 方法显式终止 JavaFX 应用程序。

Example 1 – Creating an Empty Window

此部分教您如何创建一个显示空窗口的 JavaFX 样例应用程序。以下为步骤 −

Step 1: Creating a Class

创建一个 Java 类,继承包 javafx.application 中的类 Application ,然后实现该类的 start() 方法,如下所示。

public class JavafxSample extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
   }
}

Step 2: Creating a Group Object

start() 方法中,通过实例化属于包 javafx.scene 的名为 Group 的类创建一个组对象,如下所示。

Group root = new Group();

Step 3: Creating a Scene Object

通过实例化属于包 javafx.scene 的名为 Scene 的类,创建一个 Scene。向此类传递在上一步中创建的 Group 对象 (root)

除了根对象以外,您还可以将表示高度和宽度的两个双精度参数与 Group 类的对象一起传递,如下所示。

Scene scene = new Scene(root,600, 300);

Step 4: Setting the Title of the Stage

您可以使用 Stage 类的 setTitle() 方法设置舞台的标题。 primaryStage 是 Stage 对象,它作为参数传递给场景类的 start 方法。

使用 primaryStage 对象,将场景的标题设置为 Sample Application ,如下所示。

primaryStage.setTitle("Sample Application");

Step 5: Adding Scene to the Stage

您可以使用名为 Stage 的类的 setScene() 方法,将 Scene 对象添加到舞台。使用此方法添加在之前的步骤中准备的 Scene 对象,如下所示。

primaryStage.setScene(scene);

Step 6: Displaying the Contents of the Stage

使用 Stage 类的名为 show() 的方法显示场景的内容,如下所示。

primaryStage.show();

Step 7: Launching the Application

通过从 main 方法以如下方式调用 Application 类的静态方法 launch() 启动 JavaFX 应用程序。

public static void main(String args[]){
   launch(args);
}

Example

以下程序生成一个空 JavaFX 窗口。将此代码保存在名为 JavafxSample.java 的文件中

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class JavafxSample extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
      //creating a Group object
      Group group = new Group();

      //Creating a Scene by passing the group object, height and width
      Scene scene = new Scene(group ,600, 300);

      //setting color to the scene
      scene.setFill(Color.BROWN);

      //Setting the title to Stage.
      primaryStage.setTitle("Sample Application");

      //Adding the scene to Stage
      primaryStage.setScene(scene);

      //Displaying the contents of the stage
      primaryStage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac JavafxSample.java
java JavafxSample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

sample application plain

Example 2 – Drawing a Straight Line

在前面的示例中,我们已经看到了如何创建空界面。在这个示例中,让我们使用 JavaFX 库尝试绘制一条直线。

以下为步骤 −

Step 1: Creating a Class

创建一个 Java 类并继承包 javafx.applicationApplication 类,并按如下方式实现此类的 start() 方法。

public class DrawingLine extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
   }
}

Step 2: Creating a Line

你可以通过实例化名为 Line 的类并在 javafx.scene.shape 程序包中进行实例化来在 JavaFX 中创建一条线,如下所示实例化该类。

//Creating a line object
Line line = new Line();

Step 3: Setting Properties to the Line

通过使用各自的 setter 方法来设置 startX, startY, endXendY 属性,指定坐标以在 X-Y 平面中绘制线,如下面的代码块所示。

line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);

Step 4: Creating a Group Object

在 start() 方法中,通过实例化名为 Group 的类来创建一个组对象,该类属于 javafx.scene 程序包。

将上一步中创建的 Line(节点)对象作为 Group 类的构造函数的一个参数,以便将其添加到组中,如下所示 −

Group root = new Group(line);

Step 5: Creating a Scene Object

通过实例化名为 Scene 的类并在 javafx.scene 程序包中进行实例化来创建 Scene。该类将传递上一步中创建的 Group 对象 (root)

除了根对象以外,您还可以将表示高度和宽度的两个双精度参数与 Group 类的对象一起传递,如下所示。

Scene scene = new Scene(group ,600, 300);

Step 6: Setting the Title of the Stage

您可以使用 Stage 类的 setTitle() 方法设置舞台的标题。 primaryStage 是 Stage 对象,它作为参数传递给场景类的 start 方法。

使用 primaryStage 对象,将场景的标题设置为 Sample Application ,如下所示。

primaryStage.setTitle("Sample Application");

Step 7: Adding Scene to the Stage

你可以使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到舞台。使用该方法添加在之前的步骤中准备好的 Scene 对象,如下所示。

primaryStage.setScene(scene);

Step 8: Displaying the Contents of the Stage

使用 Stage 类的名为 show() 的方法显示场景的内容,如下所示。

primaryStage.show();

Step 9: Launching the Application

通过从 main 方法以如下方式调用 Application 类的静态方法 launch() 启动 JavaFX 应用程序。

public static void main(String args[]){
   launch(args);
}

Example

下面的程序展示了如何使用 JavaFX 生成一条直线。将此代码保存在一个名为 JavafxSample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class DrawingLine extends Application{
   @Override
   public void start(Stage stage) {
      //Creating a line object
      Line line = new Line();

      //Setting the properties to a line
      line.setStartX(100.0);
      line.setStartY(150.0);
      line.setEndX(500.0);
      line.setEndY(150.0);

      //Creating a Group
      Group root = new Group(line);

      //Creating a Scene
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the scene
      stage.setTitle("Sample application");

      //Adding the scene to the stage
      stage.setScene(scene);

      //Displaying the contents of a scene
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac DrawingLine.java
java DrawingLine

执行时,上述程序生成一个 JavaFX 窗口,显示一条直线,如下所示。

drawing line

Example 3 – Displaying Text

我们也可以在 JavaFX 场景中嵌入文本。此示例展示如何在 JavaFX 中嵌入文本。

以下为步骤 −

Step 1: Creating a Class

创建 Java 类并继承包 Applicationjavafx.application 类,并按照如下方式实现此类的 start() 方法。

public class DrawingLine extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
   }
}

Step 2: Embedding Text

您可以通过实例化属于包 javafx.scene.shape 的名为 Text 的类来将文本嵌入 JavaFX 场景,实例化该类。

您可以通过以字符串格式传递要嵌入的文本来实例化此类。或者,您可以使用默认构造函数创建文本对象,如下所示。

//Creating a Text object
Text text = new Text();

Step 3: Setting the Font

您可以使用 Text 类的 setFont() 方法为文本设置字体。此方法接受字体对象作为参数。将给定文本的字体设置为 45,如下所示。

//Setting font to the text
text.setFont(new Font(45));

Step 4: Setting the Position of the Text

您可以使用各自的 setter 方法 setX()setY() 设置文本在 X-Y 平面上的位置,方法是设置 X 和 Y 坐标,如下所示。

//setting the position of the text
text.setX(50);
text.setY(150);

Step 5: Setting the text to be added

您可以使用文本类的 setText() 方法设置要添加的文本。此方法接受一个字符串参数,该字符串表示要添加的文本。

text.setText("Welcome to Tutorialspoint");

Step 6: Creating a Group Object

start() 方法中,通过实例化属于包 javafx.scene 的名为 Group 的类来创建组对象。

将上一步创建的 Text(节点)对象作为参数传递给 Group 类的构造函数,以便将其添加到组中,如下所示 −

Group root = new Group(text)

Step 7: Creating a Scene Object

通过实例化属于包 javafx.scene 的名为 Scene 的类,创建一个 Scene。向此类传递在上一步中创建的 Group 对象 (root)

除了根对象以外,您还可以将表示高度和宽度的两个双精度参数与 Group 类的对象一起传递,如下所示。

Scene scene = new Scene(group ,600, 300);

Step 8: Setting the Title of the Stage

您可以使用 Stage 类的 setTitle() 方法设置舞台的标题。 primaryStage 是 Stage 对象,它作为参数传递给场景类的 start 方法。

使用 primaryStage 对象,将场景的标题设置为 Sample Application ,如下所示。

primaryStage.setTitle("Sample Application");

Step 9: Adding Scene to the Stage

你可以使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到舞台。使用该方法添加在之前的步骤中准备好的 Scene 对象,如下所示。

primaryStage.setScene(scene);

Step 10: Displaying the Contents of the Stage

使用 Stage 类的名为 show() 的方法显示场景的内容,如下所示。

primaryStage.show();

Step 11: Launching the Application

通过从 main 方法以如下方式调用 Application 类的静态方法 launch() 启动 JavaFX 应用程序。

public static void main(String args[]){
   launch(args);
}

Example

以下是使用 JavaFX 显示文本的程序。将此代码保存在名为 DisplayingText.java 的文件中。

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class DisplayingText extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a Text object
      Text text = new Text();

      //Setting font to the text
      text.setFont(new Font(45));

      //setting the position of the text
      text.setX(50);
      text.setY(150);

      //Setting the text to be added.
      text.setText("Welcome to Tutorialspoint");

      //Creating a Group object
      Group root = new Group();

      //Retrieving the observable list object
      ObservableList list = root.getChildren();

      //Setting the text object as a node to the group object
      list.add(text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Sample Application");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac DisplayingText.java
java DisplayingText

执行时,上述程序生成一个 JavaFX 窗口,显示文本,如下所示。

javafx window displaying text

JavaFX - 2D Shapes

在上一章中,我们看到了 JavaFX 的基本应用,其中我们学会了如何创建一个空窗口以及如何在 JavaFX 的 XY 平面上绘制线。除了线以外,我们还可以绘制其他一些 2D 形状。

2D Shape

通常,2D 形状是可以绘制在 XY 平面上的几何图形,包括线、矩形、圆等。

使用 JavaFX 库,你可以绘制:

  1. 预定义的形状,如线、矩形、圆、椭圆、多边形、折线、三次曲线、二次曲线、弧形。

  2. 路径元素,如移动路径元素、线、水平线、垂直线、三次曲线、二次曲线、弧形。

  3. 除此之外,你还可以通过解析 SVG 路径绘制 2D 形状。

每个上述 2D 形状均用一个类表示,所有这些类都属于包 javafx.scene.shape 。名为 Shape 的类是 JavaFX 中所有二维形状的基类。

Creating a 2D Shape

要创建图表,你需要:

  1. 实例化所需形状的相应类。

  2. 设置形状的属性。

  3. 将形状对象添加到组。

Instantiating the Respective Class

要创建一个 2 维图形,首先需要实例化其各自的类。

例如,如果您要创建一条线,则需要实例化名为 Line 的类,如下所示 −

Line line = new Line();

Setting the Properties of the Shape

实例化该类后,你需要使用 setter 方法为该形状设置属性。

例如,要绘制一条线,您需要传递其起点和终点的 x 和 y 坐标。您可以使用它们各自的 setter 方法指定这些值,如下所示 −

//Setting the Properties of the Line
line.setStartX(150.0f);
line.setStartY(140.0f);
line.setEndX(450.0f);
line.setEndY(140.0f);

Adding the Shape Object to the Group

最后,你需要将形状的对象添加到组中,方法是将其作为构造函数的参数进行传递,如下所示。

//Creating a Group object
Group root = new Group(line);

下表列出了 JavaFX 提供的各种形状(类)。

S.No

Shape & Description

1

Line 线是连接两个点的几何结构。包 javafx.scene.shapeLine 类在 XY 平面中表示一条线。

2

Rectangle 通常来说,矩形是一个四边形,它有两对平行且重合的边,所有内角都是直角。在 JavaFX 中,一个矩形由名为 Rectangle 的类表示。此类属于包 javafx.scene.shape

3

Rounded Rectangle 在 JavaFX 中,你可以绘制带锐角或带弧角的矩形,带弧角的矩形被称为圆角矩形。

4

Circle 圆是一条形成闭合环路的线,该环路上的每一点与中心点之间的距离都是固定的。在 JavaFX 中,一个圆由名为 Circle 的类表示。此类属于包 javafx.scene.shape

5

Ellipse 椭圆形由两个点定义,每个点都称为焦点。如果取椭圆上的任意一点,则到这两个焦点的距离之和是恒定的。这个椭圆的大小就是由这两个距离的总和来决定的。在 JavaFX 中,一个椭圆形由名为 Ellipse 的类表示。此类属于包 javafx.scene.shape

6

Polygon 由许多共面线段首尾相连而形成的闭合形状。在 JavaFX 中,一个多边形由名为 Polygon 的类表示。此类属于包 javafx.scene.shape

7

Polyline 折线与多边形相同,除了末尾的折线不是闭合的。或者说,连续线由一条或多条线段组成。在 JavaFX 中,一个折线由名为 Polygon 的类表示。此类属于包 javafx.scene.shape

8

Cubic Curve 三次曲线是在 XY 平面上的贝塞尔参数曲线,是 3 次曲线。在 JavaFX 中,一个三次曲线由名为 CubicCurve 的类表示。此类属于包 javafx.scene.shape

9

QuadCurve 二次曲线是在 XY 平面上的贝塞尔参数曲线,是 2 次曲线。在 JavaFX 中,一个二次曲线由名为 QuadCurve 的类表示。此类属于包 javafx.scene.shape

10

Arc 圆弧是曲线的一部分。在 JavaFX 中,一个圆弧由名为 Arc 的类表示。此类属于包 javafx.scene.shapeTypes Of Arc 除此之外,我们可以绘制 3 种类型的圆弧 Open, Chord, Round

11

SVGPath 在 JavaFX 中,我们可以通过解析 SVG 路径来构造图像。此类形状由名为 SVGPath 的类表示。此类属于包 javafx.scene.shape 。此类有一个名为 content 的 String 数据类型属性。此属性表示要从中绘制图像的 SVG 路径编码字符串。

Drawing More Shapes Through Path Class

在上一节中,我们已经看到了如何通过实例化类和设置相应参数来绘制一些简单的预定义形状。

但是,仅靠这些预定义形状还不足以构建 javafx.shape package 提供的基本图形以外的更复杂的形状。

例如,如果您想要绘制一个如以下图表所示的图形元素,则不能依赖于那些简单的形状。

path class

The Path Class

为了绘制这种复杂结构,JavaFX 提供了一个名为 Path 的类。此类表示形状的几何轮廓。

它附加到一个可观察列表,其中包含各种 Path Elements ,如 moveTo、LineTo、HlineTo、VlineTo、ArcTo、QuadCurveTo、CubicCurveTo。

在实例化时,此类基于给定的路径元素构造一个路径。

您可以在实例化此类时向其传递路径元素,如下所示:

Path myshape = new Path(pathElement1, pathElement2, pathElement3);

或者,您可以获取可观察列表,并使用 addAll() 方法添加所有路径元素,如下所示:

Path myshape = new Path();
myshape.getElements().addAll(pathElement1, pathElement2, pathElement3);

您还可以使用 add() 方法逐个添加元素,如下所示:

Path myshape = new Path();
myshape.getElements().add(pathElement1);

The Move to Path Element

路径元素 MoveTo 用于将路径的当前位置移动到指定点。它通常用于设置使用路径元素绘制的形状的起点。

它由包 javafx.scene.shape 中名为 LineTo 的类表示。它具有双精度数据类型2个属性,即:_

  1. X − 从当前位置绘制一条线到的点的 x 坐标。

  2. Y − 从当前位置绘制一条线到的点的 y 坐标。

您可以通过实例化MoveTo类并传递新点的x、y坐标来创建移动到路径元素,如下所示:_

MoveTo moveTo = new MoveTo(x, y);

如果您不向构造函数传递任何值,则新点将被设置为(0,0)。

您还可以使用各自的setter方法设置x,y坐标的值,如下所示:_

setX(value);
setY(value);

Example – Drawing a Complex Path

在此示例中,我们将展示如何使用 Path, MoveToLine 类绘制以下形状。

complex path

将此代码存储在名称为 ComplexShape.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;

public class ComplexShape extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a Path
      Path path = new Path();

      //Moving to the starting point
      MoveTo moveTo = new MoveTo(108, 71);

      //Creating 1st line
      LineTo line1 = new LineTo(321, 161);

      //Creating 2nd line
      LineTo line2 = new LineTo(126,232);

      //Creating 3rd line
      LineTo line3 = new LineTo(232,52);

      //Creating 4th line
      LineTo line4 = new LineTo(269, 250);

      //Creating 4th line
      LineTo line5 = new LineTo(108, 71);

      //Adding all the elements to the path
      path.getElements().add(moveTo);
      path.getElements().addAll(line1, line2, line3, line4, line5);

      //Creating a Group object
      Group root = new Group(path);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Drawing an arc through a path");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac ComplexShape.java
java ComplexShape

在执行时,上述程序会生成一个 JavaFX 窗口,显示一条从当前位置绘制到指定点的弧,如下所示。

drawing arc through path

以下是由JavaFX提供的各种路径元素(类)。这些类存在于包 javafx.shape 中。所有这些类都继承了类 PathElement

S.No

Shape & Description

1

路径元素 line 用于从当前位置绘制一条直线到指定坐标中的某个点。它由一个名为 LineTo 的类表示。此类属于包 javafx.scene.shape

2

路径元素 HLineTo 用于从当前位置绘制一条水平线到指定坐标中的某个点。它由一个名为 HLineTo 的类表示。此类属于包 javafx.scene.shape

3

VLineTo 路径元素 vertical line 用于从当前位置向一个指定的坐标绘制一条竖线。它由一个名为 VLineTo 的类表示。此类属于 javafx.scene.shape 包。

4

QuadCurveTo 路径元素二次曲线用于从当前位置向一个指定的坐标绘制一条 quadratic curve 。它由一个名为 QuadraticCurveTo 的类表示。此类属于 javafx.scene.shape 包。

5

CubicCurveTo 路径元素 cubic curve 用于从当前位置向一个指定的坐标绘制一条三次曲线。它由一个名为 CubicCurveTo 的类表示。此类属于 javafx.scene.shape 包。

6

ArcTo 路径元素 Arc 用于从当前位置向一个指定的坐标绘制一条弧线。它由一个名为 ArcTo 的类表示。此类属于 javafx.scene.shape 包。

Properties of 2D Objects

对于所有 2 维度对象,你可以设置各种属性,如填充、描边、描边类型等。下一节将讨论 2D 对象的各种属性。

Operations on 2D Objects

如果我们向一个组中添加多个形状,第一个形状就会被第二个形状重叠,如下所示。

operations on 2d objects

除了变换(旋转、比例缩放、平移等)、转换(动画)之外,您还可以在 2D 对象上执行三个操作: Union, SubtractionIntersection

S.No

Operation & Description

1

Union Operation 此操作将两个或更多个形状作为输入,并返回它们占用的面积。

2

Intersection Operation 此操作将两个或更多个形状作为输入,并返回它们之间的相交面积。

3

Subtraction Operation 此操作将两个或更多个形状作为输入。然后,它返回第一个形状的面积(不包括第二个形状重叠的面积)。

JavaFX - Text

就像各种形状一样,您还可以在 JavaFX 中创建文本节点。文本节点由名为 Text 的类表示,此类属于 javafx.scene.text 包。

此类包含几个属性,用于在 JavaFX 中创建文本并修改其外观。此类还继承属于 javafx.scene.shape 包的 Shape 类。

因此,除了字体、对齐方式、行距、文本等文本属性外,它还继承了基本的形状节点属性,如 strokeFill, stroke, strokeWidth, strokeType, 等。

Creating a Text Node

由于包 javafx.scene.text 的 Text 类表示 JavaFX 中的文本节点,因此您可以通过如下所示实例化此类来创建文本 -

Text text = new Text();

Text 类包含一个名为 text 的字符串类型属性,它表示要创建的文本。

实例化 Text 类后,需要使用 setText() 方法为该属性设置值,如下所示。

String text = "Hello how are you"
Text.setText(text);

您还可以通过使用各自的设置器方法,即 setX()setY() ,为 x 和 y 指定值来设置文本的位置(原点),如下面的代码块所示 -

text.setX(50);
text.setY(50);

Example

以下程序是一个示例,展示了如何在 JavaFX 中创建文本节点。将此代码保存在名为 TextExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Text;

public class TextExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a Text object
      Text text = new Text();

      //Setting the text to be added.
      text.setText("Hello how are you");

      //setting the position of the text
      text.setX(50);
      text.setY(50);

      //Creating a Group object
      Group root = new Group(text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Sample Application");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac TextExample.java
java TextExample

执行时,上述程序会生成一个 JavaFX 窗口,其中显示指定的文本,如下所示 -

sample application text

Position and Font of the Text

默认情况下,由文本类创建的文本的字体为…、大小为…,颜色为黑色。

您可以使用 setFont() 方法更改文本的字体大小和颜色。此方法接受 Font 类的对象。

javafx.scene.text 中名为 Font 的类用于定义文本的字体。此类包含一个名为 font() 的静态方法。

此方法接受四个参数,即:

  1. family − 这是一个字符串类型,表示要应用于文本的字体的族。

  2. weight − 此属性表示字体的粗细。它接受 9 个值,即 FontWeight.BLACK, FontWeight.BOLD, FontWeight.EXTRA_BOLD, FontWeight.EXTRA_LIGHT, LIGHT, MEDIUM, NORMAL, SEMI_BOLD, THIN

  3. posture − 此属性表示字体姿态(常规或斜体)。它接受两个值 FontPosture.REGULARFontPosture.ITALIC

  4. size − 此属性为 double 类型,表示字体的尺寸。

您可以使用以下方法将字体设置为文本 −

text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));

Example

以下程序是一个示例,展示了如何在 JavaFX 中设置文本节点的字体。在这里,我们设置字体为 Verdana,粗细为粗体,姿势为常规,大小为 20。

将此代码保存在一个名为 TextFontExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;

public class TextFontExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a Text object
      Text text = new Text();

      //Setting font to the text
      text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));

      //setting the position of the text
      text.setX(50);
      text.setY(130);

      //Setting the text to be added.
      text.setText("Hi how are you");

      //Creating a Group object
      Group root = new Group(text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Setting Font to the text");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac TextFontExample.java
java TextFontExample

执行后,上述程序会生成一个 JavaFX 窗口,显示具有指定字体的文本,如下所示 −

setting font to text

Stroke and Color

文本类还继承了包的形状类。因此,您可以使用 javafx.scene.shape 来为文本节点设置笔划和颜色。

您可以按照以下方式使用形状(继承)类的 setFill() 方法将颜色设置为文本 −

text.setFill(Color.BEIGE);

同样,您可以使用 setStroke() 方法设置文本的描边颜色。而描边的宽度可以使用 setStrokeWidth() 方法设置,如下所示 −

//Setting the color
text.setFill(Color.BROWN);

//Setting the Stroke
text.setStrokeWidth(2);

//Setting the stroke color
text.setStroke(Color.BLUE);

Example

下面的程序是一个示例,展示如何设置文本节点的颜色、strokeWidth 和 strokeColor。在此代码中,我们将描边颜色设置为蓝色,文本颜色设置为棕色,描边宽度设置为 2。

将此代码保存在一个名为 StrokeExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;

public class StrokeExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a Text object
      Text text = new Text();

      //Setting font to the text
      text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 50));

      //setting the position of the text
      text.setX(50);
      text.setY(130);

      //Setting the color
      text.setFill(Color.BROWN);

      //Setting the Stroke
      text.setStrokeWidth(2);

      // Setting the stroke color
      text.setStroke(Color.BLUE);

      //Setting the text to be added.
      text.setText("Hi how are you");

      //Creating a Group object
      Group root = new Group(text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Setting font to the text");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac StrokeExample.java
java StrokeExample

执行上述程序时,会生成一个 JavaFX 窗口,其按如下方式显示具有指定描边和颜色属性的文本:

text stroke example

Applying Decorations to Text

您还可以应用装饰,例如删除线;在这种情况下,会在文本中划一条线。可以使用 Text 类的函数下划线文本。

您可以使用 setStrikethrough() 方法在文本中加删除线。该方法接受布尔值,向该方法传递值 true 会在文本中加删除线,如以下代码框所示:

//Striking through the text
text1.setStrikethrough(true);

同理,您可以通过向方法 setUnderLine() 传递值 true 为文本添加下划线,如下所示:

//underlining the text
text2.setUnderline(true);

Example

下面的程序是一个示例,展示如何将装饰(如 underlinestrike through )应用于文本。将此代码保存在一个名为 DecorationsExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;

public class DecorationsExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a Text_Example object
      Text text1 = new Text("Hi how are you");

      //Setting font to the text
      text1.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));

      //setting the position of the text
      text1.setX(50);
      text1.setY(75);

      //Striking through the text
      text1.setStrikethrough(true);

      //Creating a Text_Example object
      Text text2 = new Text("Welcome to Tutorialspoint");

      //Setting font to the text
      text2.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));

      //setting the position of the text
      text2.setX(50);
      text2.setY(150);

      //underlining the text
      text2.setUnderline(true);

      //Creating a Group object
      Group root = new Group(text1, text2);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Decorations Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令从命令提示符处编译并执行已保存的 Java 文件。

javac DecorationsExample.java
java DecorationsExample

执行上述程序时,会生成一个 JavaFX 窗口,如下所示:

decorations example

JavaFX - Effects

效果是任何增强图形外观的操作。在 JavaFX 中,效果是一种应用于节点以在视觉上增强其外观的算法。 Node 类的 effect 属性用于指定效果。

在 JavaFX 中,您可以为一个节点设置各种效果,例如 bloom, blurglow 。每种这些效果都由一个类表示,所有这些类都存在于名为 javafx.scene.effect 的包中。

Applying Effects to a Node

您可以使用 setEffect() 方法将效果应用于节点。对于此方法,您需要传入效果对象。

要将效果应用于节点,您需要−

  1. Create the node.

  2. 实例化需要应用的影响的相应类。

  3. 设置效果的属性。

  4. 使用 setEffect() 方法向节点应用效果。

Creating the Nodes

首先,通过实例化其相应的类,在 JavaFX 应用程序中创建节点。

例如,如果你想对应用程序中的图像应用发光效果。首先,你需要通过实例化 Image 类创建一个图像节点,并设置其视图,如下所示。

//Creating an image
Image image = new Image("https://www.tutorialspoint.com/green/images/logo.png");

//Setting the image view
ImageView imageView = new ImageView(image);

//Setting the position of the image
imageView.setX(100);
imageView.setY(70);

//setting the fit height and width of the image view
imageView.setFitHeight(200);
imageView.setFitWidth(400);

//Setting the preserve ratio of the image view
imageView.setPreserveRatio(true);

Instantiating the Respective Class

实例化表示需要应用到创建的节点的效果的类。

例如 − 要应用发光效果,你需要实例化 Glow 类,如下面的代码框所示 −

Glow glow = new Glow();

Setting the Properties of the Effect

实例化类后,你需要使用其 setter 方法为效果设置属性。

例如 − 要绘制一个 3 维盒子,你需要传递其宽度、高度和深度。你可以使用它们各自的 setter 方法指定这些值,如下所示 −

//setting the level property
glow.setLevel(0.9);

Adding Effect to the Node

最后,你可以使用 setEffect() 方法向节点应用所需的效果。例如:要将发光效果设置到图像节点,你需要按照如下方式将 Glow 类的对象传递给该方法 −

imageView.setEffect(glow);

JavaFX Effects − 下表为你提供了 JavaFX 提供的各种效果(类)列表。这些类存在于名为 javafx.scene.effect 的包中。

S.No

Shape and Description

1

Color Adjust 你可以通过向图像应用色彩调整效果来调整图像的色彩。这包括对每个像素 hue, saturation, brightnesscontrast 的调整包 javafx.scene.effect 中名为 ColorAdjust 的类表示色彩调整效果。

2

Color Input 色彩输入效果提供类似于绘制一个矩形并用色彩填充它的输出。与其他效果不同,如果这个效果应用于任意节点,它只显示一个矩形盒子(而不是节点)。此效果主要用作其他效果的输入传递。包 javafx.scene.effect 中名为 ColorInput 的类表示色彩输入效果。

3

Image Input JavaFX 中的图像输入效果只是将一个图像嵌入 JavaFX 屏幕。就像色彩输入效果(它用作将指定的彩色矩形区域作为输入传递到其他效果),图像输入效果用作将指定的图像作为输入传递到其他效果。包 javafx.scene.effect 中名为 ImageInput 的类表示图像输入效果。

4

Blend 一般来说,混合意味着两种或更多不同东西或物质的混合。如果我们应用此混合效果,它将获取两个不同输入的像素,在相同的位置,并且它将基于 blend mode 生成一个组合输出。包 javafx.scene.effect 中名为 Blend 的类表示混合效果。

5

Bloom 在应用绽放效果后,节点某些部分的像素会发光。包 javafx.scene.effect 中名为 Bloom 的类表示绽放效果。

6

Glow 就像绽放,发光效果使给定的输入图像发光,此效果使输入的亮像素更亮。包 javafx.scene.effect 中名为 Glow 的类表示发光效果。

7

Box Blur 在将此模糊效果应用到一个节点上时,它变得不清楚。盒状模糊是 JavaFX 提供的一种模糊效果。在此效果中,当我们将模糊应用到一个节点时,将使用一个简单的盒状滤镜。包 javafx.scene.effect 中名为 BoxBlur 的类表示盒状模糊效果。

8

GaussianBlur 就像盒状模糊,高斯模糊是 JavaFX 中用于模糊节点的一种效果。 Gaussian Blur effect 的唯一差别是使用高斯卷积核来产生模糊效果。包 javafx.scene.effect 中名为 GaussianBlur 的类表示高斯模糊效果。

9

MotionBlur 就像高斯效果一样,动态模糊也是一种在 JavaFX 中模糊节点的效果。它也使用高斯卷积核产生模糊效果,但不同之处在于此效果中高斯卷积核与指定角度一起使用。包 javafx.scene.effect 中名为 MotionBlur 的类表示动态模糊效果。

10

Reflection 在 JavaFX 中对节点应用反射效果后,将在节点底部添加该反射效果。包 javafx.scene.effect 中名为 Reflection 的类表示反射效果。

11

SepiaTone 在 JavaFX 中对节点(通常是图像)应用褐色色调效果时,它会被涂成红棕色。包 javafx.scene.effect 中名为 SepiaTone 的类表示褐色色调效果。

12

Shadow 此效果创建指定节点的副本,并带有模糊边缘。包 javafx.scene.effect 中名为 Shadow 的类表示褐色色调效果。

13

DropShadow 在对节点应用此效果时,将在指定节点后面创建阴影。包 javafx.scene.effect 中名为 DropShadow 的类表示阴影效果。

14

InnerShadow 在对节点应用此效果时,将在节点边缘内部创建阴影。包 javafx.scene.effect 中名为 InnerShadow 的类表示内部阴影效果。

15

Lighting 使用灯光效果模拟光源发出的光。有不同种类的光源,即 pointdistantspot 。包 javafx.scene.effect 的名为 Lighting 的类表示光照效果。

16

Light.Distant 将该效果应用到一个节点时,节点上模拟出光,就像它由一个远光源产生一样。 Distant Light Source −一个离节点很远的源。在这里,光从光源的一个方向衰减。包 javafx.scene.effect 的名为 Light.Distant 的类表示远光源。

17

Light.Spot 将该效果应用到一个节点时,节点上模拟出光,就像它由一个聚光灯产生一样。 Spot light Source −该光源的光线向所有方向衰减。光线的强度取决于物体与光源的距离。包 javafx.scene.effect 的名为 Light.Spot 的类表示远光源。

18

Point.Spot 将该效果应用到一个节点时,节点上模拟出光,就像它由一个点光源产生一样。 Point Light Source −该光源的光线从单一的一点向所有方向衰减。光线的强度取决于物体与光源的距离。包 javafx.scene.effect 的名为 Point.Spot 的类表示点光源。

JavaFX - Transformations

通过应用规则,图形变形成为了改变一些图形内容。我们可以进行旋转等各种类型的变形。

使用 JavaFX,可以在节点上应用旋转、缩放和平移等变换。所有这些转换都由不同的类表示,并且属于包 javafx.scene.transform

S.No

Transformation & Description

1

Rotation 在旋转中,我们从对象的原点以特定角度 θ (theta) 旋转对象。

2

Scaling 要更改对象的大小,请使用缩放转换。

3

Translation 将对象移动到屏幕上的不同位置。

4

Shearing 使对象的形状倾斜的转换称为剪切转换。

Multiple Transformations

你也可以在 JavaFX 中对节点应用多个转换。以下程序就是一个示例,它同时对一个矩形执行 Rotation, ScalingTranslation 转换。

将此代码保存在一个名为 − 的文件中

MultipleTransformationsExample.java

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;

public class MultipleTransformationsExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Rectangle
      Rectangle rectangle = new Rectangle(50, 50, 100, 75);

      //Setting the color of the rectangle
      rectangle.setFill(Color.BURLYWOOD);

      //Setting the stroke color of the rectangle
      rectangle.setStroke(Color.BLACK);

      //creating the rotation transformation
      Rotate rotate = new Rotate();

      //Setting the angle for the rotation
      rotate.setAngle(20);

      //Setting pivot points for the rotation
      rotate.setPivotX(150);
      rotate.setPivotY(225);

      //Creating the scale transformation
      Scale scale = new Scale();

      //Setting the dimensions for the transformation
      scale.setX(1.5);
      scale.setY(1.5);

      //Setting the pivot point for the transformation
      scale.setPivotX(300);
      scale.setPivotY(135);

      //Creating the translation transformation
      Translate translate = new Translate();

      //Setting the X,Y,Z coordinates to apply the translation
      translate.setX(250);
      translate.setY(0);
      translate.setZ(0);

      //Adding all the transformations to the rectangle
      rectangle.getTransforms().addAll(rotate, scale, translate);

      //Creating a Group object
      Group root = new Group(rectangle);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Multiple transformations");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac MultipleTransformationsExample.java
java MultipleTransformationsExample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

multiple transformation

Transformations on 3D Objects

你还可以对三维对象执行变换。以下是一个旋转并平移一个三维盒子的示例。

将此代码保存在名为 RotationExample3D.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;

public class RotationExample3D extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Box
      Box box = new Box();

      //Setting the properties of the Box
      box.setWidth(150.0);
      box.setHeight(150.0);
      box.setDepth(150.0);

      //Creating the translation transformation
      Translate translate = new Translate();
      translate.setX(400);
      translate.setY(150);
      translate.setZ(25);

      Rotate rxBox = new Rotate(0, 0, 0, 0, Rotate.X_AXIS);
      Rotate ryBox = new Rotate(0, 0, 0, 0, Rotate.Y_AXIS);
      Rotate rzBox = new Rotate(0, 0, 0, 0, Rotate.Z_AXIS);
      rxBox.setAngle(30);
      ryBox.setAngle(50);
      rzBox.setAngle(30);
      box.getTransforms().addAll(translate,rxBox, ryBox, rzBox);

      //Creating a Group object
      Group root = new Group(box);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Drawing a cylinder");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac RotationExample3D.java
java RotationExample3D

执行后,上述程序会生成如下所示的 JavaFX 窗口。

3d rotation

JavaFX - Animations

通常,为对象添加动画表示按照快速显示的方式创建其运动的错觉。在 JavaFX 中,可以通过在一定时间内更改节点的属性为其添加动画。JavaFX 提供了一个名为 javafx.animation 的包。此包包含用于为节点添加动画的类。Animation 是所有这些类的基类。

使用 JavaFX,你可应用动画(过渡),例如 Fade TransitionFill TransitionRotate TransitionScale TransitionStroke TransitionTranslate TransitionPath TransitionSequential TransitionPause TransitionParallel Transition 等。

所有这些过渡在包 javafx.animation 中均由单个类表示。

如需对节点应用特定动画,您必须执行以下步骤:

  1. 通过使用各自的类创建需要的节点。

  2. 实例化要应用的各自的过渡(动画)类。

  3. 设置过渡的属性和。

  4. 最后,使用 Animation 类的 play() 方法播放过渡。

在本章,我们将讨论基本过渡(旋转、缩放、平移)的示例。

Rotate Transition

以下是 JavaFX 中旋转过渡演示的程序。将此代码保存在名为 RotateTransitionExample.java 的文件中。

import javafx.animation.RotateTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;

public class RotateTransitionExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a hexagon
      Polygon hexagon = new Polygon();

      //Adding coordinates to the hexagon
      hexagon.getPoints().addAll(new Double[]{
         200.0, 50.0,
         400.0, 50.0,
         450.0, 150.0,
         400.0, 250.0,
         200.0, 250.0,
         150.0, 150.0,
      });
      //Setting the fill color for the hexagon
      hexagon.setFill(Color.BLUE);

      //Creating a rotate transition
      RotateTransition rotateTransition = new RotateTransition();

      //Setting the duration for the transition
      rotateTransition.setDuration(Duration.millis(1000));

      //Setting the node for the transition
      rotateTransition.setNode(hexagon);

      //Setting the angle of the rotation
      rotateTransition.setByAngle(360);

      //Setting the cycle count for the transition
      rotateTransition.setCycleCount(50);

      //Setting auto reverse value to false
      rotateTransition.setAutoReverse(false);

      //Playing the animation
      rotateTransition.play();

      //Creating a Group object
      Group root = new Group(hexagon);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Rotate transition example ");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac RotateTransitionExample.java
java RotateTransitionExample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

rotate transition

Scale Transition

以下是展示 JavaFX 中缩放过渡的程序。将此代码保存在名为 ScaleTransitionExample.java 的文件中。

import javafx.animation.ScaleTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ScaleTransitionExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the position of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(135.0f);

      //Setting the radius of the circle
      circle.setRadius(50.0f);

      //Setting the color of the circle
      circle.setFill(Color.BROWN);

      //Setting the stroke width of the circle
      circle.setStrokeWidth(20);

      //Creating scale Transition
      ScaleTransition scaleTransition = new ScaleTransition();

      //Setting the duration for the transition
      scaleTransition.setDuration(Duration.millis(1000));

      //Setting the node for the transition
      scaleTransition.setNode(circle);

      //Setting the dimensions for scaling
      scaleTransition.setByY(1.5);
      scaleTransition.setByX(1.5);

      //Setting the cycle count for the translation
      scaleTransition.setCycleCount(50);

      //Setting auto reverse value to true
      scaleTransition.setAutoReverse(false);

      //Playing the animation
      scaleTransition.play();

      //Creating a Group object
      Group root = new Group(circle);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Scale transition example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac ScaleTransitionExample.java
java ScaleTransitionExample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

scale transition

Translate Transition

以下是演示 JavaFX 中转换过渡的程序。将此代码保存在名称为 TranslateTransitionExample.java 的文件中。

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TranslateTransitionExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the position of the circle
      circle.setCenterX(150.0f);
      circle.setCenterY(135.0f);

      //Setting the radius of the circle
      circle.setRadius(100.0f);

      //Setting the color of the circle
      circle.setFill(Color.BROWN);

      //Setting the stroke width of the circle
      circle.setStrokeWidth(20);

      //Creating Translate Transition
      TranslateTransition translateTransition = new TranslateTransition();

      //Setting the duration of the transition
      translateTransition.setDuration(Duration.millis(1000));

      //Setting the node for the transition
      translateTransition.setNode(circle);

      //Setting the value of the transition along the x axis.
      translateTransition.setByX(300);

      //Setting the cycle count for the transition
      translateTransition.setCycleCount(50);

      //Setting auto reverse value to false
      translateTransition.setAutoReverse(false);

      //Playing the animation
      translateTransition.play();

      //Creating a Group object
      Group root = new Group(circle);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Translate transition example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac TranslateTransitionExample.java
java TranslateTransitionExample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

translate transition

此外,JavaFX 提供的类还可以对节点应用更多过渡。以下是 JavaFX 支持的其他类型的过渡。

  1. 影响节点属性的过渡 Fade, Fill, Stroke

  2. 涉及多个基本过渡的过渡 Sequential, Parallel, Pause

  3. 沿着指定路径平移对象的过渡 Path Transition

JavaFX - Colors

要向应用程序应用颜色,JavaFX 提供了 javafx.scene.paint 包中的各种类。该包包含一个名为 Paint 的抽象类,它是用于应用颜色的所有类的基类。

使用这些类,您可以按照以下模式应用颜色 −

  1. Uniform − 在此模式中,颜色在整个节点中均匀应用。

  2. Image Pattern − 这允许您使用图像模式填充节点区域。

  3. Gradient − 在此模式中,应用于节点的颜色从一点变到另一不同点。它有两种类型的渐变,即 Linear GradientRadial Gradient

您可以向其应用颜色的所有那些节点类,例如 Shape, Text (包括场景),都具有名为 setFill()setStroke() 的方法。这些将分别有助于设置节点的颜色值及其笔触。

这些方法接受 Paint 类型的对象。因此,要创建这些类型的图像之一,您需要实例化这些类并将对象作为参数传递给这些方法。

Applying Color to the Nodes

要向节点设置统一的颜色模式,您需要将 color 类的静态变量传递给 setFill()setStroke() 方法,如下所示 −

//Setting color to the text
Color color = new Color.BEIGE
text.setFill(color);

//Setting color to the stroke
Color color = new Color.DARKSLATEBLUE
circle.setStroke(color);

在上述代码块中,我们使用 color 类 的静态变量来创建一个颜色对象。

同样,您还可以使用 RGB 值或 HSB 标准的着色或颜色网页哈希代码,如下所示 −

//creating color object by passing RGB values
Color c = Color.rgb(0,0,255);

//creating color object by passing HSB values
Color c = Color.hsb(270,1.0,1.0);

//creating color object by passing the hash code for web
Color c = Color.web("0x0000FF",1.0);

Example

下面是一个示例,演示如何将颜色应用于 JavaFX 中的节点。这里,我们正在创建圆形和文本节点,并向其应用颜色。

将此代码保存在名为 ColorExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class ColorExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the properties of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(180.0f);
      circle.setRadius(90.0f);

      //Setting color to the circle
      circle.setFill(Color.DARKRED);

      //Setting the stroke width
      circle.setStrokeWidth(3);

      //Setting color to the stroke
      circle.setStroke(Color.DARKSLATEBLUE);

      //Drawing a text
      Text text = new Text("This is a colored circle");

      //Setting the font of the text
      text.setFont(Font.font("Edwardian Script ITC", 50));

      //Setting the position of the text
      text.setX(155);
      text.setY(50);

      //Setting color to the text
      text.setFill(Color.BEIGE);
      text.setStrokeWidth(2);
      text.setStroke(Color.DARKSLATEBLUE);

      //Creating a Group object
      Group root = new Group(circle, text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Color Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac ColorExample.java
java ColorExample

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

color example

Applying Image Pattern to the Nodes

要对节点应用图像模式,请实例化 ImagePattern 类,并将它的对象传递给 setFill()setStroke() 方法。

该类的构造函数接受六个参数,即 −

  1. Image - 用于创建模式的图像对象。

  2. x and y - 表示锚定矩形原点 (x, y) 坐标的双变量。

  3. height and width - 表示用于创建模式的图像的高度和宽度的双变量。

  4. isProportional - 这是一个布尔变量;将此属性设置为 true 时,开始结束位置会被设置为比例。

ImagePattern radialGradient = new ImagePattern(dots, 20, 20, 40, 40, false);

Example

下面是一个示例,演示如何将图像模式应用于 JavaFX 中的节点。这里,我们正在创建圆形和文本节点,并向其应用图像模式。

将此代码保存在名为 ImagePatternExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;

import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.paint.Stop;

import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class ImagePatternExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the properties of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(180.0f);
      circle.setRadius(90.0f);

      //Drawing a text
      Text text = new Text("This is a colored circle");

      //Setting the font of the text
      text.setFont(Font.font("Edwardian Script ITC", 50));

      //Setting the position of the text
      text.setX(155);
      text.setY(50);

      //Setting the image pattern
      String link = "https://encrypted-tbn1.gstatic.com"
         + "/images?q=tbn:ANd9GcRQub4GvEezKMsiIf67U"
         + "rOxSzQuQ9zl5ysnjRn87VOC8tAdgmAJjcwZ2qM";

      Image image = new Image(link);
      ImagePattern radialGradient = new ImagePattern(image, 20, 20, 40, 40, false);

      //Setting the linear gradient to the circle and text
      circle.setFill(radialGradient);
      text.setFill(radialGradient);

      //Creating a Group object
      Group root = new Group(circle, text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Image pattern Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac ImagePatternExample.java
java ImagePatternExample

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

image pattern example

Applying Linear Gradient Pattern

要在节点上应用线性渐变模式,实例化 LinearGradient 类并将其对象传递给 setFill(), setStroke() 方法。

此类的构造函数接受五个参数,即:

  1. startX, startY - 这些双重属性表示渐变的起始点的 x 和 y 坐标。

  2. endX, endY - 这些双重属性表示渐变的结束点的 x 和 y 坐标。

  3. cycleMethod - 此参数定义了由起始点和结束点定义的颜色渐变边界外部的区域应如何填充。

  4. proportional - 这是一个布尔变量;将此属性设置为 true 时,起始和结束位置将按比例设置。

  5. Stops - 此参数定义了沿渐变线上的颜色停点。

//Setting the linear gradient
Stop[] stops = new Stop[] {
   new Stop(0, Color.DARKSLATEBLUE),
   new Stop(1, Color.DARKRED)
};
LinearGradient linearGradient =
   new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);

Example

以下是一个示例,演示如何在 JavaFX 中的节点上应用渐变模式。在此,我们创建一个圆形和一个文本节点,并向其应用线性渐变模式。

将此代码保存在名为 LinearGradientExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;

import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;

import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class LinearGradientExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the properties of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(180.0f);
      circle.setRadius(90.0f);

      //Drawing a text
      Text text = new Text("This is a colored circle");

      //Setting the font of the text
      text.setFont(Font.font("Edwardian Script ITC", 55));

      //Setting the position of the text
      text.setX(140);
      text.setY(50);

      //Setting the linear gradient
      Stop[] stops = new Stop[] {
         new Stop(0, Color.DARKSLATEBLUE),
         new Stop(1, Color.DARKRED)
      };
      LinearGradient linearGradient =
         new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);

      //Setting the linear gradient to the circle and text
      circle.setFill(linearGradient);
      text.setFill(linearGradient);

      //Creating a Group object
      Group root = new Group(circle, text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Linear Gradient Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac LinearGradientExample.java
java LinearGradientExample

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

linear gradient

Applying Radial Gradient Pattern

要将径向渐变模式应用于节点,请实例化 GradientPattern 类并将其对象传递给 setFill(), setStroke() 方法。

此类的构造函数接受一些参数,其中一些是:

  1. startX, startY - 这些双重属性表示渐变的起始点的 x 和 y 坐标。

  2. endX, endY - 这些双重属性表示渐变的结束点的 x 和 y 坐标。

  3. cycleMethod - 此参数定义颜色渐变边界之外的区域如何通过开始点和结束点定义,以及如何填充它们。

  4. proportional - 这是一个布尔变量;将此属性设置为 true 时,开始和结束位置被设置为一个比例。

  5. Stops - 此参数定义了沿渐变线上的颜色停点。

//Setting the radial gradient
Stop[] stops = new Stop[] {
   new Stop(0.0, Color.WHITE),
   new Stop(0.3, Color.RED),
   new Stop(1.0, Color.DARKRED)
};

RadialGradient radialGradient =
   new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);

Example

以下是一个示例,演示如何在 JavaFX 中将径向渐变模式应用于节点。在此处,我们创建一个圆形和一个文本节点,并将渐变模式应用于它们。

将此代码保存在文件 RadialGradientExample.java 中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;

import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;

import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class RadialGradientExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the properties of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(180.0f);
      circle.setRadius(90.0f);

      //Drawing a text
      Text text = new Text("This is a colored circle");

      //Setting the font of the text
      text.setFont(Font.font("Edwardian Script ITC", 50));

      //Setting the position of the text
      text.setX(155);
      text.setY(50);

      //Setting the radial gradient
      Stop[] stops = new Stop[] {
         new Stop(0.0, Color.WHITE),
         new Stop(0.3, Color.RED),
         new Stop(1.0, Color.DARKRED)
      };
      RadialGradient radialGradient =
         new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);

      //Setting the radial gradient to the circle and text
      circle.setFill(radialGradient);
      text.setFill(radialGradient);

      //Creating a Group object
      Group root = new Group(circle, text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Radial Gradient Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]) {
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac RadialGradientExample.java
java RadialGradientExample

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

radial gradient

JavaFX - Images

可以使用 JavaFX 在包 javafx.scene.image 提供的类加载和修改图像。JavaFX 支持以下图像格式 Bmp, Gif, Jpeg, Png

本章将说明如何在 JavaFX 中加载图像、如何在多个视图中投影图像以及如何修改图像的像素。

Loading an Image

你可以通过实例化 javafx.scene.image 包中的名为 Image 的类,在 JavaFX 中加载图像。

必须将以下任一项传递给该类的构造函数 −

  1. 要加载的图像的 InputStream 对象,或者

  2. 包含图像 URL 的字符串变量。

//Passing FileInputStream object as a parameter
FileInputStream inputstream = new FileInputStream("C:\\images\\image.jpg");
Image image = new Image(inputstream);

//Loading image from URL
//Image image = new Image(new FileInputStream("url for the image));

加载图像之后,您可以通过实例化 ImageView 类并将图像传递给其构造函数来设置图像视图,如下所示 −

ImageView imageView = new ImageView(image);

Example

以下示例演示了如何在 JavaFX 中加载图像并设置视图。

将此代码另存为名为 ImageExample.java 的文件。

import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class ImageExample extends Application {
   @Override
   public void start(Stage stage) throws FileNotFoundException {
      //Creating an image
      Image image = new Image(new FileInputStream("path of the image"));

      //Setting the image view
      ImageView imageView = new ImageView(image);

      //Setting the position of the image
      imageView.setX(50);
      imageView.setY(25);

      //setting the fit height and width of the image view
      imageView.setFitHeight(455);
      imageView.setFitWidth(500);

      //Setting the preserve ratio of the image view
      imageView.setPreserveRatio(true);

      //Creating a Group object
      Group root = new Group(imageView);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 500);

      //Setting title to the Stage
      stage.setTitle("Loading an image");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]) {
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac ImageExample.java
java ImageExample

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

loading image

Multiple Views of an Image

你还可以为同一场景中的图像设置多个视图。以下程序是一个示例,它演示了如何在 JavaFX 中为场景中的图像设置各种视图。

将此代码另存为名为 MultipleViews.java 的文件。

import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class MultipleViews extends Application {
   @Override
   public void start(Stage stage) throws FileNotFoundException {
      //Creating an image
      Image image = new Image(new FileInputStream("file path"));

      //Setting the image view 1
      ImageView imageView1 = new ImageView(image);

      //Setting the position of the image
      imageView1.setX(50);
      imageView1.setY(25);

      //setting the fit height and width of the image view
      imageView1.setFitHeight(300);
      imageView1.setFitWidth(250);

      //Setting the preserve ratio of the image view
      imageView1.setPreserveRatio(true);

      //Setting the image view 2
      ImageView imageView2 = new ImageView(image);

      //Setting the position of the image
      imageView2.setX(350);
      imageView2.setY(25);

      //setting the fit height and width of the image view
      imageView2.setFitHeight(150);
      imageView2.setFitWidth(250);

      //Setting the preserve ratio of the image view
      imageView2.setPreserveRatio(true);

      //Setting the image view 3
      ImageView imageView3 = new ImageView(image);

      //Setting the position of the image
      imageView3.setX(350);
      imageView3.setY(200);

      //setting the fit height and width of the image view
      imageView3.setFitHeight(100);
      imageView3.setFitWidth(100);

      //Setting the preserve ratio of the image view
      imageView3.setPreserveRatio(true);

      //Creating a Group object
      Group root = new Group(imageView1, imageView2, imageView3);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 400);

      //Setting title to the Stage
      stage.setTitle("Multiple views of an image");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]) {
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac MultipleViews.java
java MultipleViews

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

multiple view

Writing Pixels

JavaFX 提供名为 PixelReaderPixelWriter 的类来读取和写入图像的像素。 WritableImage 类用于创建一个可写图像。

以下是演示如何读写图像像素的示例。在这里,我们读入图像的颜色值,并使其变暗。

将此代码另存为名为 WritingPixelsExample.java 的文件。

import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;

import javafx.scene.Group;
import javafx.scene.Scene;

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.PixelReader;
import javafx.scene.image.PixelWriter;
import javafx.scene.image.WritableImage;

import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class WritingPixelsExample extends Application {
   @Override
   public void start(Stage stage) throws FileNotFoundException {
      //Creating an image
      Image image = new Image(new FileInputStream("C:\\images\\logo.jpg"));
      int width = (int)image.getWidth();
      int height = (int)image.getHeight();

      //Creating a writable image
      WritableImage wImage = new WritableImage(width, height);

      //Reading color from the loaded image
      PixelReader pixelReader = image.getPixelReader();

      //getting the pixel writer
      PixelWriter writer = wImage.getPixelWriter();

      //Reading the color of the image
      for(int y = 0; y < height; y++) {
         for(int x = 0; x < width; x++) {
            //Retrieving the color of the pixel of the loaded image
            Color color = pixelReader.getColor(x, y);

            //Setting the color to the writable image
            writer.setColor(x, y, color.darker());
         }
      }
      //Setting the view for the writable image
      ImageView imageView = new ImageView(wImage);

      //Creating a Group object
      Group root = new Group(imageView);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 500);

      //Setting title to the Stage
      stage.setTitle("Writing pixels ");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]) {
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac WritingPixelsExample.java
java WritingPixelsExample

执行后,以上程序将生成一个 JavaFX 窗口,如下所示 −

writing pixels

JavaFX - 3D Shapes

在前面的章节中,我们已经了解了如何在线段图上绘画二维形状。除了这些二维形状,我们还可以使用 JavaFX 绘画一些其他三维形状。

3D Shape

通常,三维形状是可以绘制在线段图上的几何图形。其中包括一个 Cylinder, Sphere 和一个 Box

以上提到的每个 3D 形状都由一个类表示,且所有这些类都属于包 javafx.scene.shape 。名为 Shape3D 的类是 JavaFX 中所有 3D 形状的基类。

Creating a 3D Shape

要创建一个 3D 形状,你需要:

  1. 实例化所需 3D 形状的相应类。

  2. 设置 3D 形状的属性。

  3. 将 3D 形状对象添加到组中。

Instantiating the Respective Class

要创建一个 3D 形状,首先需要实例化其相应类。例如,如果要创建一个 3D 盒子,你需要实例化名为 Box 的类,如下所示:

Box box = new Box();

Setting the Properties of the Shape

实例化该类后,你需要使用 setter 方法为该形状设置属性。

例如,要绘制一个 3D 盒子,你需要传递其宽度、高度和深度。你可以使用其各自的 setter 方法指定这些值,如下所示:

//Setting the properties of the Box
box.setWidth(200.0);
box.setHeight(400.0);
box.setDepth(200.0);

Adding the Shape Object to the Group

最后,你需要将形状的对象添加到组中,方法是将其作为构造函数的参数进行传递,如下所示。

//Creating a Group object
Group root = new Group(box);

下表提供了 JavaFX 提供的各种 3D 形状的列表。

S.No

Shape & Description

1

Box 长方体是一种三维形状,具有 length (深度)、 widthheight 。在 JavaFX 中,三维盒子由名为 Box 的类表示。此类属于软件包 javafx.scene.shape 。通过实例化此类,可以在 JavaFX 中创建 Box 节点。此类有 3 个双精度数据类型属性,即:- width ——盒子的宽度。 height ——盒子的高度。 depth ——盒子的深度。

2

Cylinder 圆柱体是一种封闭的实体,有两个平行的(大部分是圆形的)底座,由一个曲面连接。它由两个参数描述,即其圆形底座的 radius 和圆柱体的 height 。在 JavaFX 中,圆柱体由名为 Cylinder 的类表示。此类属于软件包 javafx.scene.shape 。通过实例化此类,可以在 JavaFX 中创建圆柱体节点。此类具有 2 个双精度数据类型属性,即:- height ——圆柱体的高度。 radius ——圆柱体的半径。

3

Sphere 球体定义为在 3D 空间中与给定点距离均为 r 的点集。此距离 r 是球体的半径,给定点是球体的中心。在 JavaFX 中,球体由名为 Sphere 的类表示。此类属于软件包 javafx.scene.shape 。通过实例化此类,可以在 JavaFX 中创建球体节点。此类具有一个名为 radius 的双精度数据类型属性。它表示球体的半径。

Properties of 3D Objects

对于所有 3 维对象,可以设置各种属性,如剔除面、绘制模式、材质。

以下部分讨论 3D 对象的属性。

Cull Face

通常,剔除是指移除形状中方向不当的部分(在视图区域中不可见)。

剔除面属性的类型为 CullFace ,它表示 3D 形状的剔除面。你可以使用 setCullFace() 方法设置形状的剔除面,如下所示:

box.setCullFace(CullFace.NONE);

形状的描边类型可以是:

  1. None − 不执行剔除(CullFace.NONE)。

  2. Front - 剔除所有朝向正面的多边形。(CullFace.FRONT)。

  3. Back - 剔除所有朝向反面的多边形。(StrokeType.BACK)。

默认情况下,三维图形的剔除面是反面。

Example

以下程序演示了球体的各种剔除面的示例。将此代码保存在名为 SphereCullFace.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.CullFace;
import javafx.stage.Stage;
import javafx.scene.shape.Sphere;

public class SphereCullFace extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing Sphere1
      Sphere sphere1 = new Sphere();

      //Setting the radius of the Sphere
      sphere1.setRadius(50.0);

      //Setting the position of the sphere
      sphere1.setTranslateX(100);
      sphere1.setTranslateY(150);

      //setting the cull face of the sphere to front
      sphere1.setCullFace(CullFace.FRONT);

      //Drawing Sphere2
      Sphere sphere2 = new Sphere();

      //Setting the radius of the Sphere
      sphere2.setRadius(50.0);

      //Setting the position of the sphere
      sphere2.setTranslateX(300);
      sphere2.setTranslateY(150);

      //Setting the cull face of the sphere to back
      sphere2.setCullFace(CullFace.BACK);

      //Drawing Sphere3
      Sphere sphere3 = new Sphere();

      //Setting the radius of the Sphere
      sphere3.setRadius(50.0);

      //Setting the position of the sphere
      sphere3.setTranslateX(500);
      sphere3.setTranslateY(150);

      //Setting the cull face of the sphere to none
      sphere2.setCullFace(CullFace.NONE);

      //Creating a Group object
      Group root = new Group(sphere1, sphere2, sphere3);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Drawing a Sphere");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令从命令提示符处编译并执行已保存的 Java 文件。

javac SphereCullFace.java
java SphereCullFace

在执行时,上述程序将生成一个 JavaFX 窗口,其中显示了三个球体,它们的面剔除值分别为 FRONT, BACKNONE ,如下所示:

cull faces

Drawing Modes

此属性的类型为 DrawMode ,它表示用于绘制当前 3D 形状的绘制模式。可以使用 setDrawMode() 方法选择用于绘制 3D 形状的绘制模式,如下所示:

box.setDrawMode(DrawMode.FILL);

在 JavaFX 中,可以选择两种绘制模式来绘制 3D 形状,即:-

  1. Fill - 此模式绘制并填充 2D 形状(DrawMode.FILL)。

  2. Line - 此模式使用线绘制 3D 形状(DrawMode.LINE)。

默认情况下,3D 形状的绘制模式为填充。

Example

以下程序是一个例子,它演示了 3D 盒子的各种绘制模式。将此代码保存在一个名为 BoxDrawMode.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.shape.Box;
import javafx.scene.shape.DrawMode;
import javafx.stage.Stage;

public class BoxDrawMode extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Box
      Box box1 = new Box();

      //Setting the properties of the Box
      box1.setWidth(100.0);
      box1.setHeight(100.0);
      box1.setDepth(100.0);

      //Setting the position of the box
      box1.setTranslateX(200);
      box1.setTranslateY(150);
      box1.setTranslateZ(0);

      //Setting the drawing mode of the box
      box1.setDrawMode(DrawMode.LINE);

      //Drawing a Box
      Box box2 = new Box();

      //Setting the properties of the Box
      box2.setWidth(100.0);
      box2.setHeight(100.0);
      box2.setDepth(100.0);

      //Setting the position of the box
      box2.setTranslateX(450); //450
      box2.setTranslateY(150);//150
      box2.setTranslateZ(300);

      //Setting the drawing mode of the box
      box2.setDrawMode(DrawMode.FILL);

      //Creating a Group object
      Group root = new Group(box1, box2);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting camera
      PerspectiveCamera camera = new PerspectiveCamera(false);
      camera.setTranslateX(0);
      camera.setTranslateY(0);
      camera.setTranslateZ(0);
      scene.setCamera(camera);

      //Setting title to the Stage
      stage.setTitle("Drawing a Box");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac BoxDrawMode.java
java BoxDrawMode

在执行时,上述程序将生成一个 JavaFX 窗口,其中显示了两个盒子,它们的绘制模式值分别为 LINE 和 FILL,如下所示:

drawing modes

Material

面剔除属性的类型为 Material ,它用于选择 3D 形状的材质表面。可以使用 setCullFace() 方法设置 3D 形状的材质,如下所示:

cylinder.setMaterial(material);

如上述此方法所述,您需要传递类型为材料的对象。包 javafx.scene.paintPhongMaterial 类是此类的子类,并提供 7 个表示 Phong 着色材质的属性。您可以使用这些属性的 setter 方法将所有这些类型的材质应用于 3D 形状的表面。

以下是 JavaFX 中提供的材质类型 −

  1. bumpMap − 这表示存储为 RGB 图像的法线贴图。

  2. diffuseMap − 这表示漫反射贴图。

  3. selfIlluminationMap − 这表示此 PhongMaterial 的自发光贴图。

  4. specularMap − 这表示此 PhongMaterial 的镜面贴图。

  5. diffuseColor − 这表示此 PhongMaterial 的漫反射颜色。

  6. specularColor − 这表示此 PhongMaterial 的镜面颜色。

  7. specularPower − 这表示此 PhongMaterial 的镜面强度。

默认情况下,3D 形状的材质是漫射颜色为浅灰色的 PhongMaterial。

Example

以下是一个示例,它显示圆柱上各种材质。将此代码保存在名为 CylinderMaterials.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Cylinder;
import javafx.stage.Stage;

public class CylinderMaterials extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing Cylinder1
      Cylinder cylinder1 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder1.setHeight(130.0f);
      cylinder1.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder1.setTranslateX(100);
      cylinder1.setTranslateY(75);

      //Preparing the phong material of type bump map
      PhongMaterial material1 = new PhongMaterial();
      material1.setBumpMap(new Image
         ("http://www.tutorialspoint.com/images/tplogo.gif"));

      //Setting the bump map material to Cylinder1
      cylinder1.setMaterial(material1);

      //Drawing Cylinder2
      Cylinder cylinder2 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder2.setHeight(130.0f);
      cylinder2.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder2.setTranslateX(200);
      cylinder2.setTranslateY(75);

      //Preparing the phong material of type diffuse map
      PhongMaterial material2 = new PhongMaterial();
      material2.setDiffuseMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif"));

      //Setting the diffuse map material to Cylinder2
      cylinder2.setMaterial(material2);

      //Drawing Cylinder3
      Cylinder cylinder3 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder3.setHeight(130.0f);
      cylinder3.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder3.setTranslateX(300);
      cylinder3.setTranslateY(75);

      //Preparing the phong material of type Self Illumination Map
      PhongMaterial material3 = new PhongMaterial();
      material3.setSelfIlluminationMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif"));

      //Setting the Self Illumination Map material to Cylinder3
      cylinder3.setMaterial(material3);

      //Drawing Cylinder4
      Cylinder cylinder4 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder4.setHeight(130.0f);
      cylinder4.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder4.setTranslateX(400);
      cylinder4.setTranslateY(75);

      //Preparing the phong material of type Specular Map
      PhongMaterial material4 = new PhongMaterial();
      material4.setSpecularMap(new Image
         ("http://www.tutorialspoint.com/images/tp-logo.gif"));

      //Setting the Specular Map material to Cylinder4
      cylinder4.setMaterial(material4);

      //Drawing Cylinder5
      Cylinder cylinder5 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder5.setHeight(130.0f);
      cylinder5.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder5.setTranslateX(100);
      cylinder5.setTranslateY(300);

      //Preparing the phong material of type diffuse color
      PhongMaterial material5 = new PhongMaterial();
      material5.setDiffuseColor(Color.BLANCHEDALMOND);

      //Setting the diffuse color material to Cylinder5
      cylinder5.setMaterial(material5);

      //Drawing Cylinder6
      Cylinder cylinder6 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder6.setHeight(130.0f);
      cylinder6.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder6.setTranslateX(200);
      cylinder6.setTranslateY(300);

      //Preparing the phong material of type specular color
      PhongMaterial material6 = new PhongMaterial();

      //setting the specular color map to the material
      material6.setSpecularColor(Color.BLANCHEDALMOND);

      //Setting the specular color material to Cylinder6
      cylinder6.setMaterial(material6);

      //Drawing Cylinder7
      Cylinder cylinder7 = new Cylinder();

      //Setting the properties of the Cylinder
      cylinder7.setHeight(130.0f);
      cylinder7.setRadius(30.0f);

      //Setting the position of the Cylinder
      cylinder7.setTranslateX(300);
      cylinder7.setTranslateY(300);

      //Preparing the phong material of type Specular Power
      PhongMaterial material7 = new PhongMaterial();
      material7.setSpecularPower(0.1);

      //Setting the Specular Power material to the Cylinder
      cylinder7.setMaterial(material7);

      //Creating a Group object
      Group root = new Group(cylinder1 ,cylinder2, cylinder3,
      cylinder4, cylinder5, cylinder6, cylinder7);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 400);

      //Setting camera
      PerspectiveCamera camera = new PerspectiveCamera(false);
      camera.setTranslateX(0);
      camera.setTranslateY(0);
      camera.setTranslateZ(-10);
      scene.setCamera(camera);

      //Setting title to the Stage
      stage.setTitle("Drawing a cylinder");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

Javac CylinderMaterials.java
java CylinderMaterials

在执行时,上述程序将生成一个 JavaFX 窗口,其中显示 7 个带有材质、凹凸贴图、漫反射贴图、自发光贴图、镜面贴图、漫反射颜色、镜面颜色、(杏仁白)镜面强度,分别如以下屏幕截图所示 −

cylinder material

JavaFX - Event Handling

在 JavaFX 中,我们可以开发 GUI 应用程序、Web 应用程序和图形应用程序。在这样的应用程序中,用户与应用程序(节点)交互时,就会说有一个事件已经发生。

例如,单击按钮、移动鼠标、通过键盘输入字符、从列表中选择项目、滚动页面都是导致事件发生的活动。

Types of Events

事件可以大致分为以下两类 −

  1. Foreground Events − 这些事件需要用户直接交互。它们是在人和图形用户界面的图形组件交互后生成的结果。例如,单击按钮、移动鼠标、通过键盘输入字符、从列表中选择项目、滚动页面等。

  2. Background Events − 这些事件不需要最终用户交互,称为后台事件。操作系统中断、硬件或软件故障、计时器过期、操作完成是后台事件的示例。

Events in JavaFX

JavaFX 提供支持以处理各种事件。名为 Event 的包中的类是事件的基本类。

任何其子类的实例都是一个事件。JavaFX 提供了各种各样的事件。其中一些如下所示。

  1. Mouse Event − 当单击鼠标时发生的输入事件。它由名为 MouseEvent 的类表示。它包括单击鼠标、按下鼠标、释放鼠标、移动鼠标、鼠标进入目标、鼠标退出目标等操作。

  2. Key Event − 这是一种输入事件,表示节点上发生按键操作。它由名为 KeyEvent 的类来表示。此事件包括按下按键、释放按键和键入按键等操作。

  3. Drag Event − 当拖动鼠标时发生的输入事件。它由名为 DragEvent 的类来表示。它包括拖动进入、拖动释放、拖动进入目标、拖动退出目标、拖动等操作。

  4. Window Event − 这是一种与窗口显示/隐藏操作相关的事件。它由名为 WindowEvent 的类来表示。它包括窗口隐藏、窗口显示、窗口已隐藏、窗口显示等操作。

Event Handling

事件处理是控制事件的机制,并决定如果事件发生,该发生什么。此机制具有称为事件处理程序的代码,当事件发生时执行该代码。

JavaFX 提供处理程序和过滤器来处理事件。在 JavaFX 中,每个事件都有 −

  1. Target − 事件发生的节点。目标可以是窗口、场景和节点。

  2. Source − 产生事件的源将是事件的源。在以上场景中,鼠标是事件的源。

  3. Type − 发生的事件的类型;在鼠标事件的情况下 – 鼠标按下、鼠标释放是事件的类型。

假设我们有一个应用程序,其中插入了一个圆形、停止和播放按钮,如下所示,使用了一个组对象 −

sample application

如果单击播放按钮,源将是鼠标,目标节点将是播放按钮,并且生成的事件的类型是鼠标点击。

Phases of Event Handling in JavaFX

每当产生事件时,JavaFX 会经历以下阶段。

Route Construction

每次生成一个事件时,事件的默认/初始路由由 Event Dispatch chain 的构建来确定。它从舞台到源节点的一条路径。

在上面的场景中,当我们点击播放按钮时,以下是为所生成的事件分发的事件分发链。

play button

Event Capturing Phase

在构建事件分发链之后,应用程序的根节点分发该事件。此事件会传递到分发链中的所有节点(从上到下)。如果其中任何一个节点具有为所生成事件注册的 filter ,它将被执行。如果分发链中的任何节点都没有针对所生成事件的过滤器,则它将被传递到目标节点,最后目标节点将处理该事件。

Event Bubbling Phase

在事件冒泡阶段,事件从目标节点到舞台节点(从下到上)传递。如果事件分发链中的任何一个节点具有为所生成事件注册的 handler ,它将被执行。如果所有这些节点都没有处理器来处理事件,则事件将到达根节点,最终进程将完成。

Event Handlers and Filters

事件过滤器和处理器包含用于处理事件的应用程序逻辑。一个节点可以注册到多个处理器/过滤器。对于父子节点,您可以为父节点提供一个公共过滤器/处理器,此过滤器/处理器作为所有子节点的默认值进行处理。

如上文所述,在事件处理期间,过滤器将被执行,在事件冒泡阶段,处理器将被执行。所有处理器和过滤器都实现包 javafx.event 的接口 EventHandler

Adding and Removing Event Filter

要向节点添加事件过滤器,你需要使用 Node 类的 addEventFilter() 方法注册此过滤器。

//Creating the mouse event handler
EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() {
   @Override
   public void handle(MouseEvent e) {
      System.out.println("Hello World");
      circle.setFill(Color.DARKSLATEBLUE);
   }
};
//Adding event Filter
Circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);

通过如下所示的方式,你可以用 removeEventFilter() 方法删除过滤器:

circle.removeEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);

Event Handling Example

以下是演示了如何在 JavaFX 中使用事件筛选器处理事件的一个示例。将此代码保存在名为 EventFiltersExample.java 的文件中。

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.EventHandler;

import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class EventFiltersExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the position of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(135.0f);

      //Setting the radius of the circle
      circle.setRadius(25.0f);

      //Setting the color of the circle
      circle.setFill(Color.BROWN);

      //Setting the stroke width of the circle
      circle.setStrokeWidth(20);

      //Setting the text
      Text text = new Text("Click on the circle to change its color");

      //Setting the font of the text
      text.setFont(Font.font(null, FontWeight.BOLD, 15));

      //Setting the color of the text
      text.setFill(Color.CRIMSON);

      //setting the position of the text
      text.setX(150);
      text.setY(50);

      //Creating the mouse event handler
      EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() {
         @Override
         public void handle(MouseEvent e) {
            System.out.println("Hello World");
            circle.setFill(Color.DARKSLATEBLUE);
         }
      };
      //Registering the event filter
      circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);

      //Creating a Group object
      Group root = new Group(circle, text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting the fill color to the scene
      scene.setFill(Color.LAVENDER);

      //Setting title to the Stage
      stage.setTitle("Event Filters Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac EventFiltersExample.java
java EventFiltersExample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

change color

Adding and Removing Event Handlers

若要向节点添加事件处理程序,你需要使用 Node 类的 addEventHandler() 方法注册此处理程序,如下所示:

//Creating the mouse event handler
EventHandler<javafx.scene.input.MouseEvent> eventHandler =
   new EventHandler<javafx.scene.input.MouseEvent>() {

   @Override
   public void handle(javafx.scene.input.MouseEvent e) {
      System.out.println("Hello World");
      circle.setFill(Color.DARKSLATEBLUE);
   }
};
//Adding the event handler
circle.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandler);

同样,你可以使用 removeEventHandler() 方法删除事件处理程序,如下所示:

circle.removeEventHandler(MouseEvent.MOUSE_CLICKED, eventHandler);

Example

以下程序演示了如何在 JavaFX 中使用事件处理程序进行事件处理的示例。

使用 EventHandlersExample.java 名称将此代码保存在文件中。

import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.event.EventHandler;

import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;

import javafx.scene.shape.Box;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;

public class EventHandlersExample extends Application {

   @Override
   public void start(Stage stage) {
      //Drawing a Box
      Box box = new Box();

      //Setting the properties of the Box
      box.setWidth(150.0);
      box.setHeight(150.0);
      box.setDepth(100.0);

      //Setting the position of the box
      box.setTranslateX(350);
      box.setTranslateY(150);
      box.setTranslateZ(50);

      //Setting the text
      Text text = new Text("Type any letter to rotate the box,
         and click on the box to stop the rotation");

      //Setting the font of the text
      text.setFont(Font.font(null, FontWeight.BOLD, 15));

      //Setting the color of the text
      text.setFill(Color.CRIMSON);

      //setting the position of the text
      text.setX(20);
      text.setY(50);

      //Setting the material of the box
      PhongMaterial material = new PhongMaterial();
      material.setDiffuseColor(Color.DARKSLATEBLUE);

      //Setting the diffuse color material to box
      box.setMaterial(material);

      //Setting the rotation animation to the box
      RotateTransition rotateTransition = new RotateTransition();

      //Setting the duration for the transition
      rotateTransition.setDuration(Duration.millis(1000));

      //Setting the node for the transition
      rotateTransition.setNode(box);

      //Setting the axis of the rotation
      rotateTransition.setAxis(Rotate.Y_AXIS);

      //Setting the angle of the rotation
      rotateTransition.setByAngle(360);

      //Setting the cycle count for the transition
      rotateTransition.setCycleCount(50);

      //Setting auto reverse value to false
      rotateTransition.setAutoReverse(false);

      //Creating a text filed
      TextField textField = new TextField();

      //Setting the position of the text field
      textField.setLayoutX(50);
      textField.setLayoutY(100);

      //Handling the key typed event
      EventHandler<KeyEvent> eventHandlerTextField = new EventHandler<KeyEvent>() {
         @Override
         public void handle(KeyEvent event) {
            //Playing the animation
            rotateTransition.play();
         }
      };
      //Adding an event handler to the text feld
      textField.addEventHandler(KeyEvent.KEY_TYPED, eventHandlerTextField);

      //Handling the mouse clicked event(on box)
      EventHandler<javafx.scene.input.MouseEvent> eventHandlerBox =
         new EventHandler<javafx.scene.input.MouseEvent>() {

         @Override
         public void handle(javafx.scene.input.MouseEvent e) {
            rotateTransition.stop();
         }
      };
      //Adding the event handler to the box
      box.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandlerBox);

      //Creating a Group object
      Group root = new Group(box, textField, text);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting camera
      PerspectiveCamera camera = new PerspectiveCamera(false);
      camera.setTranslateX(0);
      camera.setTranslateY(0);
      camera.setTranslateZ(0);
      scene.setCamera(camera);

      //Setting title to the Stage
      stage.setTitle("Event Handlers Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac EventHandlersExample.java
java EventHandlersExample

执行后,上述程序将生成一个 JavaFX 窗口,其中显示一个文本字段和一个 3D 框,如下所示:

text field

在此,如果你在文本字段中键入一个字母,3D 框将开始沿着 x 轴旋转。如果你再次单击该框则停止旋转。

Using Convenience Methods for Event Handling

JavaFX 中的某些类定义了事件处理程序属性。通过使用各自的 setter 方法将值设置为这些属性,您可以注册到事件处理程序。这些方法称为便捷方法。

这些方法大多数存在于 Node、Scene、Window 等类中,并且可用于其所有子类。

例如,要像下面所示,向一个按钮中添加一个鼠标的事件监听器,你可以使用便捷的方法 setOnMouseClicked()

playButton.setOnMouseClicked((new EventHandler<MouseEvent>() {
   public void handle(MouseEvent event) {
      System.out.println("Hello World");
      pathTransition.play();
   }
}));

Example

下面的程序是一个演示在 JavaFX 中使用便捷方法进行事件处理程序的例子。

将此代码保存在一个名为 ConvinienceMethodsExample.java 的文件中。

import javafx.animation.PathTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.EventHandler;

import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;

import javafx.scene.shape.Circle;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ConvinienceMethodsExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a Circle
      Circle circle = new Circle();

      //Setting the position of the circle
      circle.setCenterX(300.0f);
      circle.setCenterY(135.0f);

      //Setting the radius of the circle
      circle.setRadius(25.0f);

      //Setting the color of the circle
      circle.setFill(Color.BROWN);

      //Setting the stroke width of the circle
      circle.setStrokeWidth(20);

      //Creating a Path
      Path path = new Path();

      //Moving to the staring point
      MoveTo moveTo = new MoveTo(208, 71);

      //Creating 1st line
      LineTo line1 = new LineTo(421, 161);

      //Creating 2nd line
      LineTo line2 = new LineTo(226,232);

      //Creating 3rd line
      LineTo line3 = new LineTo(332,52);

      //Creating 4th line
      LineTo line4 = new LineTo(369, 250);

      //Creating 5th line
      LineTo line5 = new LineTo(208, 71);

      //Adding all the elements to the path
      path.getElements().add(moveTo);
      path.getElements().addAll(line1, line2, line3, line4, line5);

      //Creating the path transition
      PathTransition pathTransition = new PathTransition();

      //Setting the duration of the transition
      pathTransition.setDuration(Duration.millis(1000));

      //Setting the node for the transition
      pathTransition.setNode(circle);

      //Setting the path for the transition
      pathTransition.setPath(path);

      //Setting the orientation of the path
      pathTransition.setOrientation(
         PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT);

      //Setting the cycle count for the transition
      pathTransition.setCycleCount(50);

      //Setting auto reverse value to true
      pathTransition.setAutoReverse(false);

      //Creating play button
      Button playButton = new Button("Play");
      playButton.setLayoutX(300);
      playButton.setLayoutY(250);

      circle.setOnMouseClicked (new EventHandler<javafx.scene.input.MouseEvent>() {
         @Override
         public void handle(javafx.scene.input.MouseEvent e) {
            System.out.println("Hello World");
            circle.setFill(Color.DARKSLATEBLUE);
         }
      });
      playButton.setOnMouseClicked((new EventHandler<MouseEvent>() {
         public void handle(MouseEvent event) {
            System.out.println("Hello World");
            pathTransition.play();
         }
      }));

      //Creating stop button
      Button stopButton = new Button("stop");
      stopButton.setLayoutX(250);
      stopButton.setLayoutY(250);

      stopButton.setOnMouseClicked((new EventHandler<MouseEvent>() {
         public void handle(MouseEvent event) {
            System.out.println("Hello World");
            pathTransition.stop();
         }
      }));
      //Creating a Group object
      Group root = new Group(circle, playButton, stopButton);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);
      scene.setFill(Color.LAVENDER);

      //Setting title to the Stage
      stage.setTitle("Convenience Methods Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac ConvinienceMethodsExample.java
java ConvinienceMethodsExample

通过执行,上面的程序将产生一个 JavaFX 窗口,就像下面这样。在这里点击播放按钮以开始动画,并点击停止按钮以停止动画。

convinience method

JavaFX - UI Controls

每个用户界面都考虑以下三个主要方面:

  1. UI elements - 这些是用户最终看到并与之交互的核心视觉元素。JavaFX 提供了从基本到复杂的广泛使用的常见元素,我们将在本教程中介绍。

  2. Layouts - 它们定义了 UI 元素应该如何组织在屏幕上,并为 GUI(图形用户界面)提供最终的外观和感觉。这部分将在布局章节中介绍。

  3. Behavior - 当用户与 UI 元素交互时发生的事件。这部分将在事件处理章节中介绍。

JavaFX 在软件包 javafx.scene.control 中提供了多个类。为了创建各种 GUI 组件(控件),JavaFX 支持多种控件,例如日期选取器、按钮文本字段等。

每个控件由一个类表示;可以通过实例化其各自的类来创建控件。

以下是在使用 JavaFX 设计 GUI 时常用的控件列表。

S.No

Control & Description

1

Label 标签对象是用于放置文本的组件。

2

Button 此类创建一个带标签的按钮。

3

ColorPicker ColorPicker 提供了一个控件面板,旨在允许用户处理和选择颜色。

4

CheckBox 复选框是一个图形组件,它可以处于开启(真)或关闭(假)状态。

5

RadioButton RadioButton 类是一个图形组件,它在组中可以处于开启(真)或关闭(假)状态。

6

ListView ListView 组件向用户显示一个文本项目滚动列表。

7

TextField TextField 对象是一个文本组件,它允许编辑单行文本。

8

PasswordField PasswordField 对象是一个专门用于密码输入的文本组件。

9

Scrollbar Scrollbar 控件代表一个滚动条组件,让用户能够从一系列值中选择。

10

FileChooser FileChooser 控件表示一个对话框窗口,用户可以从中选择一个文件。

11

ProgressBar 随着任务接近完成,进度条显示任务已完成的百分比。

12

Slider 滑块允许用户通过在有界区间内滑动旋钮以图形方式选择一个值。

Example

以下程序是一个示例,它在 JavaFX 中显示一个登录页面。在此,我们正在使用控件 label, text field, password fieldbutton

将此代码保存在一个名为 LoginPage.java 的文件中。

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;

import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class LoginPage extends Application {
   @Override
   public void start(Stage stage) {
      //creating label email
      Text text1 = new Text("Email");

      //creating label password
      Text text2 = new Text("Password");

      //Creating Text Filed for email
      TextField textField1 = new TextField();

      //Creating Text Filed for password
      PasswordField textField2 = new PasswordField();

      //Creating Buttons
      Button button1 = new Button("Submit");
      Button button2 = new Button("Clear");

      //Creating a Grid Pane
      GridPane gridPane = new GridPane();

      //Setting size for the pane
      gridPane.setMinSize(400, 200);

      //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

      //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

      //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

      //Arranging all the nodes in the grid
      gridPane.add(text1, 0, 0);
      gridPane.add(textField1, 1, 0);
      gridPane.add(text2, 0, 1);
      gridPane.add(textField2, 1, 1);
      gridPane.add(button1, 0, 2);
      gridPane.add(button2, 1, 2);

      //Styling nodes
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

      text1.setStyle("-fx-font: normal bold 20px 'serif' ");
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");
      gridPane.setStyle("-fx-background-color: BEIGE;");

      //Creating a scene object
      Scene scene = new Scene(gridPane);

      //Setting title to the Stage
      stage.setTitle("CSS Example");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac LoginPage.java
java LoginPage

执行后,上述程序会生成如下所示的 JavaFX 窗口。

css example

以下程序是注册表单的示例,其演示了 JavaFX 中的控件,如 Date Picker, Radio Button, Toggle Button, Check Box, List View, Choice List, 等。

将此代码保存在一个名为 Registration.java 的文件中。

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

import javafx.geometry.Insets;
import javafx.geometry.Pos;

import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.DatePicker;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.control.ToggleButton;
import javafx.stage.Stage;

public class Registration extends Application {
   @Override
   public void start(Stage stage) {
      //Label for name
      Text nameLabel = new Text("Name");

      //Text field for name
      TextField nameText = new TextField();

      //Label for date of birth
      Text dobLabel = new Text("Date of birth");

      //date picker to choose date
      DatePicker datePicker = new DatePicker();

      //Label for gender
      Text genderLabel = new Text("gender");

      //Toggle group of radio buttons
      ToggleGroup groupGender = new ToggleGroup();
      RadioButton maleRadio = new RadioButton("male");
      maleRadio.setToggleGroup(groupGender);
      RadioButton femaleRadio = new RadioButton("female");
      femaleRadio.setToggleGroup(groupGender);

      //Label for reservation
      Text reservationLabel = new Text("Reservation");

      //Toggle button for reservation
      ToggleButton Reservation = new ToggleButton();
      ToggleButton yes = new ToggleButton("Yes");
      ToggleButton no = new ToggleButton("No");
      ToggleGroup groupReservation = new ToggleGroup();
      yes.setToggleGroup(groupReservation);
      no.setToggleGroup(groupReservation);

      //Label for technologies known
      Text technologiesLabel = new Text("Technologies Known");

      //check box for education
      CheckBox javaCheckBox = new CheckBox("Java");
      javaCheckBox.setIndeterminate(false);

      //check box for education
      CheckBox dotnetCheckBox = new CheckBox("DotNet");
      javaCheckBox.setIndeterminate(false);

      //Label for education
      Text educationLabel = new Text("Educational qualification");

      //list View for educational qualification
      ObservableList<String> names = FXCollections.observableArrayList(
         "Engineering", "MCA", "MBA", "Graduation", "MTECH", "Mphil", "Phd");
      ListView<String> educationListView = new ListView<String>(names);

      //Label for location
      Text locationLabel = new Text("location");

      //Choice box for location
      ChoiceBox locationchoiceBox = new ChoiceBox();
      locationchoiceBox.getItems().addAll
         ("Hyderabad", "Chennai", "Delhi", "Mumbai", "Vishakhapatnam");

      //Label for register
      Button buttonRegister = new Button("Register");

      //Creating a Grid Pane
      GridPane gridPane = new GridPane();

      //Setting size for the pane
      gridPane.setMinSize(500, 500);

      //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

      //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

      //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

      //Arranging all the nodes in the grid
      gridPane.add(nameLabel, 0, 0);
      gridPane.add(nameText, 1, 0);

      gridPane.add(dobLabel, 0, 1);
      gridPane.add(datePicker, 1, 1);

      gridPane.add(genderLabel, 0, 2);
      gridPane.add(maleRadio, 1, 2);
      gridPane.add(femaleRadio, 2, 2);
      gridPane.add(reservationLabel, 0, 3);
      gridPane.add(yes, 1, 3);
      gridPane.add(no, 2, 3);

      gridPane.add(technologiesLabel, 0, 4);
      gridPane.add(javaCheckBox, 1, 4);
      gridPane.add(dotnetCheckBox, 2, 4);

      gridPane.add(educationLabel, 0, 5);
      gridPane.add(educationListView, 1, 5);

      gridPane.add(locationLabel, 0, 6);
      gridPane.add(locationchoiceBox, 1, 6);

      gridPane.add(buttonRegister, 2, 8);

      //Styling nodes
      buttonRegister.setStyle(
         "-fx-background-color: darkslateblue; -fx-textfill: white;");

      nameLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      dobLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      genderLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      reservationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      technologiesLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      educationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
      locationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

      //Setting the back ground color
      gridPane.setStyle("-fx-background-color: BEIGE;");

      //Creating a scene object
      Scene scene = new Scene(gridPane);

      //Setting title to the Stage
      stage.setTitle("Registration Form");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac Registration.java
java Registration

执行后,上述程序会生成如下所示的 JavaFX 窗口。

registration form

JavaFX - Charts

一般而言,图表是数据的图形表示形式。有各种各样的图表来表示数据,例如 Bar Chart, Pie Chart, Line Chart, Scatter Chart, 等。

JavaFX 提供对各种 Pie ChartsXY Charts 的支持。在 XY 平面中表示的图表包括 AreaChart, BarChart, BubbleChart, LineChart, ScatterChart, StackedAreaChart, StackedBarChart, 等。

每个图表都由一个类表示,所有这些图表都属于 javafx.scene.chart 包。名为 Chart 的类是 JavaFX 中所有图表的基类,而 XYChart 是在 XY 平面上绘制的所有图表的基类。

charts

Creating a Chart

要创建图表,你需要:

  1. 定义图表的坐标轴

  2. Instantiate the respective class

  3. 准备并向图表传递数据

Instantiating the Respective Class

要创建图表,请实例化其各自的类。例如,如果你要创建一条形图,你需要按如下方式实例化名为 Line 的类 −

LineChart linechart = new LineChart(xAxis, yAxis);

如上文代码所示,在实例化时,你需要分别传递表示图表的 X 轴和 Y 轴的两个对象。

Defining the Axis

一般来说,图表轴可以表示为以下内容:

  1. 数字,如人口、年龄和

  2. 类别,如一周中的几天、国家。

在 JavaFX 中,一个轴是一个抽象类,表示 X 轴或 Y 轴。它有两个子类来定义每种类型的轴,即 CategoryAxisNumberAxis ,如下图所示:

defining axis

Category Axis − 通过实例化此类,你可以定义(创建)X 轴或 Y 轴,每个值表示一个类别。你可以按如下所示实例化此类来定义一个类别轴 −

CategoryAxis xAxis = new CategoryAxis();

对此轴,你需要设置类别的列表并将标签设置为如下所示:

//setting the list of categories.
xAxis.setCategories(FXCollections.<String>observableArrayList
   (Arrays.asList("n ame1", "name2"….)));

//Setting label to the axis
xAxis.setLabel("name of the axis ");

NumberAxis − 通过实例化此类,你可以定义(创建)X 轴或 Y 轴,每个值表示一个数字值。你可以使用此 Axis, Long, Double, BigDecimal 中的任何数字类型,等等。你可以按如下方式实例化此类来定义一个数字轴 −

//Defining the axis
NumberAxis yAxis = new NumberAxis();

//Setting labelto the axis
yAxis.setLabel("name of the axis");

Passing Data to XY Charts

所有 XY 图表都表示在 XY 平面中。要绘制图表中的一组点,我们需要指定一系列 XY 坐标。

javafx.scene.chart 包中的 <X,Y> 类是一个类,使用该类,你可以将数据发送到图表中。此类包含一个命名的序列的可观察列表。你可以按如下所示使用 XYChart.Series 类的 getData() 方法获取此列表:

ObservableList list = series.getData();

其中, seriesXYChart.Series 类的对象。你可以按如下方式使用 add() 方法将数据添加到此列表 −

list.add(new XYChart.Data(x-axis data, y-axis data));

这两行可以一起写入,如下所示:

series.getData().add(new XYChart.Data(x-axis data, y-axis data));

下表对 JavaFX 提供的不同图表(类)进行了说明:

S.No

Chart & Description

1

Pie Chart 饼图是将值表示为不同颜色的圆形切片。这些切片有标签,并且图中表示了对应于每个切片的值。在 JavaFX 中,饼图由名为 PieChart 的类表示。此类属于 javafx.scene.chart 包。

2

Line Chart 折线图或线形图将信息显示为一系列数据点(标记),这些点由直线线段连接。折线图显示了数据如何以相等的频率更改。在 JavaFX 中,折线图由名为 LineChart 的类表示。此类属于 javafx.scene.chart 包。通过实例化此类,你可以在 JavaFX 中创建 LineChart 节点。

3

Area Chart 面积图用于绘制基于面积的图表。它绘制给定系列点和轴之间的区域。通常,此图用于比较两个量。在 JavaFX 中,面积图由名为 AreaChart 的类表示。此类属于包 javafx.scene.chart 。通过实例化此类,您可以在 JavaFX 中创建一个 AreaChart 节点。

4

Bar Chart 条形图用于使用矩形条来表示分组数据。这些条的长度表示值。条形图中的条可以垂直或水平绘制。在 JavaFX 中,条形图由名为 BarChart 的类表示。此类属于包 javafx.scene.chart 。通过实例化此类,您可以在 JavaFX 中创建一个 BarChart 节点。

5

Bubble Chart 气泡图用于绘制三维数据。第三维度将由气泡的大小(半径)表示。在 JavaFX 中,气泡图由名为 BubbleChart 的类表示。此类属于包 javafx.scene.chart 。通过实例化此类,您可以在 JavaFX 中创建一个 BubbleChart 节点。

6

Scatter Chart 散点图是一种图表,它使用笛卡尔平面中绘制的两个变量的值。它通常用于找出两个变量之间的关系。在 JavaFX 中,散点图由名为 ScatterChart 的类表示。此类属于包 javafx.scene.chart 。通过实例化此类,您可以在 JavaFX 中创建一个 ScatterChart 节点。

7

Stacked Area Chart 在 JavaFX 中,堆叠面积图由名为 StackedAreaChart 的类表示。此类属于包 javafx.scene.chart 。通过实例化此类,您可以在 JavaFX 中创建一个 StackedAreaChart 节点。

8

Stacked Bar Chart 在 JavaFX 中,堆叠条形图由名为 StackedBarChart 的类表示。此类属于包 javafx.scene.chart 。通过实例化此类,您可以在 JavaFX 中创建一个 StackedBarChart 节点。

JavaFX - Layout Panes(Containers)

在场景中构造所有必需的节点后,我们通常会按顺序排列它们。

容器内组件的这种排列称为容器的布局。我们也可以说我们遵循了一个布局,因为它包括将所有组件放置在容器内的特定位置。

JavaFX 提供了几种预定义的布局,例如 HBox, VBox, Border Pane, Stack Pane, Text Flow, Anchor Pane, Title Pane, Grid Pane, Flow Panel 等。

上面提到的每个布局都由一个类表示,所有这些类都属于包 javafx.layout 。名为 Pane 的类是 JavaFX 中所有布局的基类。

Creating a Layout

要创建布局,您需要 −

  1. Create node.

  2. 实例化所需布局的相应类。

  3. 设置布局的属性。

  4. 将所有创建的节点添加到布局。

Creating Nodes

首先,通过实例化其各自的类来创建 JavaFX 应用程序的必需节点。

例如,如果您希望在 HBox 布局中有一个文本字段和两个按钮(即播放和停止),您将必须首先创建这些节点,如以下代码块所示 −

//Creating a text field
TextField textField = new TextField();

//Creating the play button
Button playButton = new Button("Play");

//Creating the stop button
Button stopButton = new Button("stop");

Instantiating the Respective Class

在创建节点(并对它们完成所有操作)后,实例化所需布局的类。

例如,如果您要创建 Hbox 布局,您需要按如下方式实例化此类。

HBox hbox = new HBox();

Setting the Properties of the Layout

在实例化该类后,您需要使用其各自的 setter 方法设置该布局的属性。

例如 − 如果你想在 HBox 布局中创建节点之间的间距,那么你需要给名为 spacing 的属性设置值。这可以通过使用 setter 方法 setSpacing() 来完成,如下所示 −

hbox.setSpacing(10);

Adding the Shape Object to the Group

最后,你需要将形状的对象添加到组中,方法是将其作为构造函数的参数进行传递,如下所示。

//Creating a Group object
Group root = new Group(line);

Layout Panes

以下是 JavaFX 提供的各种布局窗格(类)。这些类存在于 javafx.scene.layout 包中。

S.No

Shape & Description

1

HBox HBox 布局以单行水平排列应用程序中的所有节点。包 javafx.scene.layout 中名为 HBox 的类表示文本水平框布局。

2

VBox VBox 布局以单行垂直列排列应用程序中的所有节点。包 javafx.scene.layout 中名为 VBox 的类表示文本垂直框布局。

3

BorderPane Border Pane 布局将我们应用程序中的节点安排在上方、下方、左侧、右侧和中央位置。包 javafx.scene.layoutBorderPane 命名类表示边框窗格布局。

4

StackPane Stack Pane 布局将我们应用程序中的节点一个叠一个地排列,就像在一个栈中一样。第一个添加的节点放置在栈的底部,下一个节点放置在它的上方。包 javafx.scene.layoutStackPane 命名类表示 Stack Pane 布局。

5

TextFlow Text Flow 布局将多个文本节点排列在单个流中。包 javafx.scene.layoutTextFlow 命名类表示文本流布局。

6

AnchorPane Anchor Pane 布局将我们应用程序中的节点锚定在窗格中的特定距离处。包 javafx.scene.layoutAnchorPane 命名类表示 Anchor Pane 布局。

7

TilePane Tile Pane 布局将我们应用程序中的所有节点添加到统一大小的图块中。包 javafx.scene.layoutTilePane 命名类表示 TilePane 布局。

8

GridPane Grid Pane 布局将我们应用程序中的节点排列成行和列的网格。在使用 JavaFX 创建表单时,此布局很方便。包 javafx.scene.layoutGridPane 命名类表示 GridPane 布局。

9

FlowPane Flow Pane 布局将所有节点包装成流。水平流窗格以其高度包装窗格元素,而垂直流窗格则以其宽度包装元素。包 javafx.scene.layoutFlowPane 命名类表示 Flow Pane 布局。

JavaFX - CSS

Cascading Style Sheets ,也称为 CSS,是一种简单的设计语言,目的是简化网页呈现的过程。

CSS 处理网页的外观和感觉部分。使用 CSS,您可以控制文本颜色、字体样式、段落间距、列大小和布局。此外,您还可以控制所使用的背景图像或颜色、布局设计、针对不同设备的显示差异和屏幕大小以及各种其他效果。

CSS in JavaFX

JavaFX 为您提供了使用 CSS 来提升应用程序外观和感觉的功能。包 javafx.css 包含用于为 JavaFX 应用程序应用 CSS 的类。

CSS 包含浏览器解释的样式规则,然后将其应用到您文档中相应的元素。

样式规则由三部分组成,即-

  1. Selector − 选择器是一个 HTML 标记,将在其中应用样式。这可以是任何标记,如 &lt;h1&gt;&lt;table&gt; 等。

  2. Property − 属性是 HTML 标记的属性类型。用更简单的术语来说,所有 HTML 属性都已转换为 CSS 属性。它们可以是颜色、 border 等。

  3. Value − 值被分配给属性。例如,颜色属性的值可以是 red#F1F1F1 等。

您可以按如下方式设置 CSS 样式规则语法 −

selector { property: value }
css style

JavaFX 使用的默认样式表是 modena.css 。它位于 JavaFX 运行时 jar 中。

Adding Your own Style Sheet

您可以按照以下方式将自己的样式表添加到 JavaFX 中的场景:

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

Adding Inline Style Sheets

您还可以使用 setStyle() 方法添加内联样式。这些样式仅由键值对组成,并且适用于对其进行设置的节点。以下是在按钮中设置内联样式表的示例代码。

.button {
   -fx-background-color: red;
   -fx-text-fill: white;
}

Example

假设我们开发了一个显示带有文本字段、密码字段、两个按钮的表单的 JavaFX 应用程序。默认情况下,此表单的外观如下图所示 −

grid pane

以下程序是演示如何在 JavaFX 中向上述应用程序添加样式的示例。

将此代码保存在名为 CssExample.java 的文件中

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class CssExample extends Application {
   @Override
   public void start(Stage stage) {
      //creating label email
      Text text1 = new Text("Email");

      //creating label password
      Text text2 = new Text("Password");

      //Creating Text Filed for email
      TextField textField1 = new TextField();

      //Creating Text Filed for password
      PasswordField textField2 = new PasswordField();

      //Creating Buttons
      Button button1 = new Button("Submit");
      Button button2 = new Button("Clear");

      //Creating a Grid Pane
      GridPane gridPane = new GridPane();

      //Setting size for the pane
      gridPane.setMinSize(400, 200);

      //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

      //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

      //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

      //Arranging all the nodes in the grid
      gridPane.add(text1, 0, 0);
      gridPane.add(textField1, 1, 0);
      gridPane.add(text2, 0, 1);
      gridPane.add(textField2, 1, 1);
      gridPane.add(button1, 0, 2);
      gridPane.add(button2, 1, 2);

      //Styling nodes
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

      text1.setStyle("-fx-font: normal bold 20px 'serif' ");
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");
      gridPane.setStyle("-fx-background-color: BEIGE;");

      // Creating a scene object
      Scene scene = new Scene(gridPane);

      // Setting title to the Stage
      stage.setTitle("CSS Example");

      // Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令,从命令提示符编译并执行已保存的 java 文件。

javac CssExample.java
java CssExample

执行后,上述程序会生成如下所示的 JavaFX 窗口。

css example