Java/JavaFX/シェイプ

Top > Java > JavaFX > シェイプ

シェイプ

円や四角などの図形を描画する機能があります。
円や四角の図形はシェイプと呼ばれます。
すべてシェイプはjavafx.scene.Shapeクラスのサブクラスとして定義されてます。

  • Arc 円弧,扇形
  • Circle 円
  • CubicCurve? 3次パラメトリック曲線(ベジェ曲線)
  • Ellipse 楕円
  • Line 直線
  • Path 直線,曲線からなるパス
  • Polygon 多角形
  • PolyLine? 複数の直線
  • QuadCurve? 2次パラメトリック曲線(スプライン曲線)
  • Rectangle 四角形/角丸四角

シェイプ作成

四角のシェイプを作成します。

プロジェクト

まずプロジェクトから作成します。

  1. メニューバーから[ファイル]→[新規プロジェクト]を選択してください。
    新規プロジェクトダイアログが表示されます。
  2. カテゴリの欄にJavaFXを選択してください。
    プロジェクトの欄にのJavaFXScriptApplication?が表示されます。
  3. JavaFXScriptApplication?プロジェクト選択し[次へ]クリックしてください。

    #ref(): File not found: "SampleProject_3_01.jpg" at page "JavaFXについて/シェイプ"

  4. 名前はSampleと付けてください。[Create Main File]のチェックは外しておきます。(名前は適当で結構です。)
    他の設定は、そのままで大丈夫です。
  5. [完了]選択してください。

プロジェクトを作成したら左側に表示されているプロジェクトペインに今作成したSampleプロジェクトが存在するはずです。

JavaFXファイル

JavaFXファイルを作成します。

  1. Sampleプロジェクトを右クリックしてください。
  2. [新規]→[Empty JavaFX File...]選択してください。
    createShape_00.JPG
  3. ファイルに名前を付けます。sampleと入力してください。(名前は適当で大丈夫です。)
  4. [完了]を選択してください。

FXファイルはこれで完成です。
ファイルを作成すると自動的にエディタが表示されます。
エディタの右側にコードパレットと呼ばれる、コードのひな型が用意されてます。
コードパレットにはApplication、Action、Shapesなどカテゴリが用意されています。

パレット使用方法

パレットのApplicationに含まれているStageをドラックしてエディタにドロップしてください。

createShape_stage.JPG

自動的に下記のようなコードが作成されます。

	import javafx.stage.Stage;
	import javafx.scene.Scene;
	/*
	 * sample.fx
	 *
	 * Created on 2009/04/20, 16:10:09
	 */
	Stage {
	    title : "MyApp"
	    scene: Scene {
	        width: 200
	        height: 200
	        content: [  ]
	    }
	}

StageクラスはSwingのJFrameクラスに相当します。
Stageオブジェクトを生成し、変数titleに"MyApp?"、変数sceneに新たなSceneオブジェクトを生成し代入してます。
Sceneオブジェクトは幅と高さが200ピクセル、変数contentは空です。
実行するにはメニューバーから[実行]→[ファイルを実行]を選択して下さい。
タイトルにMyApp?と表示されている、真っ白のウィンドウが表示されるはずです。
次にシェイプを追加します。
コードパレットから、RectangleをドラックしてSceneオブジェクトの変数contentの配列の[]にドロップしてください。

createShape_rectangle.JPG

次のように表示されます。

	Stage {
	    title : "MyApp"
	    scene: Scene {
	        width: 200
	        height: 200
	        content: [ Rectangle {
	            x: 10, y: 10
	            width: 140, height: 90
	            fill: Color.BLACK
	        }
	         ]
	    }
	}

四角形は、javafx.scene.shape.Rectangleクラスで表示されます。
Rectangleクラスには四角形を配置する座標を表す、変数x,y、高さと幅を表す、変数width,height、塗りつぶしの色を指定する変数fillなどがあります。

実行するとウィンドウの左上に黒く塗りつぶされた四角形が表示されます。

カスタマイズ

任意にコードをカスタマイズしてみます。
色、大きさ、配置場所を変えることができます。

	Stage {
	   title : "MyApp"
	   scene: Scene {
	       width: 400
	       height: 400
	       content: [
	           Circle {
	               centerX: 200, centerY: 200
	               radius: 150
	               fill: Color.YELLOW
	               strokeWidth: 5
	               stroke: Color.GREEN
	           },
	           Rectangle {
	               x: 100, y: 100
	               width: 200, height: 200
	               fill: Color.RED
	               stroke:Color.BLACK
	               strokeWidth:10
	               opacity: 0.7
	           }
	       ]
	   }
	}

変更、追加した内容

  • 円を表す、Circleオブジェクトを追加しました。
  • 変数centerX、centerYは円の中心を表します。
  • 変数radiusは円の半径を表します。
  • 変数fillは塗りつぶし色を表す。
  • 変数strokeWidth枠線の太さを表す。
  • 変数strokeは枠線の色を表す。
  • Rectangleオブジェクトは座標、サイズ、塗りつぶし色、枠線の色を変更しました。
    変数opacityは透明度を表します。0.0から1.0の間で透明度を指定します。0.0が完全に透明になります。

これを実行すると下記のようなアプリが実行されます。

create_shape.JPG

色のセンスがすごいですね。

いろいろなシェイプ

上記で円と四角のシェイプを作成しましたが、ほかのシェイプを作成してみます。

いろいろなシェイプ

  • Arc 円弧,扇形
  • Circle 円
  • CubicCurve? 3次パラメトリック曲線(ベジェ曲線)
  • Ellipse 楕円
  • Line 直線
  • Path 直線,曲線からなるパス
  • Polygon 多角形
  • PolyLine? 複数の直線
  • QuadCurve? 2次パラメトリック曲線(スプライン曲線)
  • Rectangle 四角形/角丸四角

自作シェイプ

提供されているAPIを利用して自分のなりのオリジナルのシェイプを作成できます。

エフェクト

さまざまな効果をつけることができます。

  • 明るく
  • 影をつける
  • セピア
  • ぼかす

などなどたくさんあります。


アクセス総数5110件

最終更新日: 2009-09-03 (木) 22:25:47 (2757d)

このページをブックマーク:

このページのURL(コピペして利用下さい):

TOP