JavaFX - 三次貝塞爾曲線路徑物件

上一頁
下一頁

三次貝塞爾曲線是一種二維結構，屬於貝塞爾曲線的一種。貝塞爾曲線定義為透過一組控制點 (P0...Pn) 的曲線。當控制點數為 4（或曲線的階數為 3）時，稱為三次貝塞爾曲線。

JavaFX 還提供了一個 CubicCurve 路徑物件來繪製更復雜的形狀。在這裡，我們將只考慮三次貝塞爾曲線的端點和控制點來構造路徑物件。讓我們進一步詳細瞭解如何構造它。

三次貝塞爾曲線路徑物件

路徑元素三次貝塞爾曲線用於從當前位置到指定座標中的某個點繪製三次貝塞爾曲線。

它由名為CubicCurveTo的類表示。此類屬於javafx.scene.shape包。

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

  • setX - 從當前位置繪製曲線的點的 x 座標。

  • setX - 從當前位置繪製曲線的點的 y 座標。

  • controlX1 - 曲線的第一個控制點的 x 座標。

  • controlY1 - 曲線的第一個控制點的 y 座標。

  • controlX2 - 曲線的第二個控制點的 x 座標。

  • controlY2 - 曲線的第二個控制點的 y 座標。

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

繪製路徑元素三次貝塞爾曲線的步驟

要在 JavaFX 中從當前位置到指定點繪製三次貝塞爾曲線，請按照以下步驟操作。

步驟 1：建立類

在 Application 類的 start() 方法內部建立 Cubic Curve Path 物件，如下所示。

public class ClassName extends Application { 
   @Override     
   public void start(Stage primaryStage) throws Exception {
      //Creating a Path object 
      Path path = new Path();   
   }    
}

步驟 2：建立路徑

建立MoveTo路徑元素並將 XY 座標設定為線條的起點到座標 (100, 150)。這可以透過使用MoveTo類的setX()和setY()方法來完成，如下所示。

//Moving to the starting point 
MoveTo moveTo = new MoveTo(); 
moveTo.setX(100.0f); 
moveTo.setY(150.0f);

步驟 3：建立 CubicCurveTo 類的物件

透過例項化名為 CubicCurveTo 的類來建立路徑元素二次貝塞爾曲線，該類屬於javafx.scene.shape包，如下所示 -

//Creating an object of the class CubicCurveTo 
CubicCurveTo cubicCurveTo= new CubicCurveTo ();

步驟 4：設定三次貝塞爾曲線元素的屬性

指定從當前位置繪製三次貝塞爾曲線的點的座標。然後，您應該透過其 setter 方法設定屬性 x、y、controlX1、controlY1、controlX2、controlY2 和控制點的座標，如下所示。

//Setting properties of the class CubicCurve            
cubicCurveTo.setControlX1(400.0f); 
cubicCurveTo.setControlY1(40.0f); 
cubicCurveTo.setControlX2(175.0f); 
cubicCurveTo.setControlY2(250.0f);
cubicCurveTo.setX(500.0f); 
cubicCurveTo.setY(150.0f);

步驟 5：將元素新增到 Path 類的可觀察列表中

將前面步驟中建立的路徑元素→MoveTo和CubicCurveTo新增到Path類的可觀察列表中，如下所示 -

//Adding the path elements to Observable list of the Path class   
path.getElements().add(moveTo); 
path.getElements().add(cubicCurveTo);

步驟 6：啟動應用程式

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

  • 首先，透過將 Group 物件作為引數值傳遞給其建構函式來例項化名為Scene的類。在此建構函式中，您還可以將應用程式螢幕的尺寸作為可選引數傳遞。

  • 然後，使用Stage類的setTitle()方法為舞臺設定標題。

  • 現在，使用名為Stage的類的setScene()方法將 Scene 物件新增到舞臺。

  • 使用名為show()的方法顯示場景的內容。

  • 最後，在launch()方法的幫助下啟動應用程式。

