第 3 课：在图形场景中显示 UI 对象

 第 3 课：在图形场景中显示 UI 对象

本课介绍作为 JavaFX Script 编程语言基础的节点体系结构和场景图形，并包含有关 Scene、Node 和 Group 类的信息。在本课中，您将构建一个图形场景、创建一组节点并对该组应用变换。有关声明性语法的概念的更多信息，请参见使用声明性语法。

 

目录

 

-	创建应用程序窗口
-	创建场景
-	添加第一个节点
-	添加文本节点
-	应用变换
-	添加图像节点
-	组合节点
-	对组应用变换

 

JavaFX Script 编程语言是基于场景图形的。场景图形是一个树状数据结构，可用于在场景中定义图形对象的分层结构。场景图形中的单个元素称作节点。每个节点都有一个父节点，但根节点除外，根节点没有父节点。每个节点是叶节点或分支。叶节点没有子节点。分支节点具有零个或多个子节点。

JavaFX 节点可处理不同类型的内容，如 UI 组件、形状、文本、图像和媒体。可以变换节点，也可以对其设置动画。您还可以对节点应用各种效果。

在本课中，您将创建一个具有三个节点（圆、文本和图像）的应用程序，如下所示。

 

图 1：节点示例

 

 

JavaFX 可以绘制场景中的所有内容。您可以将场景看作用来绘制图形内容的绘图表面。场景是一个用来容纳场景图形节点的容器。

在任何 JavaFX GUI 应用程序中，都需要创建一个场景并向其中添加节点。您可以通过应用效果、变换和动画来修改图形场景。JavaFX 运行时负责处理图形场景中的任何更改并在必要时进行重新绘制。

javafx.scene.Node 类是场景图形节点的基类。所有其他节点类（例如 javafx.scene.shape.Circle）可从 Node 类继承。有关实例变量和函数的完整列表，请参见 Node 类的 API 文档。

Node 类可定义一个局部坐标系，在该坐标系中，X 坐标值从左向右递增，Y 坐标值从上向下递增。

可以通过应用变换（如平移、旋转、缩放和剪切）来更改节点。例如，平移可将节点的坐标系原点沿 X 或 Y 轴或这两个轴移动。要定义平移，请设置 translateX 或 translateY 变量或这两个变量的值。

JavaFX 提供对效果（通过 javafx.scene.effect 和 javafx.scene.effect.light 软件包提供）的强大支持。在 JavaFX GUI 简介中，您可以看到一些应用的效果和变换。

节点可以接收鼠标和键盘事件。您可以定义在出现此类事件时可以收到通知的函数。有关详细信息，请参见使 GUI 元素具有交互性。

可以将节点组合到一起，将其看作单个实体。如果需要为几个节点提供通用行为，请将它们组合在一起，然后为整个组定义所需的行为。javafx.scene.Group 类表示一组节点。

现在，创建如图 1 所示的简单应用程序。此应用程序的图形场景包含三个节点，这三个节点分别显示在下面的单独窗口中。它们是形状对象（圆）、文本和图像。

 

图 2：位于单独窗口中的三个节点：圆、文本和图像

 

 

首先，将这些节点作为单独的节点添加到场景中。然后，将其组合在一起并对整个组应用变换。

创建一个扩展名为 .fx 的文件，例如 nodes.fx。在任何时间，您都可以使用以下命令编译您的代码：

javafxc nodes.fx

 

您可以使用以下命令运行编译的代码：

javafx nodes

 

创建应用程序窗口

创建一个标题为 "Nodes" 的应用程序窗口，其宽度为 220 像素，高度为 170 像素。有关详细信息，请参见使用声明性语法。以下代码可创建此窗口。

import javafx.stage.Stage; Stage { title: "Nodes" width: 220 height: 170 visible: true }

 

此代码会生成如下所示的输出。

 

图 3："Nodes" 窗口

 

 

创建场景

使用 Scene 对象字面值声明一个场景。让此场景具有淡蓝色背景。

1. 为 javafx.scene.Scene 和 javafx.scene.paint.Color 类添加 import 语句。
2. 声明 Scene 对象字面值。
3. 定义 fill 变量，以便为此场景设置背景。

import javafx.scene.Scene; import javafx.scene.paint.Color; Stage { title: "Nodes" width: 220 height: 170 visible: true scene: Scene { fill: Color.LIGHTBLUE } }

 

此代码会产生以下输出。

 

图 4：具有淡蓝色背景的场景

 

 

添加第一个节点

通过将某个节点声明为 scene 的 content 的元素，您可以将此节点添加到该场景中。scene 的 content 变量是一个节点序列，用来定义应用程序的图形内容。

第一个节点是圆。有关 Circle 类的详细信息，请参见使用声明性语法。将圆的边界绘制成黄色。

1. 导入 javafx.scene.shape.Circle 类。
2. 定义 scene 的 content 变量。
3. 将 Circle 对象字面值添加到 content 变量中。

