忍者ブログ

軽Lab

 Javaを中心とした、プログラミング関係のナレッジベース

Home > JavaFX入門 > JavaFX 図形・Canvas

JavaFX 図形・Canvas

シーングラフとして登録できる図形と、SwingでおなじみのGraphicsContextを利用して描画するCanvasクラスを見ていく。

■ 図形(Shape)

利用可能な図形(Shape型)の一覧は以下の通りである。

分類 クラス 内容
図形 Rectangle 長方形
Circle
Ellipse 楕円
Arc 円弧
Text テキスト
Polygon 自由形(折れ線)
Line 直線
QuadCurve 曲線(ペジェ曲線・制御点1つ)
CubicCurve 曲線(ペジェ曲線・制御点2つ)
Polyline 折れ線
Path 自由線(PathElementクラスで指定)
MoveTo                 :座標を設定
LineTo                   :直線を設定
HLineTo                 :水平線を設定
VLineTo                 :垂直線を設定
QuadCurveTo        :曲線(ペジェ曲線・制御点1つ)を設定
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行目)で記述しており、各シェイプについて
  1. シェイプを作成
  2. createNameAndShape関数に渡し、シェイプ名と背景色・外枠を設定
  3. シーングラフのrootノードに追加
  4. 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();
        
    }


}
◇実行結果
 


■ 参照

  1. JavaDoc - クラスShape
  2. JavaDoc - クラスCanvas
  3. SVG 1.1 (Second Edition) – 16 August 2011
  4. JavaDoc - クラスGraphicsContext
Home > JavaFX入門 > JavaFX 図形・Canvas

- ランダム記事 -
- PR -

コメント

プロフィール

管理者:
 連絡はContactよりお願いします。

PR