JavaFXで長方形を描画する方法！Rectangleクラスの使い方を解説

長方形（Rectangle）とは、4つの辺を持つ閉じた多角形で、隣り合う2つの辺がなす角はすべて直角（90度）、向かい合う辺は平行で長さが等しい図形です。長方形は、垂直方向の辺の長さを表す「高さ（height）」と、水平方向の辺の長さを表す「幅（width）」という2つの要素によって定義されます。

JavaFXのRectangleクラスとは

JavaFXでは、長方形は javafx.scene.shape.Rectangle クラスによって表現されます。このクラスには、長方形の位置と大きさを決定するための、以下の4つの主要なプロパティが用意されています。

• height（高さ） − 長方形の垂直方向の辺の長さを表します。setHeight() メソッドで値を設定できます。

• width（幅） − 長方形の水平方向の辺の長さを表します。setWidth() メソッドで値を設定できます。

• x − 長方形の左上隅のX座標を表します。setX() メソッドで値を設定できます。

• y − 長方形の左上隅のY座標を表します。setY() メソッドで値を設定できます。

長方形を作成する基本的な手順

1. Rectangle クラスをインスタンス化します。

2. setterメソッドを使用するか、コンストラクタの引数として値を渡して、必要なプロパティを設定します。

3. 作成したノード（図形）を Group オブジェクトに追加します。

長方形を描画するサンプルコード

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;

public class DrawingRectangle extends Application {
    public void start(Stage stage) {
        // 長方形を描画
        Rectangle shape = new Rectangle();
        // 長方形のプロパティを設定
        shape.setX(150.0f);
        shape.setY(75.0f);
        shape.setWidth(300.0f);
        shape.setHeight(150.0f);
        // その他のプロパティを設定
        shape.setFill(Color.DARKCYAN);
        shape.setStrokeWidth(8.0);
        shape.setStroke(Color.DARKSLATEGREY);
        // シーンを設定
        Group root = new Group(shape);
        Scene scene = new Scene(root, 595, 300, Color.BEIGE);
        stage.setTitle("長方形の描画");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String args[]){
        launch(args);
    }
}

実行結果

このコードでは、座標 (150, 75) を左上隅として、幅300ピクセル・高さ150ピクセルの長方形を描画しています。塗りつぶし色にダークシアン（DARKCYAN）、枠線にダークスレートグレー（DARKSLATEGREY）を指定し、線幅を8.0に設定することで、視覚的に分かりやすい図形になっています。

角丸長方形（Rounded Rectangle）を描画する

前述のプロパティに加えて、Rectangleクラスには長方形の四隅を丸めるためのプロパティがさらに2つ用意されています。

• arcWidth − 四隅の角丸（円弧）の直径（水平方向のサイズ）を表します。setArcWidth() メソッドで値を設定できます。

• arcHeight − 四隅の角丸（円弧）の高さ（垂直方向のサイズ）を表します。setArcHeight() メソッドで値を設定できます。

これらのプロパティに値を設定することで、角が丸みを帯びた（アーチ状になった）長方形を簡単に描画できます。

角丸長方形のサンプルコード

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;

public class DrawingRoundedRectangle extends Application {
    public void start(Stage stage) {
        // 角丸長方形を描画
        Rectangle shape = new Rectangle();
        // 長方形のプロパティを設定
        shape.setX(150.0f);
        shape.setY(75.0f);
        shape.setWidth(300.0f);
        shape.setHeight(150.0f);
        // 角丸のサイズを設定
        shape.setArcHeight(30.0);
        shape.setArcWidth(30.0);
        // その他のプロパティを設定
        shape.setFill(Color.DARKCYAN);
        shape.setStrokeWidth(8.0);
        shape.setStroke(Color.DARKSLATEGREY);
        // シーンを設定
        Group root = new Group(shape);
        Scene scene = new Scene(root, 595, 300, Color.BEIGE);
        stage.setTitle("角丸長方形の描画");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String args[]){
        launch(args);
    }
}

実行結果

先ほどのコードに setArcWidth(30.0) と setArcHeight(30.0) の2行を追加しただけで、四隅が滑らかに丸められた長方形になります。arcWidthとarcHeightの値を大きくするほど角丸の半径が大きくなり、値を幅・高さの半分以上に近づけると、ほぼ楕円のような形状に変化していきます。UIデザインにおいて、ボタンやカードなど柔らかい印象を持たせたい要素に角丸長方形はよく活用されるので、ぜひ覚えておきましょう。