JavaFX CSS
JavaFX - CSS

JavaFX - 繪製二次曲線

在數學上，二次曲線是由二次函式描述的曲線，例如 - y = ax² + bx + c。

在計算機圖形學中，使用貝塞爾曲線。這些是引數曲線，在所有比例尺上看起來都相當平滑。這些貝塞爾曲線是根據 XY 平面上的點繪製的。

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

JavaFX 中的二次曲線

在 JavaFX 中，二次曲線由名為 QuadCurve 的類表示。此類屬於 javafx.scene.shape 包。

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

此類具有 6 個雙精度資料型別的屬性，即 -

startX - 曲線起點的 x 座標。
startY - 曲線起點的 y 座標。
controlX - 曲線控制點的 x 座標。
controlY - 曲線控制點的 y 座標。
endX - 曲線終點的 x 座標。
endY - 曲線終點的 y 座標。

要繪製二次曲線，您需要向這些屬性傳遞值。這可以透過在例項化時按相同的順序將它們傳遞給此類的建構函式來完成；或者使用適當的 setter 方法。

繪製二次曲線的步驟

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

步驟 1：建立二次曲線

您可以透過例項化名為 QuadCurve 的類在 JavaFX 中建立二次曲線，該類屬於 javafx.scene.shape 包。然後，您可以在 Application 類的 start() 方法中例項化此類，如下面的程式碼塊所示。

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

步驟 2：設定二次曲線的屬性

使用其各自的 setter 方法指定所需曲線的三個點的 x、y 座標：起點、終點和控制點，如下面的程式碼塊所示。

//Adding properties to the Quad Curve 
quadCurve.setStartX(100.0); 
quadCurve.setStartY(220.0f); 
quadCurve.setEndX(500.0f); 
quadCurve.setEndY(220.0f);
quadCurve.setControlX(250.0f); 
quadCurve.setControlY(0.0f);

或者，使用其各自的 setter 方法，如下所示 -

QuadCurve quadcurve = new QuadCurve(startX, startY, controlX, controlY, endX, endY);

步驟 3：將二次曲線物件新增到組中

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

Group root = new Group(quadcurve);

步驟 4：啟動應用程式

建立 2D 物件後，請按照以下步驟正確啟動應用程式 -

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

示例

以下是使用 JavaFX 生成四邊形曲線的程式。將此程式碼儲存在名為 QuadCurveExample.java 的檔案中。

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

public class QuadCurveExample extends Application {  
   @Override 
   public void start(Stage stage) {        
      //Creating a QuadCurve 
      QuadCurve quadCurve = new QuadCurve();  
       
      //Adding properties to the Quad Curve 
      quadCurve.setStartX(100.0); 
      quadCurve.setStartY(220.0f); 
      quadCurve.setEndX(500.0f); 
      quadCurve.setEndY(220.0f); 
      quadCurve.setControlX(250.0f); 
      quadCurve.setControlY(0.0f);       
               
      //Creating a Group object  
      Group root = new Group(quadCurve);
      
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a Quad 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 QuadCurveExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveExample

輸出

執行上述程式後，將生成一個 JavaFX 視窗，顯示如下螢幕截圖所示的貝塞爾四邊形曲線。

示例

現在，您還可以透過應用任何效果（例如綻放效果）來繪製此四邊形曲線，如下面的示例所示。將程式碼儲存在名為 QuadCurveEffect.java 的檔案中。

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene;
import javafx.scene.effect.Bloom; 
import javafx.stage.Stage; 
import javafx.scene.paint.Color;
import javafx.scene.shape.QuadCurve;  

public class QuadCurveEffect extends Application {  
   @Override 
   public void start(Stage stage) {        
      //Creating a QuadCurve 
      QuadCurve quadCurve = new QuadCurve();  
       
      //Adding properties to the Quad Curve 
      quadCurve.setStartX(100.0); 
      quadCurve.setStartY(220.0f); 
      quadCurve.setEndX(300.0f); 
      quadCurve.setEndY(220.0f); 
      quadCurve.setControlX(250.0f); 
      quadCurve.setControlY(0.0f);
	  
	  quadCurve.setFill(Color.RED);  

      //Instantiating the Bloom class 
      Bloom bloom = new Bloom(); 
      
      //setting threshold for bloom 
      bloom.setThreshold(0.1); 
      
      //Applying bloom effect to quadCurve 
      quadCurve.setEffect(bloom);       
               
      //Creating a Group object  
      Group root = new Group(quadCurve);
      
      //Creating a scene object 
      Scene scene = new Scene(root, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a Quad 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 QuadCurveEffect.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveEffect

輸出

執行上述程式後，將生成一個 JavaFX 視窗，顯示如下螢幕截圖所示的貝塞爾四邊形曲線。

列印頁面