【JavaFX】グラデーションの適用

本稿では、JavaFXでグラデーションの実装方法について確認します。

線形グラデーション

線形グラデーションはLinearGradientクラスを利用します。

new LinearGradient(始点x座標,始点y座標,終点x座標,終点y座標
,プロポーショナルかどうか
,グラデーションのサイクル
,色配分するStopオブジェクト…
)

と指定します。

まずグラデーションの始点と終点ですがこれはプロポーショナルのフラグによって意味が変わります。trueの場合は描画図形の座標割合で指定し、falseの場合は絶対座標で指定します。swingやawtに慣れている人はfalseにしておけばいいでしょう。trueのほうは相対的な座標に変換される為、覚えておけば多少便利な場面もあるかもしれません。

グラデーションのサイクルですが
CycleMethod.NO_CYCLE
CycleMethod.REPEAT
CycleMethod.REFLECT
から選択できます。

これについてはサンプルを用意するので、そちらをご覧ください。

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

public class Test extends Application{

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

	@Override
	public void start(Stage primaryStage) {
		View v = new View();
		Scene scene = new Scene(v, 400, 300);
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

class View extends Group{
	public View() {
		LinearGradient lg = new LinearGradient(0, 0, 200, 150, false, CycleMethod.NO_CYCLE
				, new Stop(0, Color.ORANGE)
				, new Stop(1, Color.VIOLET)
		);

		Rectangle rect = new Rectangle(50,50,300,200);
		rect.setFill(lg);
		getChildren().add(rect);
	}
}
実行結果(NO_CYCLE)

REFLECTを指定したとき

REPEATを指定したとき

円放射状グラデーション

RadialGradientを利用すると円放射状グラデーションを実装できます。

new RadialGradient(
色の開始角度, 色の開始角度の方向にどれくらい離れた座標に開始地点を置くか
中心点x,中心点y,半径
,プロポーショナルかどうか
,グラデーションのサイクル
,色配分するStopオブジェクト…
)

最初の二つの引数がよくわからなかったですが、色の開始位置をずらすことができるようです。

あとは中心点と半径、その他の引数は線形グラデーションのときのを参考にすれば想定通りに処理が作れそうです。

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

public class Test extends Application{

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

	@Override
	public void start(Stage primaryStage) {
		View v = new View();
		Scene scene = new Scene(v, 400, 300);
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

class View extends Group{
	public View() {
		RadialGradient rg = new RadialGradient(90,200,200,150,100,false,CycleMethod.NO_CYCLE,
				new Stop(0,Color.BLUE)
				, new Stop(1, Color.RED)
		);

		Rectangle rect = new Rectangle(50,50,300,200);
		rect.setFill(rg);
		getChildren().add(rect);
	}
}
実行結果

サンプルでは中心点から90度の方向(つまり真下)に200離れた場所からグラデーションを開始するようにしました。

JavaJavaFX

Posted by nompor