2014年9月8日 星期一

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

1 則留言: