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