JavaFX - 二次貝塞爾曲線 Path 物件

上一頁
下一頁

二次曲線或二次貝塞爾曲線通常定義為由二次方程定義的曲線。在 JavaFX 中，我們使用 6 個不同的屬性來建立此二次貝塞爾曲線節點。為了使用二次貝塞爾曲線建立複雜的形狀，每次需要時都必須指定這些屬性。

JavaFX 透過提供一個只需要較少屬性即可繪製二次貝塞爾曲線的 Path 物件，簡化了此過程。

我們將在本章後面詳細瞭解二次貝塞爾曲線 Path 物件。

二次貝塞爾曲線 Path 物件

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

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

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

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

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

  • **controlX** - 曲線控制點的 x 座標。

  • **controlY** - 曲線控制點的 y 座標。

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

繪製 PathElement 二次貝塞爾曲線的步驟

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

步驟 1：建立 Path 物件

例項化 Path 類以在 Application 類的 start() 方法中建立一個 Path 物件，如下所示：

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

步驟 2：建立 Path

建立**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：建立 QuadraticCurveTo 類的物件

透過例項化名為**QuadCurveTo**的類（屬於包**javafx.scene.shape**）來建立路徑元素二次曲線，如下所示。

//Creating an object of the class QuadCurveTo 
QuadCurveTo quadCurveTo = new QuadCurveTo()

步驟 4：將屬性設定為二次曲線元素

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

//Setting properties of the class QuadCurve            
quadCurveTo.setX(500.0f); 
quadCurveTo.setY(220.0f); 
quadCurveTo.setControlX(250.0f); 
quadCurveTo.setControlY(0.0f);

步驟 5：將元素新增到 Path 類的 ObservableList

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

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

步驟 6：啟動應用程式

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

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

  • 然後，使用**Stage**類的**setTitle()**方法設定階段的標題。

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

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

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

示例 1

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

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo; 
         
public class QuadCurveToExample 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 QuadCurve 
      QuadCurveTo quadCurveTo = new QuadCurveTo(); 
       
      //Setting properties of the class QuadCurve            
      quadCurveTo.setX(500.0f); 
      quadCurveTo.setY(220.0f); 
      quadCurveTo.setControlX(250.0f);  
      quadCurveTo.setControlY(0.0f);      
       
      //Adding the path elements to Observable list of the Path class 
      path.getElements().add(moveTo); 
      path.getElements().add(quadCurveTo);         
      
      //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 QuadCurve 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 QuadCurveToExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveToExample

輸出

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

Drawing Quadratic Curve

示例 2

在此示例中，讓我們嘗試為此二次貝塞爾曲線 Path 應用一些動畫。在這裡，我們繪製一個示例二次貝塞爾曲線併為其應用淡入淡出動畫。將此程式碼儲存在名為**QuadCurveToAnimation.java**的檔案中。

import javafx.application.Application;
import javafx.animation.FadeTransition; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.util.Duration;
         
public class QuadCurveToAnimation 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 QuadCurve 
      QuadCurveTo quadCurveTo = new QuadCurveTo(); 
       
      //Setting properties of the class QuadCurve            
      quadCurveTo.setX(500.0f); 
      quadCurveTo.setY(220.0f); 
      quadCurveTo.setControlX(250.0f);  
      quadCurveTo.setControlY(0.0f);      
       
      //Adding the path elements to Observable list of the Path class 
      path.getElements().add(moveTo); 
      path.getElements().add(quadCurveTo);

      //Creating the fade Transition 
      FadeTransition fadeTransition = new FadeTransition(); 
	  fadeTransition.setDuration(Duration.millis(1000));
	  
	  //Setting the node for Transition 
      fadeTransition.setNode(path);
      
      //Setting the property fromValue of the transition (opacity) 
      fadeTransition.setFromValue(1.0); 
      
      //Setting the property toValue of the transition (opacity) 
      fadeTransition.setToValue(0.3); 
      
      //Setting the cycle count for the transition 
      fadeTransition.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      fadeTransition.setAutoReverse(false); 
  
      //Playing the animation 
      fadeTransition.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 QuadCurve 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 QuadCurveToAnimation.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveToAnimation

輸出

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

Drawing Quadratic Curve
列印頁面
上一頁
下一頁
廣告