第 4 课：创建图形对象

 第 4 课：创建图形对象

JavaFX GUI 简介对 JavaFX 中提供的丰富的内置图形、组件和效果集合进行了介绍。但是，如何使用这些元素为您的应用程序定制或创建更丰富的画面？本课向您介绍了如何组合几个简单的元素来创建一个具有明暗效果的按钮，该按钮会投下映像，就像放在一个可以产生反射的表面上一样。一旦您理解了结合使用不同元素的概念，就可以让您的奇思妙想成为现实。

 

目录

 

-	创建应用程序窗口
-	设置场景
-	指定组
-	创建矩形
-	填充矩形
-	添加“录制”指示器
-	应用反射图形效果
-	运行示例

 

您已经了解了足够多的 JavaFX 语言知识，可以开始创建更为复杂的图形对象并应用效果了。此部分介绍了使用 JavaFX Script 创建图形的典型过程。在本课中，您将为音频播放器创建一个设计方案，其中包括如下图所示的“录制”按钮。

 

图 1：具有映像的“录制”按钮

 

 

要创建此按钮，可以从各种 JavaFX 对象和功能（如 JavaFX GUI 简介一课中所述）中进行选择。这些对象和功能包括：矩形、圆、渐变效果和反射效果。然后，您可以组合这些功能以生成所需的按钮图形。

---

注意：本课使用 JavaFX 语言中有限数量的图形功能。您可以结合使用其他效果和功能来创建 UI 元素，如滑块、进度条、按钮和搜索字段。

---

创建一个扩展名为 .fx 的文件，例如 FXRecordButton.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见 JavaFX Script API 和学习 JavaFX Script 编程语言。

您可以在任意时间使用以下命令编译您的代码：

javafxc FXRecordButton.fx

 

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

javafx FXRecordButton

 

创建应用程序窗口

为了显示图形，需要创建一个窗口。

创建窗口：

1. 为 javafx.stage.Stage 类添加 import 语句。
2. 声明 Stage 对象字面值。
3. 定义 Stage 对象的 title、width、height 和 visible 属性。有关详细信息，请参见使用声明性语法一课。

代码如下：

import javafx.stage.Stage; //required to render a window Stage { title: "JavaFX Record Button" width: 249 height: 251 visible: true }

 

下面是此窗口的屏幕抓图。

 

图 2：空窗口

 

 

设置场景

在 Stage 中，设置用来容纳 Node 对象（如圆或矩形）的场景并使用线性渐变对其进行填充。

定义场景并使用渐变对其进行填充：

1. 为 javafx.scene.Scene、javafx.scene.paint.LinearGradient、javafx.scene.paint.Stop、javafx.scene.paint.Color 类添加 import 语句。
2. 声明 Scene 对象字面值。
3. 定义 Scene 对象的 fill 变量。
4. 在 Scene 内指定 content 变量。content 变量用来容纳 Scene 的对象。

以下代码用来设置场景，并使用均匀的黑白线性渐变对其进行填充：

import javafx.scene.Scene; //required to display objects of Node type such as a circle and rectangle import javafx.scene.paint.LinearGradient; //required to fill objects with a linear gradient import javafx.scene.paint.Stop; //required to specify colors and offset of the linear gradient import javafx.scene.paint.Color; //required to fill and stroke objects with color Stage { ... scene: Scene { fill: LinearGradient { startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0, proportional: true stops: [ Stop {offset: 0.0 color: Color.WHITE}, Stop {offset: 1.0 color: Color.BLACK} ] } content: [ //objects that appear on the scene ] } }

 

• 要使用渐变填充场景，请使用 fill 实例变量，然后将 LinearGradient 对象字面指定为其值。LinearGradient 具有可用来定义渐变的方向、大小、颜色和样式的实例变量。
• startX、startY、endX 和 endY 实例变量用来控制渐变的水平方向和垂直方向以及大小。每一个对（startX 和 startY 与 endX 和 endY）用来定义渐变的起点坐标和终点坐标。如果某个对的结束值小于同一个对的起始值，则会使渐变反向。
  
  

  ---

  注意：这些变量的值依赖于下一段中所述的 proportional 变量。

  ---

