シーングラフとして登録できる図形と、SwingでおなじみのGraphicsContextを利用して描画するCanvasクラスを見ていく。
■ 図形（Shape）
利用可能な図形(Shape型)の一覧は以下の通りである。
| 分類 |
クラス |
内容 |
| 図形 |
Rectangle |
長方形 |
| Circle |
円 |
| Ellipse |
楕円 |
| Arc |
円弧 |
| Text |
テキスト |
| Polygon |
自由形（折れ線） |
| 線 |
Line |
直線 |
| QuadCurve |
曲線（ペジェ曲線・制御点1つ） |
| CubicCurve |
曲線（ペジェ曲線・制御点2つ） |
| Polyline |
折れ線 |
| Path |
自由線(PathElementクラスで指定)
MoveTo ：座標を設定
LineTo ：直線を設定
HLineTo ：水平線を設定
VLineTo ：垂直線を設定
QuadCurveTo ：曲線（ペジェ曲線・制御点１つ）を設定
CubicCurveTo ：曲線（ペジェ曲線・制御点2つ）を設定
ArcTo ：円弧を設定
ClosePath ： パスを閉じる（始点まで線をつなぐ） |
| SVGPath |
自由線(SVG文字列で指定) |
◇サンプルコード
以下に各シェイプの使い方のサンプルを示す。サンプルでは各行でシェイプのサンプルイメージを表示しており、『シェイプ名』『シェイプの形』を出力している。
package application_fx;
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Circle;
import javafx.scene.shape.CubicCurve;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.HLineTo;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Polyline;
import javafx.scene.shape.QuadCurve;
import javafx.scene.shape.QuadCurveTo;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.SVGPath;
import javafx.scene.shape.Shape;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class TestShape extends Application {
public static void main(String[] args)
{
launch( args );
}
@Override
public void start(Stage primaryStage) throws Exception
{
// シーングラフの作成
// ルートノードを作成
VBox root = new VBox( 2 );
// シェイプを追加
// 長方形 (縦,横)=(200,50)
Rectangle rect = new Rectangle( 200 , 50 );
root.getChildren().add( createNameAndShape( "Rectangle\t" , rect ) );
// 円 (半径)=(25)
Circle circle = new Circle( 25 );
root.getChildren().add( createNameAndShape( "Circle\t" , circle ) );
// 楕円 （x軸半径・y軸半径）=(100,25)
Ellipse ellipse = new Ellipse( 100 , 25 );
root.getChildren().add( createNameAndShape( "Ellipse\t" , ellipse ) );
// 円弧
Arc arc = new Arc( 25 , 25 , 25 , 25 , 250 , 150 );
root.getChildren().add( createNameAndShape( "Arc\t\t" , arc ) );
// 自由形
double[] points = new double[]{ 0.0 , 0.0 ,
20.0 , 20.0 ,
40.0 , 10.0 ,
200.0 , 10.0 ,
200.0 , 50.0 };
Polygon polygon = new Polygon( points );
root.getChildren().add( createNameAndShape( "Polygon\t" , polygon ) );
// テキスト
Text text = new Text( "テキスト" );
text.setFont( Font.font( 50 ) );
root.getChildren().add( createNameAndShape( "Text\t\t" , text ) );
// 直線(始点x,始点y,終点x,終点y)=(0,0,200,50)
Line line = new Line( 0 , 0 , 200 , 50 );
root.getChildren().add( createNameAndShape( "Line\t\t" , line ) );
// ペジェ曲線（1つの制御点）
// (始点x,始点y,制御点x,制御点y,終点x,終点y)
QuadCurve qc = new QuadCurve( 0 , 0 , 100 , 0 , 200 , 50 );
root.getChildren().add( createNameAndShape( "QuadCurve\t" , qc ) );
// ペジェ曲線（2つの制御点）
// (始点x,始点y,制御点1x,制御点1y,制御点2x,制御点,2y,終点x,終点y)
CubicCurve cc = new CubicCurve( 0 , 0 , 100 , 0 , 50 , 100 , 200 , 50 );
root.getChildren().add( createNameAndShape( "CubicCurve\t" , cc ) );
// 折れ線
Polyline polyline= new Polyline( points );
root.getChildren().add( createNameAndShape( "Polyline\t" , polyline ) );
// パス
Path path = createPath();
root.getChildren().add( createNameAndShape( "Path\t\t" , path ) );
// パス(PathElementクラスで指定)
SVGPath svg = new SVGPath();
svg.setContent("M0,0 L100,50 C100,50 200,0 0,0 Z");
root.getChildren().add( createNameAndShape( "SVGPath\t" , svg ) );
// シーンの作成(文字列で指定)
Scene scene = new Scene( root , Color.web( "9FCC7F" ) );
// ウィンドウ表示
primaryStage.setScene( scene );
primaryStage.show();
}
/**
* シェイプと、シェイプの名前を出力するイメージを作成する
* @param name
* @param shape
* @return
*/
public Node createNameAndShape( String name , Shape shape )
{
// ルートノードを作成
HBox root = new HBox( 5.0 );
// 名前を追加
Text text = new Text( name );
// シェイプの位置をそろえ、境界線を出力
shape.setLayoutX( 200 );
shape.setFill( Color.WHITE );
shape.setStroke( Color.BLACK );
// ノードを追加
root.getChildren().addAll( text , shape );
return root;
}
/**
* パスを作成する
* @return
*/
public Path createPath()
{
// 空のパスを設定
Path path = new Path();
// 始点を指定
MoveTo moveTo = new MoveTo();
moveTo.setX(0.0f);
moveTo.setY(0.0f);
// 水平線パスを設定
HLineTo hLineTo = new HLineTo();
hLineTo.setX(70.0f);
// 曲線パスを設定
QuadCurveTo quadCurveTo = new QuadCurveTo();
quadCurveTo.setX(120.0f);
quadCurveTo.setY(60.0f);
quadCurveTo.setControlX(100.0f);
quadCurveTo.setControlY(0.0f);
// 直線パスを設定
LineTo lineTo = new LineTo();
lineTo.setX(175.0f);
lineTo.setY(55.0f);
// 円弧パスを設定
ArcTo arcTo = new ArcTo();
arcTo.setX(50.0f);
arcTo.setY(50.0f);
arcTo.setRadiusX(50.0f);
arcTo.setRadiusY(50.0f);
//パスを構築
path.getElements().addAll( moveTo , hLineTo , quadCurveTo , lineTo , arcTo );
return path;
}
}
◇実行結果
◇解説
サンプルコードの流れはstart関数(39行目～110行目)で記述しており、各シェイプについて
- シェイプを作成
- createNameAndShape関数に渡し、シェイプ名と背景色・外枠を設定
- シーングラフのrootノードに追加
- primaryStage.show関数でウィンドウ表示(108行目)
という流れである。各シェイプの使い方は、コードとJavaDoc参照。
■ Canvasクラス
Canvasは『GraphicsContextに用意されている一連のグラフィック・コマンドを使用して描画できるイメージ』とのこと。つまり、Swingの描画方式と同様で、GraphicsContextを使って四角形を書いたり、画像を書いたりできる。シーングラフで描くことができる図形、イメージ、エフェクトなどは、すべてGraphicsContextででも利用できる。詳細についてはJavaDocを参照のこと。
特に利用のメリットは感じないが、Swingに慣れた人向けに存在しているのだろうか。使い方のサンプルは以下の通り。
◇サンプルコード
package application_fx;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class TestCanvas extends Application {
public static void main(String[] args)
{
launch( args );
}
@Override
public void start(Stage primaryStage) throws Exception
{
// シーングラフを作成
Group root = new Group();
// キャンバスを作成
Canvas canvas = new Canvas( 200 , 200 );
root.getChildren().add( canvas );
// グラフィクス・コンテキストを取得し、
// キャンバスに描写
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setFill( Color.BROWN );
gc.fillText( "キャンバスの利用" , 0 , 50 );
gc.fillRect( 0 , 50 , 200 , 50 );
// シーンを作成
Scene scene = new Scene( root );
// ウィンドウ表示
primaryStage.setScene( scene );
primaryStage.show();
}
}
◇実行結果
■ 参照
- JavaDoc - クラスShape
- JavaDoc - クラスCanvas
- SVG 1.1 (Second Edition) – 16 August 2011
- JavaDoc - クラスGraphicsContext
