Javafx 简明教程

JavaFX - Drawing an SVGPath

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

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

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

SVG Path in JavaFX

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

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

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

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

setContent(value);

Steps to Draw SVGPath

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

Step 1: Creating an Object of the SVGPath Class

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

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。使用它，应将形状绘制为字符串形式，如下面的代码块所示。

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 类：

Group root = new Group(svgpath);

Step 4: Launching Application

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

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

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

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

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

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

Example

以下是通过使用 JavaFX 解析 SVG 路径并用线构建的 2D 形状的程序。将此代码保存在名为 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 文件。

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 绘制的三角形，如下所示。

svgpath line

Example

您还可以使用 SVG 路径从曲线和弧线构建复杂形状。以下示例通过 SVG 路径创建一个三次曲线。将此代码保存在名为 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 文件。

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 绘制的三角形，如下所示。

svgpath curve