Javafx 简明教程

JavaFX - CubicCurveTo Path Object

三次曲线是一个二维结构，是一种贝塞尔曲线。贝塞尔曲线被定义为通过一组控制点 (P0…Pn) 的曲线。当控制点的数量为 4（或曲线的阶数为 3）时，它被称为三次曲线。

JavaFX 还提供一个 CubicCurve 路径对象来绘制更复杂的形状。在这里，我们仅考虑三次曲线的端点和控制点，以构造路径对象。让我们进一步详细了解如何构造它。

CubicCurve Path Object

路径元素三次曲线用于绘制一个 cubic curve 到从当前位置到指定坐标中的点。

它由名为 CubicCurveTo 的类表示。此类属于包 javafx.scene.shape 。

此类有 6 个 double 数据类型的属性，即 −

setX − 要从当前位置绘制曲线到的点的 x 坐标。
setX − 要从当前位置绘制曲线到的点的 y 坐标。
controlX1 − 曲线的第 1 个控制点的 x 坐标。
controlY1 − 曲线的第 1 个控制点的 y 坐标。
controlX2 − 曲线的第 2 个控制点的 x 坐标。
controlY2 − 曲线的第 2 个控制点的 y 坐标。

要绘制三次曲线，你需要将值传递给这些属性。可以通过将这些值传递给此类的构造函数来完成。这些值应与实例化时的顺序相同；或者使用它们的相应 setter 方法。

Steps to draw PathElement Cubic Curve

要在 JavaFX 中从当前位置绘制三次曲线到指定点，请按照如下给定的步骤操作。

Step 1: Creating a Class

如以下所示，在应用程序类的 start() 方法内创建一个三次曲线路径对象。

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

Step 2: Create a 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);

Step 3: Creating an Object of the Class CubicCurveTo

通过实例化名为 CubicCurveTo 的类创建路径元素二次曲线，该类属于 javafx.scene.shape 包，如下所示 −

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

Step 4: Setting Properties to the Cubic Curve Element

指定要从当前位置绘制三次曲线的点的坐标。然后你应该通过它们的 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);

Step 5: Adding Elements to the Observable List of Path Class

将前面步骤创建的路径元素 → MoveTo 和 CubicCurveTo 添加到 Path 类的 observable 列表，如下所示 −

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

Step 6: Launching Application

创建 CubicCurveTo 路径对象后，按照下面给出的步骤正确启动应用程序 −

首先，通过将组对象作为其构造函数的参数值传递来实例化名为 Scene 的类。你也可以将应用程序屏幕的尺寸作为可选参数传递给此构造函数。
然后，使用 Stage 类的 setTitle() 方法设置阶段标题。
现在，使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到阶段。
使用名为 show() 的方法显示场景的内容。
最后，借助 launch() 方法启动应用程序。

Example

下面是用 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 窗口，显示三次曲线。这是从当前位置绘制到指定点的，如下所示。

Example

另一个示例中，我们尝试将 Stroke 过渡动画应用于三次曲线路径。在此，将该 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 窗口，该窗口显示具有描边过渡的三次曲线。这是从当前位置绘制到指定点的，如下所示。