JavaFX入門：2Dシェイプのストロークライン結合（StrokeLineJoin）プロパティの使い方

複数の線分を組み合わせて描画されるシェイプでは、ストロークライン結合（stroke line join）プロパティによって、2つの線が交わる接合部の形状を指定できます。このプロパティは、setStrokeLineJoin()メソッドを使って設定します。

JavaFXでは、Enum型のStrokeLineJoinに定義された3つの定数により、3種類のライン結合スタイルがサポートされています。それぞれの特徴は以下のとおりです。

1. BEVEL（ベベル）

交差部分の外側の2つの辺を、直線的な線分でつなぐスタイルです。角が平らに切り落とされたような外観になります。

2. MITER（マイター）

交差部分の外側の2つの辺をそのまま延長して組み合わせ、先の尖った鋭い角を形成するスタイルです。JavaFXのデフォルト値もこのMITERです。

3. ROUND（ラウンド）

交差部分の外側の角を丸めて滑らかに接合するスタイルです。このときの丸みの半径は、結合部の幅（ストローク幅）のちょうど半分になります。

サンプルコード

以下は、菱形（ひし形）ポリゴンに対して3種類のライン結合を適用し、その見た目の違いを比較するJavaFXアプリケーションの例です。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.StrokeLineJoin;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class StrokeLineJoinExample extends Application {
    public void start(Stage stage) {
        Font font = Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 12);
        Text label1 = new Text("Original Image");
        label1.setFont(font);
        label1.setX(250.0);
        label1.setY(125.0);
        Polygon rhombus1 = new Polygon(300.0, 0.0, 250.0, 50.0, 300.0, 100.0, 350.0, 50.0);
        Text label2 = new Text("Line Join: Round");
        label2.setFont(font);
        label2.setX(25.0);
        label2.setY(275.0);
        Polygon rhombus2 = new Polygon(100.0, 150.0, 50.0, 200.0, 100.0, 250.0, 150.0, 200.0);
        rhombus2.setStroke(Color.BLUE);
        rhombus2.setStrokeWidth(20);
        rhombus2.setStrokeLineJoin(StrokeLineJoin.ROUND);
        Text label3 = new Text("Line Join: Bevel");
        label3.setFont(font);
        label3.setX(250.0);
        label3.setY(275.0);
        Polygon rhombus3 = new Polygon(300.0, 150.0, 250.0, 200.0, 300.0, 250.0, 350.0, 200.0);
        rhombus3.setStroke(Color.BLUE);
        rhombus3.setStrokeWidth(20.0);
        rhombus3.setStrokeLineJoin(StrokeLineJoin.BEVEL);
        Text label4 = new Text("Line Join: Miter");
        label4.setFont(font);
        label4.setX(430.0);
        label4.setY(275.0);
        Polygon rhombus4 = new Polygon(490.0, 150.0, 440, 200.0, 490.0, 250.0, 540.0, 200.0);
        rhombus4.setStroke(Color.BLUE);
        rhombus4.setStrokeWidth(20.0);
        rhombus4.setStrokeLineJoin(StrokeLineJoin.MITER);
        // Groupオブジェクトの作成
        Group root = new Group(label1, label2, label3, label4, rhombus1, rhombus2, rhombus3, rhombus4);
        // Sceneオブジェクトの作成
        Scene scene = new Scene(root, 595, 310);
        // Stageにタイトルを設定
        stage.setTitle("Stroke Line Join");
        // SceneをStageに追加
        stage.setScene(scene);
        // Stageの内容を表示
        stage.show();
    }
    public static void main(String args[]){
        launch(args);
    }
}

実行結果

このプログラムを実行すると、次のようなウィンドウが表示されます。上段はストロークを設定していない元の図形、下段は左から「ROUND」「BEVEL」「MITER」を適用した図形です。太いストローク（幅20）を設定しているため、各頂点における結合部の形状の違いがはっきりと確認できます。

まとめ

ストロークライン結合プロパティを使いこなすことで、線分やポリゴンの角の仕上がりを細かく制御できます。鋭い角が必要な場合はMITER、角を切り落としたデザインにしたい場合はBEVEL、柔らかい印象にしたい場合はROUNDを選択するとよいでしょう。