Javafx 简明教程

JavaFX - Drawing an SVGPath

SVG (Scalable Vector Graphics) 是一种基于 XML 的语言，用于定义基于向量的图形。SVG 库中的 <path> 元素在绘制基本形状时是最强大的。使用路径，您可以绘制线条、曲线、圆弧以及包括它们在内的各种复杂形状。

SVG (Scalable Vector Graphics) is an XML based language to define vector based graphics. The <path> element in the SVG library is the most powerful while drawing basic shapes. Using paths, you can draw lines, curves, arcs, and also various complex shapes including them.

SVG 中的 path 只通过一个参数来定义。此参数包含一系列命令，如线、曲线或弧命令。其中每个命令都使用单个字母实例化；例如，字母“M”调用“移动到”命令，字母“L”调用“线”命令，字母“C”调用“曲线”命令。这些字母可以用小写字母或大写字母指定。小写字母指定相对坐标，而大写字母指定绝对坐标。

A path in SVG is defined by only one parameter. This parameter holds series of commands, like line, curve or arc commands. And each of these commands are instantiated using a single letter; for example, the letter 'M' calls the "Move To" command, the letter 'L' calls the "line" command and 'C' calls "Curve" command. And these letters can either be specified as either a lowercase or an uppercase letter. The lowercase letter specifies relative coordinates, while the uppercase letter specifies absolute coordinates.

为了创建对象，JavaFX 采用了与 SVGPath 相同的概念。

The same concept of SVGPath is adopted by JavaFX, in order to create objects.

SVG Path in JavaFX

在 JavaFX 中，我们可以通过解析 SVG 路径构造图像。此类形状由名为 SVGPath 的类表示。此类属于包 javafx.scene.shape 。

In JavaFX we can construct images by parsing SVG paths. Such shapes are represented by the class named SVGPath. This class belongs to the package javafx.scene.shape.

通过实例化此类，您可以创建一个通过在 JavaFX 中解析 SVG 路径而创建的节点。

By instantiating this class, you can create a node which is created by parsing an SVG path in JavaFX.

此类有一个 content 字符串类型的属性。这表示应从中绘制图像的 SVG 路径编码字符串。

This class has a property named content of String datatype. This represents the SVG Path encoded string, from which the image should be drawn.

要通过解析 SVG 路径来绘制形状，您需要使用以下方法将值传递给此属性，使用方法名为 setContent() ：

To draw a shape by parsing an SVG path, you need to pass values to this property, using the method named setContent() of this class as follows −

setContent(value);

Steps to Draw SVGPath

要通过解析 JavaFX 中的 SVGPath 来绘制形状，请遵循以下步骤。

To Draw a shape by parsing an SVGPath in JavaFX, follow the steps given below.

Step 1: Creating an Object of the SVGPath Class

您可以通过解析 SVGPath 在 JavaFX 中创建所需的形状。为此，请实例化名为 SVGPath 的类，该类属于包 javafx.scene.shape 。您可以按照如下方式在 start() 方法中实例化此类：

You can create a required shape in JavaFX by parsing an SVGPath. To do so, instantiate the class named SVGPath which belongs to a package javafx.scene.shape. You can instantiate this class inside the start() method as follows.

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

Step 2: Setting the SVGPath

使用 setContent() 方法设置 SVG 对象的内容。对于此方法，您需要传递 SVGPath。使用它，应将形状绘制为字符串形式，如下面的代码块所示。

Set the content for the SVG object using the method setContent(). To this method, you need to pass the SVGPath. Using which, a shape should be drawn in the form of a string as shown in the following code block.

String path = "M 100 100 L 300 100 L 200 300 z";
//Setting the SVGPath in the form of string
svgPath.setContent(path);

Step 3: Adding SVGPath to Group

在 start() 方法中，通过将 SVGPath 对象作为参数值传递给构造函数来实例化 Group 类：

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

Group root = new Group(svgpath);

Step 4: Launching Application

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

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

  1. 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.

  2. Then, set the title to the stage using the setTitle() method of the Stage class.

  3. Now, a Scene object is added to the stage using the setScene() method of the class named Stage.

  4. Display the contents of the scene using the method named show().

  5. Lastly, the application is launched with the help of the launch() method.

Example

以下是通过使用 JavaFX 解析 SVG 路径并用线构建的 2D 形状的程序。将此代码保存在名为 SVGExample.java 的文件中。

Following is a program which generates a 2D shape constructed with lines by parsing SVG path using JavaFX. Save this code in a file with the name SVGExample.java.

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

public class SVGExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a SVGPath object
      SVGPath svgPath = new SVGPath();

      String path = "M 100 100 L 300 100 L 200 300 z";

      //Setting the SVGPath in the form of string
      svgPath.setContent(path);

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

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

      //Setting title to the Stage
      stage.setTitle("Drawing a Triangle");

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

执行时，上述程序生成一个 JavaFX 窗口，显示一个通过解析 SVG path 绘制的三角形，如下所示。

On executing, the above program generates a JavaFX window displaying a triangle, which is drawn by parsing the SVG path as shown below.

svgpath line

Example

您还可以使用 SVG 路径从曲线和弧线构建复杂形状。以下示例通过 SVG 路径创建一个三次曲线。将此代码保存在名为 SVGCurveExample.java 的文件中。

You can also construct complex shapes from curves and arcs using an SVG path. Following example creates a cubic curve using an SVG Path. Save this code in a file with the name SVGCurveExample.java.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class SVGCurveExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating a SVGPath object
      SVGPath svgPath = new SVGPath();

      String path = "M 70 110 C 70 180, 210 180, 210 110";

      //Setting the SVGPath in the form of string
      svgPath.setContent(path);

      // Setting the stroke and fill of the path
      svgPath.setStroke(Color.BLACK);
      svgPath.setFill(Color.ORANGE);

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

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

      //Setting title to the Stage
      stage.setTitle("Drawing a Bezier 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 SVGCurveExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls SVGCurveExample

执行时，上述程序生成一个 JavaFX 窗口，显示一个通过解析 SVG path 绘制的三角形，如下所示。

On executing, the above program generates a JavaFX window displaying a triangle, which is drawn by parsing the SVG path as shown below.

svgpath curve