• proportional 变量用来定义 startX、startY、endX 和 endY 的值是否进行缩放。如果 proportional 变量设置为 true，则应该相对于窗口区域指定渐变的起点和终点 (0.0 - 1.0)，然后在窗口中拉伸。如果 proportional 变量设置为 false，则应该将起点和终点指定为绝对像素值，渐变将不会拉伸。
  
  例如，如果 startY 设置为 30，endY 设置为 100，startX 和 endX 都设置为 0，并且 proportional 设置为 false，则渐变的 Y 起点将是位于窗口标题栏下方 30 个像素位置的点，渐变的 Y 终点将是位于标题栏下方 100 个像素位置的点。如果 startY 设置为 0.5，endY 设置为 1.0，proportional 设置为 true，startX 和 endX 都设置为 0，则渐变的 Y 起点将是具有场景 50% 高度的 Y 值的点，Y 终点将是具有场景 100% 高度的值的点。
• stops 是一个 Stop 变量序列，用来定义沿渐变分布颜色的方式。Stop 的 offset 变量用来定义一个点，在该点上，渐变应该是一种特定的颜色。offset 是相对于场景区域指定的，其值的范围应该是 0.0 到 1.0。Color 变量用来定义渐变的颜色。对于 Color 值，您可以指定一个显式颜色（例如 Color.WHITE）或此颜色的 Web 代码（例如 Color.web("FFFFFF")）。有关线性渐变的更多信息，请参见 JavaFX Script API。

有关节点和 Scene 类的更多信息，请参见在图形场景中显示 UI 对象一课和 JavaFX Script API。

以下屏幕抓图显示使用渐变填充的窗口。

 

图 3：使用线性渐变填充的窗口

 

 

指定组

现在，您可以继续在场景中指定对象。此按钮由一个矩形和一个圆组成。这两个元素应该组合在一起，这样其映像就会正确落在背景上。

组合元素：

1. 为 javafx.scene.Group 类添加 import 语句。
2. 声明 Group 对象字面值。
3. 在 Group 内指定 content 变量。content 变量用于容纳 Group 的对象。

代码如下所示：

import javafx.scene.Group; //required to group objects to be able to operate with them as a unit Stage { ... scene: Scene { ... content: [ Group { content: [] } ] } }

 

有关 Group 类的更多信息，请参见 JavaFX Script API。

创建矩形

要创建按钮轮廓线，请将一个矩形声明为 Group 内容的一部分。

要创建矩形，需要：

1. 添加 javafx.scene.shape.Rectangle 导入。
2. 声明 Rectangle 对象字面值及其变量。有关 Rectangle 类的更多信息，请参见使用声明性语法一课和 JavaFX Script API。

下面是用来完成这两个步骤的代码：

import javafx.scene.shape.Rectangle; //required to render a rectangle content: [ Group { content: [ Rectangle { x: 40 y: 55 width: 150 height: 50 arcWidth: 20 arcHeight: 55 stroke: Color.BLACK fill: null } ] } ]

 

这些代码可生成以下屏幕抓图。

 

图 4：按钮轮廓线

 

 

填充矩形

使用 fill 变量对矩形由黑到白进行明暗填充。两种颜色之间的这种均匀明暗变化称作线性渐变。背景使用相同类型的明暗变化。

下面是用来产生该效果的代码：

Rectangle { ... fill: LinearGradient { startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0, proportional: true stops: [ Stop {offset: 0.0 color: Color.WHITE}, Stop {offset: 1.0 color: Color.BLACK} ] } }

 