示例

以下是使用 JavaFX 的Path類從當前點到指定位置繪製三次貝塞爾曲線的程式。將此程式碼儲存在名為CubicCurveToExample.java的檔案中。

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.CubicCurveTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
         
public class CubicCurveToExample extends Application {  
   @Override 
   public void start(Stage stage) {        
      //Creating an object of the class named Path 
      Path path = new Path();  
      
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(); 
      moveTo.setX(100.0); 
      moveTo.setY(150.0);
      
      //Instantiating the class CubicCurve 
      CubicCurveTo cubicCurveTo = new CubicCurveTo(); 
       
      //Setting properties of the class CubicCurve            
      cubicCurveTo.setControlX1(400.0f); 
      cubicCurveTo.setControlY1(40.0f); 
      cubicCurveTo.setControlX2(175.0f); 
      cubicCurveTo.setControlY2(250.0f); 
      cubicCurveTo.setX(500.0f); 
      cubicCurveTo.setY(150.0f);       
       
      //Adding the path elements to Observable list of the Path class 
      path.getElements().add(moveTo);       
      path.getElements().add(cubicCurveTo);         
      
      //Creating a Group object  
      Group root = new Group(path); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Drawing a cubic through a specified path"); 
         
      //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 CubicCurveToExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveToExample

輸出

執行上述程式後，將生成一個 JavaFX 視窗，其中顯示了一條三次貝塞爾曲線。它從當前位置繪製到指定點，如下所示。

Drawing Cubic Curve Path

示例

在另一個示例中，我們嘗試對三次貝塞爾曲線路徑應用描邊動畫。在此，所述 2D 形狀的描邊設定為將其顏色從黑色更改為棕色。將此程式碼儲存在名為CubicCurveToAnimation.java的檔案中。

import javafx.application.Application;
import javafx.animation.StrokeTransition;
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.CubicCurveTo;
import javafx.util.Duration;
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path;
import javafx.scene.paint.Color;
         
public class CubicCurveToAnimation extends Application {  
   @Override 
   public void start(Stage stage) {        
      //Creating an object of the class named Path 
      Path path = new Path();  
      
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(); 
      moveTo.setX(100.0); 
      moveTo.setY(150.0);
      
      //Instantiating the class CubicCurve 
      CubicCurveTo cubicCurveTo = new CubicCurveTo(); 
       
      //Setting properties of the class CubicCurve            
      cubicCurveTo.setControlX1(400.0f); 
      cubicCurveTo.setControlY1(40.0f); 
      cubicCurveTo.setControlX2(175.0f); 
      cubicCurveTo.setControlY2(250.0f); 
      cubicCurveTo.setX(500.0f); 
      cubicCurveTo.setY(150.0f);       
       
      //Adding the path elements to Observable list of the Path class 
      path.getElements().add(moveTo);       
      path.getElements().add(cubicCurveTo);

      //creating stroke transition  
      StrokeTransition st = new StrokeTransition(); 
      
      //Setting the duration of the transition 
      st.setDuration(Duration.millis(1000)); 
      
      //Setting the shape for the transition 
      st.setShape(path); 
      
      //Setting the fromValue property of the transition (color) 
      st.setFromValue(Color.BLACK); 
      
      //Setting the toValue property of the transition (color) 
      st.setToValue(Color.BROWN); 
       
      //Setting the cycle count for the transition 
      st.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      st.setAutoReverse(false); 
      
      //Playing the animation 
      st.play();        
      
      //Creating a Group object  
      Group root = new Group(path); 
         
      //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 CubicCurveToAnimation.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveToAnimation

輸出

執行上述程式後，會生成一個 JavaFX 視窗，顯示一條帶有 Stroke 轉換的 Cubic 曲線。該曲線從當前位置繪製到指定的點，如下圖所示。

Drawing Cubic Curve Path
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.