Lesson 7:　JavaFXを利用したグラフィックス

7.1  JavaFX の図形描画

各種の図形をそれぞれ一つのオブジェクトとして高度な機能を持たせたクラスが抽象クラス javafx.scene.shape.Shape の派生クラスとして用意されている。

また、Path の構成要素として、抽象クラス javafx.scene.shape.PathElement の派生クラスが用意されている。

各図形は、その特徴量（Circle では中心座標 centerX, centerY と半径 radius）を DoubleProperty 型の変数としてもち、値が変化するとイベントが発生して再描画したり、他のクラスのプロパティと同期を取る（値を一致させる）事ができる。（後述）

Shape 共通の Property としては、塗りつぶしの色やパターン（fill）, 境界線（stroke）があり、それぞれのセッター（例えば setFill(Color.RED）など）で特性値を設定できる。

Node 共通の Property としては、描画特性（layoutX, scaleY, opacity, rotate）、装飾（blendMode, effect）、GUI制御（cursor, focused, hover, onDragDetected, onMouseClicked, pressed）等がある。

例題１：JavaFXShapeTest.java 

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class JavaFXShapeTest extends Application {
	
  @Override
  public void start(Stage primaryStage) {

    BorderPane root = new BorderPane();

    root.setCenter( drawGraphics() ); //図形描画を一つのメソッドにまとめた一例
    // デフォルト表示枠は中心に自動調整される。デフォルトの座標原点は固定されていない。

    Scene scene = new Scene(root, 640, 480);
    primaryStage.setTitle("JavaFX Graphics");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }

  public Group drawGraphics(){ // Group に描画要素をまとめて返すメソッドを追加
    Group group = new Group(); //Groupのインスタンスを生成し、その参照をgroupに代入

    Rectangle rect = new Rectangle(300,200); // 原点に 300 x 200 の矩形を生成
    rect.setFill(Color.AQUA); // 塗りつぶし色を設定
    rect.setStroke(Color.color(0.2, .8, 0)); // 境界線の色をRGBで設定
    rect.setStrokeWidth(20); // 境界線の幅を設定
    rect.setStrokeType(StrokeType.INSIDE); // 境界線の表示形式を設定
    group.getChildren().add(rect); // group の子ノードにrectを追加

    Circle circ = new Circle(100); // 原点に半径100の円を生成
    circ.setFill(Color.rgb(255, 255, 0, 0.5)); // 塗りつぶし色RGBと透明度の設定
    circ.setStroke(Color.BLUE);
    circ.getStrokeDashArray().addAll(25.,20.,5.,20.);// 境界線の破線間隔設定
    group.getChildren().add(circ); // groupの子ノードにcircを追加

    // 座標例示
    ObservableList<Shape> shapes = FXCollections.observableArrayList();
    for(int i=0; i<3; i++){
      double x = i * 100;
      for(int j=0; j<3; j++){
        double y = j * 100;
        Circle c = new Circle(x,y,30); // 座標(x,y)に半径100の円を生成
        c.setFill(Color.color(1,0,0,0.5));
        shapes.add(c);
        Text t = new Text(x,y,"("+(int)x+","+(int)y+")");
        shapes.add(t);
      }
    }
    group.getChildren().addAll(shapes);

    return group; // groupの参照値を返す
  }
}

JavaFXShapeTestの出力

各種図形クラス（参照：JavaFX8 API Documents, javaSE-clienttechnologies）

javafx.scene.layout.Paneの派生クラス
クラス 機能、使用例
Arc 弧：Arc(centerX, centerY, radiusX, radiusY, startAngle, length) 
Arc arc = new Arc(50, 50, 25, 25,45, 270);
arc.setType(ArcType.ROUND);
Circle 円：Circle(centerX, centerY, radius, Paint fill) 
Circle circle = new Circle(100,100,50, Color.RED);
CubicCurve 3次ベジェ曲線 (Cubic Bézier curve) ：CubicCurve(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY) 
CubicCurve cubic = new CubicCurve(0, 50,25, 0, 75, 100, 100, 50);
Ellipse 楕円：Ellipse(centerX, centerY, radiusX, radiusY) 
Ellipse ellipse = new Ellipse(50,50,50,20);
Line 線分：Line(startX, startY, endX, endY) 
Line line = new Line(0, 0, 100, 100);
Path パス（PathElement のリスト）：Path(Collection<? extends PathElement> elements) 
Path path = new Path(new MoveTo(200, 10),new LineTo(300, 200));
path.getElements().add(new ArcTo(100,200,20,190,20,true,true));
path.getElements().add(new CubicCurveTo(50,100,20,190,200,150));
path.getElements().add(new QuadCurveTo(50,100,20,190));
path.getElements().add(new HLineTo(150));
path.getElements().add(new VLineTo(250));
path.getElements().add(new ClosePath());
javafx.scene.layout.PathElementの派生クラス
クラス 機能、コンストラクタ例
ArcTo 弧：ArcTo(radiusX, radiusY, xAxisRotation, x, y, boolean largeArcFlag, boolean sweepFlag)
ClosePath パスを閉じる：ClosePath()
CubicCurveTo 3次ベジェ曲線 (Cubic Bézier curve) ：CubicCurveTo( controlX1, controlY1, controlX2, controlY2, x, y)
HLineTo 水平線：HLineTo(x)
LineTo 線分：LineTo(x,y)
MoveTo 移動：MoveTo(x,y)
QuadCurveTo 2次ベジェ曲線 (Quadratic Bézier curve) ：QuadCurveTo(controlX, controlY, x, y)
VLineTo 垂直線：VLineTo(y)
Polygon 多角形：Polylgon(x1,y1, x2,y2, x3,y3, ....) 
Polygon polygon = new Polygon(100,100, 300,100, 200,300);
Polyline 折れ線：Polyline(x1,y1, x2,y2, x3,y3, ....) 
Polyline polyline = new Polyline(100,100, 300,100, 200,300);
QuadCurve ２次曲線：QuadCurve(startX, startY, controlX, controlY, endX, endY) 
QuadCurve quad = new QuadCurve(100,200, 200,100, 300,200);
Rectangle 矩形：Rectangle(x, y, width, height) 
Rectangle rect = new Rectangle(0, 0, 300, 200);
SVGPath Scalable Vector Graphics（SVG）のパスデータ： 
SVGPath svg = new SVGPath();
svg.setContent("M20,180 Q50,0,100,100 T180,20");
Text 文字列：Text(x, y, String text) 
Text text = new Text(100, 300, "GRAPHICS");

例題２：JavaFXShapeTest2.java 

//drawGraphics()で利用するクラス
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.ArcType;
import javafx.scene.shape.Circle;
import javafx.scene.shape.ClosePath;
import javafx.scene.shape.CubicCurve;
import javafx.scene.shape.CubicCurveTo;
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.StrokeType;
import javafx.scene.shape.VLineTo;
import javafx.scene.text.Text;

public class JavaFXShapeTest extends Application {
	
  // 描画メソッドのみ修正（他は省略）
  public Group drawGraphics() { 
    Group group = new Group();

    Arc arc = new Arc(50, 50, 30, 20, 45, 270);
    arc.setFill(Color.ANTIQUEWHITE);
    arc.setType(ArcType.ROUND);
    group.getChildren().add(arc);

    Circle circle = new Circle(100, 100, 50, Color.RED);
    group.getChildren().add(circle);

    CubicCurve cubic = new CubicCurve(0, 50, 25, 0, 75, 100, 100, 50);
    group.getChildren().add(cubic);

    Ellipse ellipse = new Ellipse(50, 50, 50, 20);
    ellipse.setFill(Color.rgb(255, 0, 0, 0.3));
    group.getChildren().add(ellipse);

    Line line = new Line(0, 0, 100, 100);
    group.getChildren().add(line);

    Path path = new Path(new MoveTo(200, 10), new LineTo(300, 200));
    path.getElements().add(new ArcTo(100, 200, 30, 190, 20, true, true));
    path.getElements().add(new CubicCurveTo(50, 100, 20, 190, 200, 150));
    path.getElements().add(new QuadCurveTo(50, 100, 20, 190));
    path.getElements().add(new HLineTo(150));
    path.getElements().add(new VLineTo(250));
    path.getElements().add(new ClosePath());
    group.getChildren().add(path);

    Polygon polygon = new Polygon(100, 100, 300, 100, 200, 300);
    polygon.setFill(Color.color(0, 1, 0, 0.5));
    group.getChildren().add(polygon);

    Polyline polyline = new Polyline(100, 100, 300, 100, 200, 300);
    group.getChildren().add(polyline);

    QuadCurve quad = new QuadCurve(100, 200, 200, 100, 300, 200);
    quad.setFill(Color.color(0, 0, 1, 0.5));
    group.getChildren().add(quad);

    Rectangle rect = new Rectangle(20, 100, 30, 200);
    rect.setFill(Color.color(0, 1, 1, 0.5));
    group.getChildren().add(rect);

    SVGPath svg = new SVGPath();
    svg.setContent("M20,180 Q50,0,100,100 T180,20");
    svg.setFill(Color.color(.7,.2,0.6,.5));
    group.getChildren().add(svg);
		
    Text text = new Text(100, 300, "GRAPHICS");
    group.getChildren().add(text);

    return group;
  }
}
Shape の派生クラスの描画例

参考資料：

  1. JavaFX 2で始めるGUI開発　第15回 基本的なシェイプ：ITPro Java技術最前線

7.2 JavaFX 図形のプロパティは

基本的属性（位置、変位、回転、塗色、境界線、等）の設定

例題３：JavaFXShapePropTest.java 

//drawGraphics()で利用するクラス
import javafx.geometry.Point3D;
import javafx.scene.Group;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.StrokeLineCap;
import javafx.scene.shape.StrokeLineJoin;
import javafx.scene.shape.StrokeType;

public class JavaFXShapeTest extends Application {
	
  // 描画メソッドのみ修正（他は省略）  
  public Group drawGraphics() {
    Group group = new Group();

    Rectangle rect = new Rectangle(300, 200); // 原点に300x200の矩形を生成
    //Rectangle のメソッド
    rect.setX(-100); //X座標（正で右方向）
    rect.setY(-100); //Y座標（正で下方向）
    rect.setWidth(200); //X方向の幅
    rect.setHeight(300); //Y方向の高さ
    rect.setArcWidth(100); //角の丸み（弧の幅方向の半径）
    rect.setArcHeight(80); //角の丸み（弧の高さ方向の半径）
    //Shape のメソッド
    rect.setFill(Color.BLUE); //塗りつぶし色を設定    
    rect.setSmooth(true); //図形境界のアンチエイリアス設定
    rect.setStroke(Color.color(.9, .9, 0)); //境界線の色をRGBで設定
    rect.setStrokeWidth(10); //境界線の幅を設定
    rect.setStrokeType(StrokeType.INSIDE); //境界線の表示位置を設定
    rect.setStrokeLineCap(StrokeLineCap.BUTT); //境界線の端点形状
    rect.setStrokeLineJoin(StrokeLineJoin.MITER); //境界線の接合形状
    rect.getStrokeDashArray().addAll(20.,15.,5.,15.); //境界線の破線設定
    rect.setStrokeDashOffset(10); //境界線の破線の開始位置設定
    //Node のメソッド
    rect.setLayoutX(50); //静的レイアウト位置調整（X方向）
    rect.setLayoutY(-50); //静的レイアウト位置調整（Y方向）
    rect.setTranslateX(50); //動的位置調整（X方向）
    rect.setTranslateY(50); //動的位置調整（Y方向）
    rect.setRotationAxis(new Point3D(1, 1, 1)); //３次元空間回転軸
    rect.setRotate(45); //回転角度（正で右回り）
    rect.setScaleX(1.5); //拡大・縮小倍率（X方向）
    rect.setScaleY(0.8); //拡大・縮小倍率（Y方向）
    rect.setOpacity(0.5); //透明度（０で透明、１で不透明）
    rect.setEffect(new DropShadow(20,10,30,Color.BLACK)); //特殊効果

    group.getChildren().add(rect);
    
    Rectangle sikaku = new Rectangle(-100, 80, 100, 120);
    sikaku.setStyle("-fx-fill: red;" //CSSスタイルシートによる設定
        + "-fx-stroke: green;"
        + "-fx-stroke-width: 5;"
        + "-fx-stroke-dash-array: 12 2 4 2;"
        + "-fx-stroke-dash-offset: 6;"
        + "-fx-stroke-line-cap: butt;");
    group.getChildren().add(sikaku);
    
    Circle circ = new Circle(100); 
    circ.setFill(Color.rgb(100, 255, 0, 0.5)); 
    circ.setStroke(Color.BURLYWOOD);
    circ.setStrokeWidth(10);
    circ.getStrokeDashArray().addAll(25., 20., 5., 20.);
    group.getChildren().add(circ);

    return group; // groupの参照値を返す
  }
}

参考資料：

  1. JavaFX CSS Reference Guide：ORACLE Java Documentation
  2. JavaFX 2で始めるGUI開発　 第6回 プロパティとバインド：ITPro Java技術最前線
  3. JavaFX 2で始めるGUI開発　 第9回 CSSによるスタイリング：ITPro Java技術最前線

7.3 JavaFX 表示の特殊効果

光学的装飾としてぼかし効果、輝き、反射、表面形状、色彩調整、画像挿入などを施すための javafx.scene.effect.Effect の派生クラス。 javafx.scene.Node クラスのすべての描画要素に対して setEffect(Effect effect) で適用可能。

例題４：特殊効果例（Text を対象として例示しているが、Node クラスとそのサブクラスすべてに適用可能） 

//drawGraphics()で利用するクラス
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.effect.Blend;
import javafx.scene.effect.BlendMode;
import javafx.scene.effect.Bloom;
import javafx.scene.effect.BlurType;
import javafx.scene.effect.BoxBlur;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.effect.ColorInput;
import javafx.scene.effect.DisplacementMap;
import javafx.scene.effect.DropShadow;
import javafx.scene.effect.FloatMap;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.Glow;
import javafx.scene.effect.InnerShadow;
import javafx.scene.effect.Light;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.MotionBlur;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.effect.Reflection;
import javafx.scene.effect.SepiaTone;
import javafx.scene.effect.Shadow;
import javafx.scene.layout.FlowPane;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;

public class JavaFXShapeTest extends Application {
	
  // 描画メソッドのみ修正（他は省略）  
  public Group drawGraphics() {
    Group group = new Group();
    // 後でまとめて書式設定するために、Textのリストを作成しておく。
    ObservableList<Text> texts = FXCollections.observableArrayList();
    // つや
    Bloom bloom = new Bloom(0.1);
    Text tb = new Text("Bloom");
    tb.setEffect(bloom);
    texts.add(tb);
    // 輝き
    Glow glow = new Glow(0.9);
    Text tg = new Text("Glow");
    tg.setEffect(glow);
    texts.add(tg);
    // ライティング
    Light.Distant light = new Light.Distant();
    light.setAzimuth(-135.0);
    Lighting lighting = new Lighting(light);
    lighting.setSurfaceScale(10.0);
    Text tl = new Text("Lighting");
    tl.setEffect(lighting);
    texts.add(tl);
    // ColorInput 矩形領域に彩色
    FlowPane fpl = new FlowPane(30, 5);
    fpl.setEffect(new ColorInput(-10, 0, 200, 60, Color.GRAY));
    fpl.getChildren().addAll(texts);
    group.getChildren().addAll(fpl);
    // 横方向・縦方向のぼかし
    BoxBlur boxblur = new BoxBlur(5, 15, 1);
    Text tt = new Text("BoxBlur");
    tt.setEffect(boxblur);
    texts.add(tt);
    // ガウス分布的ぼかし
    GaussianBlur gaussianblur = new GaussianBlur(10);
    tt = new Text("GaussianBlur");
    tt.setEffect(gaussianblur);
    texts.add(tt);
    // 移動方向へのぼかし
    MotionBlur motionblur = new MotionBlur(45, 20);
    tt = new Text("MotionBlur");
    tt.setEffect(motionblur);
    texts.add(tt);
    // 影
    Shadow shadow = new Shadow(BlurType.GAUSSIAN, Color.BLACK, 10);
    tt = new Text("Shadow");
    tt.setEffect(shadow);
    texts.add(tt);
    // 背景に陰影追加
    DropShadow dropshadow = new DropShadow(BlurType.GAUSSIAN, Color.GRAY, 10, 0.3, 10, 10);
    tt = new Text("DropShadow");
    tt.setEffect(dropshadow);
    texts.add(tt);
    // 内部の陰影
    InnerShadow innershadow = new InnerShadow(BlurType.GAUSSIAN, Color.AQUA, 10, 0.3, 5, 5);
    tt = new Text("InnerShadow");
    tt.setEffect(innershadow);
    texts.add(tt);
    // 床面の反射
    Reflection reflection = new Reflection(0, .7, .7, 0.);
    tt = new Text("Reflection");
    tt.setEffect(reflection);
    texts.add(tt);
    // 変位面への写像
    int w = 300, h = 100;
    FloatMap floatMap = new FloatMap(w, h);
    for (int i = 0; i < w; i++) {
      double v = (Math.sin(i / 20.0 * Math.PI) - 0.5) / 40.0;
      for (int j = 0; j < h; j++) {
        floatMap.setSamples(i, j, 0.0f, (float) v);
      }
    }
    DisplacementMap dpmap = new DisplacementMap();
    dpmap.setMapData(floatMap);
    tt = new Text("DisplacementMap");
    tt.setEffect(dpmap);
    texts.add(tt);
    // 遠近法的変換
    PerspectiveTransform perspect = new PerspectiveTransform(300,-60,600,-30,600,-10,300,20);
    tt = new Text("PerspectiveTransform");
    tt.setEffect(perspect);
    texts.add(tt);
    // 色調整
    ColorAdjust coloradjust = new ColorAdjust(0.5,0.5,0.5,0.5);
    tt = new Text("ColorAdjust");
    tt.setEffect(coloradjust);
    texts.add(tt);
    // セピア色変換
    SepiaTone sepiatone = new SepiaTone(0.9);
    tt = new Text("SepiaTone");
    tt.setEffect(sepiatone);
    texts.add(tt);
    // 複合効果
    Blend blend = new Blend(BlendMode.ADD, innershadow, dropshadow);
    tt = new Text("Blend of Inner & Drop Shadow");
    tt.setEffect(blend);
    texts.add(tt);
    // フォント、文字色設定
    for (Text t : texts) {
      t.setFont(Font.font("verdana", FontWeight.BOLD, 42));
      t.setFill(Color.BLUE);
    }
    // FlowPane でレイアウト
    FlowPane fp = new FlowPane(30,5);
    fp.getChildren().addAll(texts);
    group.getChildren().add(fp); // group の子ノードに fp を追加
    return group; // groupの参照値を返す
  }
}

特殊効果

javafx.scene.effect.Effectの派生クラス
クラス 機能、使用例
Blend 複合効果：Blend(BlendMode mode, Effect bottomInput, Effect topInput) 
Blend blend = new Blend(BlendMode.ADD, innershadow, dropshadow);
Bloom つや、輝き：Bloom( threshold ) 
Bloom bloom = new Bloom(0.1);
BoxBlur 横方向・縦方向のぼかし：BoxBlur(width, height, int iterations) 
BoxBlur boxblur = new BoxBlur(5, 15, 1);
ColorAdjust 色調整：ColorAdjust(hue, saturation, brightness, contrast) 
ColorAdjust coloradjust = new ColorAdjust(0.5, 0.5, 0.5, 0.5);
ColorInput 矩形領域の彩色 
ColorInput colorinput = new ColorInput(-10, 0, 200, 60, Color.GRAY);
DisplacementMap 変位面への写像：DisplacementMap(FloatMap mapData, offsetX, offsetY, scaleX, scaleY) 
int w = 300, h = 100;
FloatMap floatMap = new FloatMap(w, h);
for (int i = 0; i < w; i++) {
  double v = (Math.sin(i / 20.0 * Math.PI) - 0.5) / 40.0;
  for (int j = 0; j < h; j++) {
    floatMap.setSamples(i, j, 0.0f, (float) v);
  }
}
DisplacementMap dpmap = new DisplacementMap();
dpmap.setMapData(floatMap);
DropShadow 背面への陰影：DropShadow(BlurType blurType, Color color, radius, spread, offsetX, offsetY) 
DropShadow dropshadow = new DropShadow(BlurType.GAUSSIAN, Color.GRAY, 10, 0.3, 10, 10);
GaussianBlur ガウス分布的ぼかし：GaussianBlur( radius ) 
GaussianBlur gaussianblur = new GaussianBlur(10);
Glow 輝き：Glow( level ) 
Glow glow = new Glow(0.9);
ImageInput 他の特殊効果への画像挿入：ImageInput(Image source, x, y) 
ImageInput imageinput = new ImageInput(image, 0, 0);
InnerShadow 内部の陰影：InnerShadow(BlurType blurType, Color color, radius, choke, offsetX, offsetY) 
InnerShadow innershadow = new InnerShadow(BlurType.GAUSSIAN, Color.AQUA, 10, 0.3, 5, 5);
Lighting ライティング：Lighting(Light light) 
Light.Distant light = new Light.Distant();
light.setAzimuth(-135.0);
Lighting lighting = new Lighting(light);
lighting.setSurfaceScale(10.0);
MotionBlur 移動方向へのぼかし：MotionBlur(angle, radius) 
MotionBlur motionblur = new MotionBlur(45, 20);
PerspectiveTransform 遠近法的変換：PerspectiveTransform(ulx, uly, urx, ury, lrx, lry, llx, lly)：upper/lower/left/right 
PerspectiveTransform perspect = new PerspectiveTransform(300, -60, 600, -30, 600, -10, 300, 20);
Reflection 床面での反射：Reflection( topOffset, fraction, topOpacity, bottomOpacity) 
Reflection reflection = new Reflection(0, .7, .7, 0.);
SepiaTone セピア色変換：SepiaTone( level ) 
SepiaTone sepiatone = new SepiaTone(0.9);
Shadow 影：Shadow(BlurType blurType, Color color, double radius) 
Shadow shadow = new Shadow(BlurType.GAUSSIAN, Color.BLACK, 10);

参考資料：

  1. JavaFX: Using Text in JavaFX：ORACLE Java Documentation
  2. JavaFX: Applying Effects to Text：ORACLE Java Documentation
  3. JavaFX: Creating Visual Effects：ORACLE Java Documentation
  4. JavaFX 2で始めるGUI開発　第11回 エフェクトとトランスフォーム：ITPro Java技術最前線

7.4 JavaFX コントロールを利用したプロパティの調整

描画要素のプロパティをGUIで制御する。

例題５： 

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class JavaFXShapeCtrlTest extends Application {

  @Override
  public void start(Stage primaryStage) {

    Rectangle rect = new Rectangle(200, 100);

    Label label1 = new Label("回転");
    Slider slrot = new Slider(-180, 180, 0);
    slrot.setMaxWidth(400);
    slrot.setMajorTickUnit(90);
    slrot.setShowTickLabels(true);
    slrot.setShowTickMarks(true);
    rect.rotateProperty().bind(slrot.valueProperty());

    Label label2 = new Label("拡大・縮小");
    Slider slsclx = new Slider(0, 2, 1);
    slsclx.setMaxWidth(400);
    slsclx.setMajorTickUnit(1);
    slsclx.setShowTickLabels(true);
    slsclx.setShowTickMarks(true);
    rect.scaleXProperty().bind(slsclx.valueProperty());

    Label label3 = new Label("塗り色");
    ColorPicker cp = new ColorPicker(Color.BLACK);
    cp.setVisible(true);
    cp.setOnAction((ActionEvent t) -> {
      rect.setFill(cp.getValue());
    });

    GridPane gpc = new GridPane();
    gpc.setPadding(new Insets(10));
    gpc.setAlignment(Pos.CENTER);
    gpc.setPrefSize(600, 200);
    gpc.setHgap(10);
    gpc.setVgap(10);
    gpc.add(label1, 0, 0);
    gpc.add(slrot, 1, 0);
    gpc.add(label2, 0, 1);
    gpc.add(slsclx, 1, 1);
    gpc.add(label3, 0, 2);
    gpc.add(cp, 1, 2);

    BorderPane root = new BorderPane();
    root.setCenter(rect);
    root.setBottom(gpc);

    Scene scene = new Scene(root, 640, 480);
    primaryStage.setTitle("計算機実習Ⅰ Lesson7 例題５");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

7.5 練習課題

課題レポート：複数の図形、テキストに異なる特殊効果を適用したCGを表示するプログラムを作成しなさい。一つのクラスにまとめても、複数のクラス、ファイルに分割しても良い。完成したjavaソースコードファイルを moodle の課題画面からオンライン提出しなさい。