Javafx 简明教程

JavaFX - Drawing a Quad Curve

从数学上讲，二次曲线是一个由二次函数描述的曲线，例如 y = ax2 + bx + c。

Mathematically, a quadratic curve is one that is described by a quadratic function like − y = ax2 + bx + c.

计算机图形中使用贝塞尔曲线。这些是参数曲线，在所有尺度下都显得相当平滑。这些贝塞尔曲线基于 XY 平面上的点绘制。

In computer graphics Bezier curves are used. These are parametric curves which appear reasonably smooth at all scales. These Bezier curves are drawn based on points on an XY plane.

二次曲线是 XY 平面上的贝塞尔参数曲线，是 2 度曲线。使用三个点绘制： start point, end point 和 control point ，如下图所示：

A quadratic curve is a Bezier parametric curve in the XY plane which is a curve of degree 2. It is drawn using three points: start point, end point and control point as shown in the following diagram

Quad Curve in JavaFX

在 JavaFX 中，Quad 曲线由名为 QuadCurve 的类表示。此类属于 javafx.scene.shape 包。

In JavaFX, a Quad Curve is represented by a class named QuadCurve. This class belongs to the package javafx.scene.shape.

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

By instantiating this class, you can create a QuadCurve node in JavaFX.

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

This class has 6 properties of the double datatype namely −

startX − The x coordinate of the starting point of the curve.
startY − The y coordinate of the starting point of the curve.
controlX − The x coordinate of the control point of the curve.
controlY − The y coordinate of the control point of the curve.
endX − The x coordinate of the end point of the curve.
endY − The y coordinate of the end point of the curve.

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

To draw a Quad Curve, you need to pass values to these properties. This can be done either by passing them to the constructor of this class, in the same order, at the time of instantiation; or by using appropriate setter methods.

Steps to Draw Quad Curve

要使用 JavaFX 绘制贝塞尔四边形曲线，请执行以下步骤。

To Draw a Bezier Quadrilateral Curve in JavaFX, follow the steps given below.

Step 1: Creating a Quad Curve

你可以通过实例化属于包 javafx.scene.shape 的名为 QuadCurve 的类来在 JavaFX 中创建一个 Quad 曲线。然后，你可以在 Application 类的 start() 方法中实例化此类，如下面的代码块所示。

You can create a Quad Curve in JavaFX by instantiating the class named QuadCurve which belongs to a package javafx.scene.shape. You can then instantiate this class in start() method of Application class as shown in the following code block.

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

Step 2: Setting Properties to the Quad Curve

使用各自的 setter 方法指定所需曲线的三个点的 x、y 坐标：起始点、结束点和控制点，如下面的代码块所示。

Specify the x, y coordinates of the three points: start point, end point and control points, of the required curve, using their respective setter methods as shown in the following code block.

//Adding properties to the Quad Curve
quadCurve.setStartX(100.0);
quadCurve.setStartY(220.0f);
quadCurve.setEndX(500.0f);
quadCurve.setEndY(220.0f);
quadCurve.setControlX(250.0f);
quadCurve.setControlY(0.0f);

或者，通过使用各自的 setter 方法，如下所示：

Or, by using their respective setter methods as follows −

QuadCurve quadcurve = new QuadCurve(startX, startY, controlX, controlY, endX, endY);

Step 3: Adding Quad Curve Object to Group

在 start() 方法中，通过将之前创建的 QuadCurve 对象作为其构造函数的参数值来实例化 Group 类：

In the start() method, instantiate a Group class by passing the previously created QuadCurve object as a parameter value to its constructor −

Group root = new Group(quadcurve);

Step 4: Launching Application

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

Once the 2D object is created, follow the given steps below to launch the application properly −

Firstly, instantiate the class named Scene by passing the Group object as a parameter value to its constructor. To this constructor, you can also pass dimensions of the application screen as optional parameters.
Then, set the title to the stage using the setTitle() method of the Stage class.
Now, a Scene object is added to the stage using the setScene() method of the class named Stage.
Display the contents of the scene using the method named show().
Lastly, the application is launched with the help of the launch() method.

Example

下面是一个使用 JavaFX 生成四边形曲线的程序。将此代码保存在一个名为 QuadCurveExample.java. 的文件中。

Following is a program which generates a quadrilateral curve using JavaFX. Save this code in a file with the name QuadCurveExample.java.

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

public class QuadCurveExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a QuadCurve
      QuadCurve quadCurve = new QuadCurve();

      //Adding properties to the Quad Curve
      quadCurve.setStartX(100.0);
      quadCurve.setStartY(220.0f);
      quadCurve.setEndX(500.0f);
      quadCurve.setEndY(220.0f);
      quadCurve.setControlX(250.0f);
      quadCurve.setControlY(0.0f);

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

      //Creating a scene object
      Scene scene = new Scene(root, 600, 300);

      //Setting title to the Stage
      stage.setTitle("Drawing a Quad 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 文件。

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveExample

在执行过程中，以上程序生成一个显示一个贝塞尔四边形曲线的 JavaFX 窗口，如下面的屏幕截图所示。

On executing, the above program generates a JavaFX window displaying a Bezier quadrilateral curve as shown in the following screenshot.

Example

现在，您还可以通过应用任何效果（例如绽放效果）来绘制此四边形曲线，如下面的示例所示。将代码保存在名为 QuadCurveEffect.java 的文件中。

Now, you can also draw this quadrilateral curve by applying any effect, say bloom effect, as shown in the example below. Save the code in a file named QuadCurveEffect.java.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Bloom;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.shape.QuadCurve;

public class QuadCurveEffect extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a QuadCurve
      QuadCurve quadCurve = new QuadCurve();

      //Adding properties to the Quad Curve
      quadCurve.setStartX(100.0);
      quadCurve.setStartY(220.0f);
      quadCurve.setEndX(300.0f);
      quadCurve.setEndY(220.0f);
      quadCurve.setControlX(250.0f);
      quadCurve.setControlY(0.0f);

	  quadCurve.setFill(Color.RED);

      //Instantiating the Bloom class
      Bloom bloom = new Bloom();

      //setting threshold for bloom
      bloom.setThreshold(0.1);

      //Applying bloom effect to quadCurve
      quadCurve.setEffect(bloom);

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

      //Creating a scene object
      Scene scene = new Scene(root, 400, 300);

      //Setting title to the Stage
      stage.setTitle("Drawing a Quad 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 文件。

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveEffect.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls QuadCurveEffect

在执行过程中，以上程序生成一个显示一个贝塞尔四边形曲线的 JavaFX 窗口，如下面的屏幕截图所示。

On executing, the above program generates a JavaFX window displaying a Bezier quadrilateral curve as shown in the following screenshot.