JavaFX CSS
JavaFX - CSS

JavaFX - 绘制 SVGPath

SVG (可缩放矢量图形) 是一种基于 XML 的语言，用于定义基于矢量的图形。SVG 库中的 <path> 元素在绘制基本形状时功能最为强大。使用路径，您可以绘制直线、曲线、弧线，以及包含它们的各种复杂形状。

即使路径在创建复杂形状时类似于折线元素，但使用折线元素绘制的复杂形状的比例尺并不大于使用路径元素绘制的形状。

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

JavaFX 采用了 SVGPath 的相同概念来创建对象。

JavaFX 中的 SVG Path

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

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

此类具有一个名为content的 String 数据类型属性。这表示 SVG Path 编码字符串，图像应从此字符串中绘制。

要通过解析 SVG 路径绘制形状，您需要使用此类名为setContent()的方法向此属性传递值，如下所示：

setContent(value);

绘制 SVGPath 的步骤

要在 JavaFX 中通过解析 SVGPath 绘制形状，请按照以下步骤操作。

步骤 1：创建 SVGPath 类的对象

您可以通过解析 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();   
   }
}

步骤 2：设置 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);

步骤 3：将 SVGPath 添加到 Group

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

Group root = new Group(svgpath);

步骤 4：启动应用程序

创建 2D 对象后，请按照以下步骤正确启动应用程序：

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

示例

以下是通过使用 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 路径绘制的。

示例

您还可以使用 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 路径绘制的。

打印页面