Javafx 简明教程

JavaFX - Drawing a Cubic Curve

三次曲线由两个变量的三次多项式函数描述,可以写成以下形式:

cubiccurve

这些贝塞尔曲线通常用于计算机图形中。它们是参数曲线,在所有比例下都显得相当平滑。这些曲线是基于 XY 平面上的点绘制的。

XY 平面上的三次曲线是三次贝塞尔参数曲线。它使用四个点绘制,如 Start Point, End Point, Control Point and Control Point2 所示,如下所示。

bezier curves

Cubic Curve in JavaFX

在 JavaFX 中,三次曲线使用名为 CubicCurve 的类表示。此类属于 javafx.scene.shape 包。

通过实例化此类,你可以在 JavaFX 中创建一个 CubicCurve 节点。

此类具有 8 个双精度数据类型的属性,即:

  1. startX − 曲线起点的 x 坐标。

  2. startY − 曲线起点的 y 坐标。

  3. controlX1 − 曲线第一个控制点的 x 坐标。

  4. controlY1 − 曲线第一个控制点的 y 坐标。

  5. controlX2 − 曲线第二个控制点的 x 坐标。

  6. controlY2 − 曲线第二个控制点的 y 坐标。

  7. endX − 曲线终点的 x 坐标。

  8. endY − 曲线终点的 y 坐标。

要绘制三次曲线,需要将值传递给这些属性,方法是在实例化时按相同顺序将它们传递给此类的构造函数,或使用它们各自的 setter 方法。

Steps to Draw Cubic Curve

要在 JavaFX 中绘制三次贝塞尔曲线,请遵循以下步骤。

Step 1: Creating a Cubic Curve

可以通过实例化名为 CubicCurve *which belongs to a package *javafx.scene.shape 的类在 JavaFX 中创建三次曲线。可以在 Application 类的 start() 方法中实例化这个类,如下所示。

public class ClassName extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
      //Creating an object of the class CubicCurve
      CubicCurve cubiccurve = new CubicCurve();
   }
}

Step 2: Setting Properties to the Cubic Curve

使用各自的 setter 方法,指定曲线四个点的 x, y 坐标: start point, end point, control point1control point2 ,如下面的代码块所示。

//Setting properties to cubic curve
cubicCurve.setStartX(100.0f);
cubicCurve.setStartY(150.0f);
cubicCurve.setControlX1(400.0f);
cubicCurve.setControlY1(40.0f);
cubicCurve.setControlX2(175.0f);
cubicCurve.setControlY2(250.0f);
cubicCurve.setEndX(500.0f);
cubicCurve.setEndY(150.0f);

Step 3: Adding Cubic Curve to Group

通过将先前创建的 CubicCurve 对象作为其构造函数的参数传递,在 start() 方法中实例化一个 Group 类。

Group root = new Group(cubiccurve);

Step 4: Launching Application

创建二维对象后,请按照下面给出的步骤正确启动应用程序:

  1. 首先,通过将组对象作为其构造函数的参数值传递来实例化名为 Scene 的类。你也可以将应用程序屏幕的尺寸作为可选参数传递给此构造函数。

  2. 然后,使用 Stage 类的 setTitle() 方法设置阶段标题。

  3. 现在,使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到阶段。

  4. 使用名为 show() 的方法显示场景的内容。

  5. 最后,借助 launch() 方法启动应用程序。

Example

以下是使用 JavaFX 生成贝塞尔三次曲线的程序。将此代码保存在名为 CubicCurveExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.CubicCurve;

public class CubicCurveExample extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a cubic curve
      CubicCurve cubicCurve = new CubicCurve();

      //Setting properties to cubic curve
      cubicCurve.setStartX(100.0f);
      cubicCurve.setStartY(150.0f);
      cubicCurve.setControlX1(400.0f);
      cubicCurve.setControlY1(40.0f);
      cubicCurve.setControlX2(175.0f);
      cubicCurve.setControlY2(250.0f);
      cubicCurve.setEndX(500.0f);
      cubicCurve.setEndY(150.0f);

      //Creating a Group object
      Group root = new Group(cubicCurve);

      //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 CubicCurveExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveExample

在执行时,上述程序生成一个 JavaFX 窗口,显示一个贝塞尔三次曲线,如下所示。

drawing cubic curve

Example

在以下示例中,我们尝试对绘制的三次曲线应用阴影效果。将此代码保存在名为 CubicCurveEffect.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurve;

public class CubicCurveEffect extends Application {
   @Override
   public void start(Stage stage) {
      //Drawing a cubic curve
      CubicCurve cubicCurve = new CubicCurve();

      //Setting properties to cubic curve
      cubicCurve.setStartX(50.0f);
      cubicCurve.setStartY(100.0f);
      cubicCurve.setControlX1(200.0f);
      cubicCurve.setControlY1(40.0f);
      cubicCurve.setControlX2(150.0f);
      cubicCurve.setControlY2(200.0f);
      cubicCurve.setEndX(200.0f);
      cubicCurve.setEndY(50.0f);

	  cubicCurve.setFill(Color.RED);

      //Instantiating the DropShadow class
      DropShadow ds = new DropShadow();

      //Applying DropShadow effect to cubicCurve
      cubicCurve.setEffect(ds);

      //Creating a Group object
      Group root = new Group(cubicCurve);

      //Creating a scene object
      Scene scene = new Scene(root, 300, 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 CubicCurveEffect.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls CubicCurveEffect

在执行时,上述程序生成一个 JavaFX 窗口,显示一个贝塞尔三次曲线,如下所示。

cubiccurve effect