第 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

創建應用程序窗口

爲了顯示圖形，需要創建一個窗口。

創建窗口：

爲 javafx.stage.Stage 類添加 import 語句。
聲明 Stage 對象字面值。
定義 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 對象（如圓或矩形）的場景並使用線性漸變對其進行填充。

定義場景並使用漸變對其進行填充：

爲 javafx.scene.Scene、javafx.scene.paint.LinearGradient、javafx.scene.paint.Stop、javafx.scene.paint.Color 類添加 import 語句。
聲明 Scene 對象字面值。
定義 Scene 對象的 fill 變量。
在 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：使用線性漸變填充的窗口

指定組

現在，您可以繼續在場景中指定對象。此按鈕由一個矩形和一個圓組成。這兩個元素應該組合在一起，這樣其映像就會正確落在背景上。

組合元素：

爲 javafx.scene.Group 類添加 import 語句。
聲明 Group 對象字面值。
在 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 內容的一部分。

要創建矩形，需要：

添加 javafx.scene.shape.Rectangle 導入。
聲明 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：使用漸變填充的按鈕

添加“錄製”指示器

現在，您可以將紅色“錄製”指示器添加到該按鈕上。

將紅色指示器添加到該按鈕上：

添加 javafx.scene.shape.Circle 導入
使用 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：具有“錄製”指示器的按鈕

應用反射圖形效果

最後一步是將“錄製”按鈕的映像添加到背景上。

應用反射效果：

添加 javafx.scene.effect.Reflection import 語句。
使用 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 效果和對象的組合來創建豐富的可視圖形是多麼容易。

第 4 課：創建圖形對象

24-5-18 X

第 8 課：使 GUI 元素具有交互性

第 7 課：創建動畫對象

在 JavaFX 平臺上開發富 Internet 應用程序

第 5 課：對 UI 對象應用數據綁定

第 4 課：創建圖形對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結