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
打印页面
上一页
下一页
广告