JavaFX 3D (2) 基本3D物件

今天刊登於CodeData網站，有關JavaFX 3D的第二部份：

http://www.codedata.com.tw/java/javafx-3d-2-basic-3d-objects/

還有在JavaFX Coummunity上輪播。

© Chia-Hui Huang

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

JavaFX 8技術手冊

很認真在寫「JavaFX 8技術手冊」一書，包括以下章節，希望年底之前能出版：

1. JavaFX
2. JavaFX程式架構
3. Layout Pane
4. 效果
5. 事件
6. 按鈕
7. 選項項目
8. 捲軸、滑動軸、進度指示器與進度列
9. 選單
10. 文字編輯物件
11. 窗格
12. 對話盒
13. Web
14. 樹
15. 表格
16. 樹狀表格
17. 繪圖
18. 動畫
19. 圖表
20. 多媒體
21. 3D

© Chia-Hui Huang