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 路徑繪製的。

列印頁面