今回は Ubuntu 24.04 上で Visual Studio Code を利用し Java でベン図を作成してみます。
▼1. Visual Studio Code を利用して Java の環境を用意
1-1. Ubuntu OS の Java の環境を用意
Java – Visual Studio Code の利用 on Ubuntu 24.04 No.109
1-2. JavaFX の環境を用意
Develop Java GUI Applications in Visual Studio Code
この項目では JavaFX アプリ作成の概要をお伝えします。上の URL にも記載があります。
1-2-1. Extension Pack for Java がインストールされていることを確認
1-2-2. Java の Project を作成
VSCode 上で、Ctrl + Shift + P のキーを押し、Java: Create Java Project を選択。
1-2-3. JavaFX のオプションを選択
ウィザードに従って、Maven を利用した JavaFX のプロジェクトを作成します。
1-2-4. Settings から java.configuration.runtimes を設定
（例）Microsoft Build OpenJDK 21 のパスを java.configuration.runtimes に指定する場合の例
1-2-5. Apache Maven をインストール
過去の blog Apache Kafka Word Count 実装 – Java No.44 の “2-3. Apache Maven のインストール” が参考になります。
2-3. Apache Maven のインストール
Maven – Download Apache Maven
# 例) Terminal から以下のコマンドを実行し Maven をインストールします。
#
wget https://dlcdn.apache.org/maven/maven-3/3.9.9/binaries/apache-maven-3.9.9-bin.tar.gz -P /tmp/
#
sudo tar xzvf /tmp/apache-maven-*.tar.gz -C /opt/
#
/opt/apache-maven-3.9.9/bin/mvn -version
# (出力結果の例)
Apache Maven 3.9.9 (xxxx)
Maven home: /opt/apache-maven-3.9.9
Java version: 21.0.5, vendor: xxx
Xxxx
#
#Apache-maven-3.9.9 の bin のディレクトリを環境変数に登録します。
# /etc/environment を vi コマンドで編集し
# PATH の末尾に /opt/apache-maven-3.9.9/bin を追加
#
sudo vi /etc/environment
#
# 環境変数の変更を反映
#
source /etc/environment ちなみに Maven をインストールしていないと “Maven executable not found in PATH” のエラーが、JavaFX のアプリ実行時に表示されます。
1-2-6. JavaFX アプリを実行し動作確認
JavaFX アプリを実行するため、Maven エクスプローラーから Plugins -> javafx -> run をクリックします。
▼2. ベン図を描画する Java コードを作成、実行
2-1. 1 で作成したサンプルの App.java をベン図を描画するコードに変更
//package com.example;
package com.example;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.effect.Blend;
import javafx.scene.effect.BlendMode;
import javafx.scene.effect.ColorInput;
import javafx.scene.shape.StrokeType;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class App extends Application {
@Override
public void start(Stage primaryStage) {
// Create the circles for the Venn diagram with frame line
Circle circle1 = new Circle(150, 150, 100);
circle1.setFill(Color.BISQUE); // BISQUE with transparency
circle1.setFill(Color.rgb(255, 0, 255, 0.5)); // Red with transparency
circle1.setStroke(Color.BLACK); // Frame line color
circle1.setStrokeWidth(2); // Frame line width
circle1.setStrokeType(StrokeType.CENTERED); // Draw stroke outside the circle
Circle circle2 = new Circle(250, 150, 100);
circle2.setFill(Color.LAVENDER); // LAVENDER with transparency
circle2.setFill(Color.rgb(0, 0, 255, 0.5)); // Blue with transparency
circle2.setStroke(Color.BLACK); // Frame line color
circle2.setStrokeWidth(2); // Frame line width
circle2.setStrokeType(StrokeType.CENTERED); // Draw stroke outside the circle
// Create a blend effect for the overlapping area
Blend blend = new Blend();
ColorInput topInput = new ColorInput();
blend.setTopInput(topInput);
// Set the blend mode to SRC_OVER
blend.setMode(BlendMode.SRC_OVER);
// Apply the blend effect to the circles
circle1.setEffect(blend);
circle2.setEffect(blend);
// Create labels for the circles
Text label1 = new Text(150, 150, "Circle 1");
label1.setFill(Color.BLACK);
label1.setStyle("-fx-font-size: 16px; -fx-font-weight: bold;");
label1.setX(circle1.getCenterX() - label1.getLayoutBounds().getWidth()*2);
label1.setY(circle1.getCenterY() + label1.getLayoutBounds().getHeight() / 4);
Text label2 = new Text(250, 150, "Circle 2");
label2.setFill(Color.BLACK);
label2.setStyle("-fx-font-size: 16px; -fx-font-weight: bold;");
label2.setX(circle2.getCenterX() + label2.getLayoutBounds().getWidth()/2);
label2.setY(circle2.getCenterY() + label2.getLayoutBounds().getHeight()/4);
Text label3 = new Text(250, 150, "Center");
label3.setFill(Color.BLACK);
label3.setStyle("-fx-font-size: 16px; -fx-font-weight: bold;");
label3.setX(circle1.getCenterX()+ label3.getLayoutBounds().getWidth()/2);
label3.setY(circle1.getCenterY() + label3.getLayoutBounds().getHeight()/4);
// Add circles to the pane
Pane pane = new Pane();
pane.getChildren().addAll(circle1, circle2, label1, label2,label3);
// Create the scene and add the pane
Scene scene = new Scene(pane, 400, 300);
// Set up the stage
primaryStage.setTitle("Venn Diagram");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void setRoot(String fxml) throws IOException {
FXMLLoader loader = new FXMLLoader(App.class.getResource(fxml + ".fxml"));
Scene scene = new Scene(loader.load());
Stage stage = (Stage) scene.getWindow();
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}2-2. 実行結果
コードを実行すると以下のような描画が表示されます。
▼3. 参考情報
- Visual Studio Code のセットアップ https://code.visualstudio.com/docs/setup/linux
- Java – Visual Studio Code の利用 on Ubuntu 24.04 No.109
- Java GUI/ JavaFX Develop Java GUI Applications in Visual Studio Code
- Color (JavaFX 8)
以上です。参考になりましたら幸いです。