import javafx.scene.shape.Circle; Stage { title: "Nodes" width: 220 height: 170 visible: true scene: Scene { fill: Color.LIGHTBLUE content: Circle { centerX: 50 centerY: 50 radius: 50 stroke: Color.YELLOW fill: Color.WHITE } } }

 

修改后代码会生成以下输出。

 

图 5：具有圆节点的场景

 

 

添加文本节点

1. 为 javafx.text.Text 类添加 import 语句。
2. 将 Text 对象字面值添加到 content 变量中。

默认情况下，文本节点将位于点 (0,0) 处，这意味着第一个字符的左下角点将位于点 (0,0) 处。这就是此时编译和运行此代码后此文本在应用程序窗口中不可见的原因。在下一步中，将更改默认位置，使该文本可见。

import javafx.scene.text.Text; scene: Scene { fill: Color.LIGHTBLUE content: [ Circle { ... }, Text { content: "Duke" } ] }

 

使用方括号来指定节点序列，使用逗号分隔其中的元素。

应用变换

您可以通过应用旋转变换来更改默认位置。旋转是通过锚点和角度来指定的。节点将按指定的角度围绕锚点顺时针旋转。

要计算必要的值，请参见图 6。如果您将点 (10, 100) 作为锚点，并绘制一个圆，其半径等于锚点到此文本节点的左下角点的距离，则此圆有一部分会落在圆节点内部。将文本节点沿该圆顺时针移动 33 度，得到的结果如图 6 所示。

1. 为 javafx.scene.transform.Transform 类添加 import 语句。
2. 定义文本节点的 transforms 变量来围绕点 (10,100) 将此节点旋转 33 度。

import javafx.scene.transform.Transform; scene: Scene { fill: Color.LIGHTBLUE content: [ Circle { ... }, Text { transforms: Transform.rotate(33, 10, 100) content: "Duke" } ] }

 

修改后的代码会生成以下输出。

 

图 6：具有圆和文本节点的场景

 

 

添加图像节点

有关使用图像的更多详细信息，请参见创建动画对象。

以下代码引用 Java 教程中使用的 Duke 图像的 URL。默认情况下，图像节点的左上角点位于点 (0,0) 处。此图像的尺寸正好适合圆节点上的区域。

需要连接到 Internet 才能显示此示例中的图像。

1. 为 javafx.scene.image 软件包中的 Image 和 ImageView 类添加 import 语句。
2. 将 ImageView 对象字面值添加到 content 变量中。

import javafx.scene.image.Image; import javafx.scene.image.ImageView; scene: Scene { fill: Color.LIGHTBLUE content: [ Circle { ... }, Text { ... }, ImageView { image: Image {url: "http://java.sun.com/docs/books/tutorial/uiswing/examples/components/TextSamplerDemoProject/src/components/images/dukeWaveRed.gif"} } ] }

 

您创建了一个其图形场景包含三个节点的应用程序。输出如以下图像中所示。

 

图 7：具有三个节点的场景

 

 

组合节点

现在，将节点添加到组，然后将该组添加到 scene 的 content 变量中。

1. 为 javafx.scene.Group 类添加 import 语句。
2. 修改 scene 的 content 变量声明，以便它包含 Group 对象字面值。
3. 将所有节点移到 Group 的 content 变量中。代码应如下所示。

import javafx.scene.Group; scene: Scene { fill: Color.LIGHTBLUE content: Group { content: [ Circle { ... }, Text { ... }, ImageView { ... } ] } }

 

请注意，向组中添加对象的顺序很重要。此顺序定义了这些对象的排放方式。如果您最后添加圆节点（在文本和图像节点之后），则圆将在其他两个对象上面绘制。由于圆具有填充颜色，所以这些节点将不可见。

对组应用变换

最后，为节点组定义平移，以便将此组移到窗口中央，如以下代码中所示。

scene: Scene { fill: Color.LIGHTBLUE content: Group { translateX: 55 translateY: 10 content: [ Circle { ... }, Text { ... }, ImageView { ... } ] } }

 

此修改将同时移动这三个节点，如以下图像中所示。

 

图 8：节点组已移到窗口中央

 

 

此处是此示例应用程序的完整代码，供您参考。

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.Group; import javafx.scene.shape.Circle; import javafx.scene.paint.Color; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.text.Text; import javafx.scene.transform.Transform; Stage { title: "Nodes" width: 220 height: 170 visible: true scene: Scene { fill: Color.LIGHTBLUE content: Group { translateX: 55 translateY: 10 content: [ Circle { centerX: 50 centerY: 50 radius: 50 stroke: Color.YELLOW fill: Color.WHITE }, Text { transforms: Transform.rotate(33, 10, 100) content: "Duke" }, ImageView { image: Image {url: "/docs/books/tutorial/uiswing/examples/components/TextSamplerDemoProject/src/components/images/dukeWaveRed.gif"} } ] } } }

 

总结

在本课中，您学习了如何构建应用程序的图形场景、向场景添加节点、组合节点并对组应用变换。现在，您可以继续创建更加复杂的图形应用程序了。