JavaFX チュートリアル〜今度こそ、初めてでも大丈夫2:Label〜

イントロダクション

以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。

初心者向けというのもあり、以下の手順で進めやすいように作ったつもりです。

  1. 基本のコードを写経する
  2. 動かす
  3. 〜を修正して〜する
  4. 起動確認
  5. ソースの意味を理解
  • こんな感じで進めると分かりやすいと思います。
  • 前回はラベルを表示しました。そして今回もラベルを表示します。ただし

    回転したり大きくしたりします

    チュートリアル

    ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。

    <Oracleのチュートリアル>

    基本のコード

    public class Lv1_Label2 extends Application {
    /**
    * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品)
    * のメソッドをオーバーライドする。
    * {@link Application#launch(String...)}から呼び出される。
    */
    @Override
    public void start(Stage primaryStage) throws Exception {
        // チュートリアルには省略されている部分
        Group group = new Group();
        // この部分がチュートリアルに記載されている。
        // Fontを使用する方法
        Label label1 = new Label();
        label1.setFont(new Font("Aeial", 30));
        label1.setText("Text1");
        group.getChildren().add(label1);
        // チュートリアルでは省略されている
        Scene scene = new Scene(group, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.setTitle("チュートリアル1");
        primaryStage.show();
    }
    /**
    * メインメソッド。
    * Apllicationクラスのlaunchメソッドを呼び出す。
    *
    * @param args プログラム引数
    */
    public static void main(String[] args) {
        launch(args);
    }
    }

    これだけで起動すると下のように表示されます。

    ![](http://zenryokuservice.com/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-04-21.29.59-275x300.png)

    そして上のコードに3行追加します。

    // 位置を指定する
    label1.setTranslateX(60);
    label1.setTranslateY(60);
    // 回転させる
    label1.setRotate(45.0);

    すると下のように表示されます。

    ![](http://zenryokuservice.com/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-04-21.32.19-277x300.png)

    setTranslateX(表示するX座標)とsetTranslateY(表示するY座標)を指定することでテキストの表示する位置を変更します。

    表示する画面の左上の端が(0, 0)になります。なのでテキストの中心位置が(60, 60) かつ、角度が45度下に下がった状態で画面上に表示されています。

    試しに「45」を「-45」に変更してみます。

    ![](http://zenryokuservice.com/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-04-21.37.12-280x300.png)

    上のようになりました。そのほかにもいじってみると表示結果が変わります。

    大きくする

    基本のコードに下の行を追加します。

    label1.setScaleX(1.5);
label1.setScaleY(1.5);

    実行結果はこんな感じです。

    ![](http://zenryokuservice.com/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-05-19.47.49-282x300.png)

    ラベルが見切れてしまいました。なので下のコードでテキストの位置をずらします。

    label1.setLayoutX(20.0); // Xを20右に移動
    label1.setLayoutY(30.0); // Yを30下に下げる
    

    ![](http://zenryokuservice.com/wp/wp-content/uploads/2019/03/スクリーンショット-2019-03-05-19.47.17-277x300.png)

    とりあえず今回は、ここで終わりにします。

    でわでわ。。。