JavaFX SVG Path

SVG (Scalable Vector Graphics) 譯為可縮放向量圖形，是以XML描述二維向量圖形的一種圖形格式。JavaFX支援SVG Path，由以下參數描述SVG圖形的路徑，參數有大小寫之分，若為大寫表示為絕對座標、小寫則為相對座標：

• M：始點座標 (moveto).
• L：自目前座標點繪製直線至指定座標點 (lineto).
• H：自目前座標點繪製水平直線至指定水平座標點 (horizontal lineto).
• V：自目前座標點繪製垂直直線至指定垂直座標點 (vertical lineto).
• C：自目前座標點繪製貝茲曲線至指定座標點 (curveto).
• S：自目前座標點繪製平滑貝茲曲線至指定座標點 (smooth curveto).
• Q：自目前座標點繪製二次貝茲曲線至指定座標點 (quadratic Bezier curve).
• T：自目前座標點繪製平滑二次貝茲曲線至指定座標點 (smooth quadratic Bezier curveto).
• A：自目前座標點繪製橢圓弧形至指定座標點 (elliptical arc).
• Z：關閉路徑，將目前座標點與始點連接起來以關閉SVG Path (closepath).

處理SVG Path的類別為javafx.scene.shape.SVGPath，其建構函式如下：

  public SVGPath()

並以SVGPath類別的setContent()方法設定SVG Path。

以下範例示範以SVGPath類別的setContent()方法設定SVG Path，以繪製SVG二維向量圖形。SVG Path以字串的方式表描述上述參數，其中：

• M150 50：代表始點座標為 (150, 50).
• L60 220：代表自 (150, 50) 繪製直線至 (60, 220).
• L240 220：代表自 (60, 220) 繪製直線至 (240, 220).
• Z：關閉路徑.

SVGPath svg = new SVGPath();
svg.setFill(Color.WHITE);
svg.setStroke(Color.RED);
svg.setStrokeWidth(3.0); 
// 設定SVG Path
svg.setContent("M150 50 L60 220 L240 220 Z");

Group group = new Group();
group.getChildren().add(svg);
...

【執行結果】

以下範例示範以SVGPath類別的setContent()方法設定SVG Path，其中以大寫表示絕對座標、小寫表示相對座標，例如：

• M 50 350 l 150 -300：代表自 (50, 350) 繪製直線至相對座標 (150, -300)，則自 (50, 350) 繪製直線至 (200, 50).
• M 200 50 l 150 300：代表自 (200, 50) 繪製直線至相對座標 (150, 300)，則自 (200, 50) 繪製直線至 (350, 350).
• M 50 350 q 150 -300 300 0：代表自 (50, 350) 繪製二次貝茲曲線至相對座標 (300, 0)，其中貝茲控制點為相對座標 (150, -300)，則自 (50, 350) 繪製二次貝茲曲線至 (350, 350)，其中貝茲控制點為 (200, 50).

SVGPath svg1 = new SVGPath();
svg1.setFill(Color.WHITE);
svg1.setStroke(Color.RED);
svg1.setStrokeWidth(5.0);
// 設定SVG Path
svg1.setContent("M 50 350 l 150 -300");

SVGPath svg2 = new SVGPath();
svg2.setFill(Color.WHITE);
svg2.setStroke(Color.GREEN);
svg2.setStrokeWidth(5.0);
// 設定SVG Path
svg2.setContent("M 200 50 l 150 300");

SVGPath svg3 = new SVGPath();
svg3.setFill(Color.WHITE);
svg3.setStroke(Color.BLUE);
svg3.setStrokeWidth(5.0);
// 設定SVG Path
svg3.setContent("M 50 350 q 150 -300 300 0");

Group group = new Group();
group.getChildren().addAll(svg1, svg2, svg3);   
...

【執行結果】

【參考資料】

[1] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[2] JavaFX：http://www.oracle.com/technetwork/java/javafx
[3] JavaFX 8.0 API Specification.
[4] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang