JavaFX CSS
JavaFX - CSS

JavaFX - 繪製三次貝塞爾曲線

三次貝塞爾曲線由兩個變數的三次多項式函式描述，可以寫成如下形式：

這些貝塞爾曲線通常用於計算機圖形學。它們是引數曲線，在所有比例下都顯得相當平滑。這些曲線是基於 XY 平面上的點繪製的。

三次貝塞爾曲線是 XY 平面上的三次貝塞爾引數曲線。它使用四個點繪製：**起點、終點、控制點和控制點 2**，如下圖所示。

JavaFX 中的三次貝塞爾曲線

在 JavaFX 中，三次貝塞爾曲線由名為 **CubicCurve** 的類表示。此類屬於 **javafx.scene.shape** 包。

透過例項化此類，可以在 JavaFX 中建立 CubicCurve 節點。

此類具有 8 個雙精度資料型別屬性：

**startX** - 曲線起點的 x 座標。
**startY** - 曲線起點的 y 座標。
**controlX1** - 曲線第一個控制點的 x 座標。
**controlY1** - 曲線第一個控制點的 y 座標。
**controlX2** - 曲線第二個控制點的 x 座標。
**controlY2** - 曲線第二個控制點的 y 座標。
**endX** - 曲線終點的 x 座標。
**endY** - 曲線終點的 y 座標。

要繪製三次貝塞爾曲線，需要向這些屬性傳遞值，可以透過在例項化時按相同順序將它們傳遞給此類的建構函式，或者使用它們各自的 setter 方法。

繪製三次貝塞爾曲線的步驟

要在 JavaFX 中繪製貝塞爾三次曲線，請按照以下步驟操作。

步驟 1：建立三次貝塞爾曲線

可以透過例項化名為 **CubicCurve** 的類（屬於 **javafx.scene.shape** 包）在 JavaFX 中建立三次貝塞爾曲線。可以在 Application 類的 start() 方法中例項化此類，如下所示。

public class ClassName extends Application {  
   @Override     
   public void start(Stage primaryStage) throws Exception {
      //Creating an object of the class CubicCurve         
      CubicCurve cubiccurve = new CubicCurve();   
   }    
}

步驟 2：設定三次貝塞爾曲線的屬性

使用各自的 setter 方法指定四個點的 x、y 座標：**起點、終點、控制點 1** 和 **控制點 2**，如下面的程式碼塊所示。

//Setting properties to cubic curve 
cubicCurve.setStartX(100.0f); 
cubicCurve.setStartY(150.0f); 
cubicCurve.setControlX1(400.0f); 
cubicCurve.setControlY1(40.0f); 
cubicCurve.setControlX2(175.0f); 
cubicCurve.setControlY2(250.0f); 
cubicCurve.setEndX(500.0f); 
cubicCurve.setEndY(150.0f);

步驟 3：將三次貝塞爾曲線新增到 Group

透過將先前建立的 CubicCurve 物件作為引數傳遞給其建構函式，在 start() 方法中例項化 Group 類。

Group root = new Group(cubiccurve);

步驟 4：啟動應用程式

建立二維物件後，請按照以下步驟正確啟動應用程式：

首先，透過將 Group 物件作為引數值傳遞給其建構函式來例項化名為 **Scene** 的類。還可以向此建構函式傳遞應用程式螢幕的尺寸作為可選引數。
然後，使用 **Stage** 類的 **setTitle()** 方法設定舞臺的標題。
現在，使用名為 **Stage** 的類的 **setScene()** 方法將 Scene 物件新增到舞臺。
使用名為 **show()** 的方法顯示場景的內容。
最後，藉助 **launch()** 方法啟動應用程式。

示例

以下程式使用 JavaFX 生成貝塞爾三次曲線。將此程式碼儲存在名為 **CubicCurveExample.java** 的檔案中。

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.CubicCurve; 
         
public class CubicCurveExample extends Application {  
   @Override 
   public void start(Stage stage) { 
      //Drawing a cubic curve 
      CubicCurve cubicCurve = new CubicCurve(); 
       
      //Setting properties to cubic curve
      cubicCurve.setStartX(100.0f); 
      cubicCurve.setStartY(150.0f); 
      cubicCurve.setControlX1(400.0f); 
      cubicCurve.setControlY1(40.0f); 
      cubicCurve.setControlX2(175.0f); 
      cubicCurve.setControlY2(250.0f); 
      cubicCurve.setEndX(500.0f); 
      cubicCurve.setEndY(150.0f);      
         
      //Creating a Group object  
      Group root = new Group(cubicCurve); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a cubic curve"); 
         
      //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 --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveExample

輸出

執行上述程式後，將生成一個 JavaFX 視窗，顯示如下所示的貝塞爾三次曲線。

示例

在下面的示例中，我們嘗試將 DropShadow 效果應用於繪製的三次貝塞爾曲線。將此程式碼儲存在名為 **CubicCurveEffect.java** 的檔案中。

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow; 
import javafx.stage.Stage; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.CubicCurve; 
         
public class CubicCurveEffect extends Application {  
   @Override 
   public void start(Stage stage) { 
      //Drawing a cubic curve 
      CubicCurve cubicCurve = new CubicCurve(); 
       
      //Setting properties to cubic curve
      cubicCurve.setStartX(50.0f); 
      cubicCurve.setStartY(100.0f); 
      cubicCurve.setControlX1(200.0f); 
      cubicCurve.setControlY1(40.0f); 
      cubicCurve.setControlX2(150.0f); 
      cubicCurve.setControlY2(200.0f); 
      cubicCurve.setEndX(200.0f); 
      cubicCurve.setEndY(50.0f);
	  
	  cubicCurve.setFill(Color.RED);  

      //Instantiating the DropShadow class 
      DropShadow ds = new DropShadow();  
      
      //Applying DropShadow effect to cubicCurve 
      cubicCurve.setEffect(ds); 	  
         
      //Creating a Group object  
      Group root = new Group(cubicCurve); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 300, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a cubic curve"); 
         
      //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 --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveEffect.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveEffect

輸出

執行上述程式後，將生成一個 JavaFX 視窗，顯示如下所示的貝塞爾三次曲線。

列印頁面