结果，此代码在左上角 40,55 位置创建了一个矩形。此矩形位于窗口的中央，其大小是 150 x 50 像素，角圆度为 20 和 55，并且使用黑白均匀线性渐变进行了填充。有关线性渐变的更多信息，请参见 JavaFX Script API。

此步骤的应用程序屏幕抓图如下图所示。

 

图 5：使用渐变填充的按钮

 

 

添加“录制”指示器

现在，您可以将红色“录制”指示器添加到该按钮上。 

将红色指示器添加到该按钮上：

1. 添加 javafx.scene.shape.Circle 导入
2. 使用 Circle 类声明圆及其变量。有关 Circle 类的更多信息，请参见使用声明性语法一课和 JavaFX Script API。

---

注意：圆也是 Group 内容定义的一部分。

---

下面是用来添加红色指示器的代码：

import javafx.scene.shape.Circle; //required to render a circle content: [ Group { content: [ Rectangle { ... }, Circle { centerX: 115 centerY: 80 radius: 15 fill: Color.web("#ff3300") stroke: Color.DARKRED } ] } ]

 

结果，此代码创建了一个圆心为 (115,80)、半径为 15 的圆。该圆位于矩形的中央。该圆使用红色填充，其轮廓线为暗红色。以下屏幕抓图显示了一个上面有红色圆的矩形。

 

图 5：具有“录制”指示器的按钮

 

 

应用反射图形效果

最后一步是将“录制”按钮的映像添加到背景上。

应用反射效果：

1. 添加 javafx.scene.effect.Reflection import 语句。
2. 使用 effect 和 Reflection 变量指定效果。

这似乎是一个很难编程的步骤，但其实仅需以下几行代码就可以实现：

import javafx.scene.effect.Reflection; //required to apply a reflection effect content: [ Group { content: [ Rectangle{ ... }, Circle { ... } ] effect: Reflection {fraction: 0.9 topOpacity: 0.5 topOffset: 2.5} } ]

 

reflection 对象字面值具有一个 fraction 实例变量，该变量用来定义在映像中可见的按钮区域的百分比。topOpacity 变量用来定义映像的不透明性度，topOffset 用来定义按钮底部与映像顶部之间的距离。

---

注意： fraction 和 topOpacity 变量的取值范围是 0.0 到 1.0。

---

有关反射效果的更多信息，请参见 JavaFX Script API。有关 JavaFX API 中图形效果的完整列表，请参见 JavaFX GUI 简介一课。

运行示例

现在，您可以运行整个示例了。以下代码是完整的 FXRecordButton.fx 文件：

import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.paint.LinearGradient; import javafx.scene.paint.Stop; import javafx.scene.paint.Color; import javafx.scene.Group; import javafx.scene.shape.Rectangle; import javafx.scene.shape.Circle; import javafx.scene.effect.Reflection; Stage { title: "JavaFX Record Button" width: 249 height: 251 visible: true scene: Scene { fill: LinearGradient { startX: 0, startY: 0, endX: 0, endY: 1.0, proportional: true stops: [ Stop {offset: 0.0 color: Color.WHITE}, Stop {offset: 1.0 color: Color.BLACK} ] } content: [ Group{ content: [ Rectangle { x: 40 y: 55 width: 150 height: 50 arcWidth: 20 arcHeight: 55 stroke: Color.BLACK fill: LinearGradient { startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0, proportional: true stops: [ Stop {offset: 0.0 color: Color.WHITE}, Stop {offset: 1.0 color: Color.BLACK} ] } }, Circle { centerX: 115 centerY: 80 radius: 15 fill: Color.web("#ff3300") stroke: Color.DARKRED } ] effect: Reflection {fraction: 0.9 topOpacity: 0.5 topOffset: 2.5} } ] } }

 

运行此应用程序的结果如下图所示。

 

图 6：具有映像的“录制”按钮

 

 

总结

本课向您展示了使用内置的 JavaFX SDK 效果和对象的组合来创建丰富的可视图形是多么容易。