Canvasによるグラフィック描画 (4/5)
作成:2015-01-17 11:08
更新:2015-01-17 11:08
更新:2015-01-17 11:08
■グラディエーションによる塗りつぶし
図形の描画でよく理解しておきたいのは、「塗りつぶしの方法」についてです。先ほどsetFillなどで色の設定をしましたが、これは「色を指定する」ものではない、ということを忘れないで下さい。「塗りつぶしのやり方」を指定するものであり、引数もColorではなく、Colorのスーパークラスである「Paint」を指定するようになっています。
ということは、Paintのサブクラスであれば、Color以外のものを指定することもできる、ということになります。その例として、「グラディエーション」のクラスを指定してみることにしましょう。
○LinearGradientクラス
これは直線的なグラディエーションを利用するためのクラスです。ある地点から別の地点へ、なめからに色が変化していくようなものを作成できます。これは以下のように記述します。
開始横 , 開始縦――グラディエーションの開始地点です。
終了横 , 終了縦――グラディエーションの終了地点です。
真偽値――均等に色を変化させていくかどうかを示します。
繰り返し方式――CycleMethodという列挙型の値を使って指定します。
リスト――色の変化情報を配列にまとめたものです。「Stop」というクラスのインスタンス用意します。
○RadialGradientクラス
これは円状に色が変化していくものです。指定した中心位置から円状に色が変化していくような表現が可能です。これは以下のように呼び出します。
フォーカス方向――円の中心から見たスタート位置の方向です。
フォーカス距離――円の中心から見たスタート位置の距離です。
中心横 , 中心縦――グラディエーションの円の中心位置です。
半径――グラディエーションの半径です。
繰り返し方式――CycleMethod列挙型による繰り返し方式の指定を行うものです。
「フォーカス」というのは、開始位置を円の中心からずらすためのものです。これで、円の中心からどっちにどれだけずらすかを指定することで、グラディエーションの開始位置を調整できます。
○CycleMethod列挙型
繰り返しの方式を指定するためのものです。これは以下の値が用意されており、そのいずれかを指定します。
NO_CYCLE――繰り返し色を変化させません。
REFRECT――開始地点の色と終了地点の色を往復して繰り返し変化させます。
REPEAT――開始地点の色から終了地点の色へ、という変化を繰り返していきます。
では、これらのグラディエーションの利用例を下にあげておきましょう。ここではLinearGradientで四角形を描き、その中にRadialGradientで円を描いています。引数が多いので難しそうに見えますが、やっていること自体は割と単純です。
ということは、Paintのサブクラスであれば、Color以外のものを指定することもできる、ということになります。その例として、「グラディエーション」のクラスを指定してみることにしましょう。
○LinearGradientクラス
これは直線的なグラディエーションを利用するためのクラスです。ある地点から別の地点へ、なめからに色が変化していくようなものを作成できます。これは以下のように記述します。
変数 = new LinearGradient( 開始横 , 開始縦 , 終了横 , 終了縦 ,
真偽値 , 繰り返し方式 , リスト );
開始横 , 開始縦――グラディエーションの開始地点です。
終了横 , 終了縦――グラディエーションの終了地点です。
真偽値――均等に色を変化させていくかどうかを示します。
繰り返し方式――CycleMethodという列挙型の値を使って指定します。
リスト――色の変化情報を配列にまとめたものです。「Stop」というクラスのインスタンス用意します。
○RadialGradientクラス
これは円状に色が変化していくものです。指定した中心位置から円状に色が変化していくような表現が可能です。これは以下のように呼び出します。
変数 = new RadialGradient( フォーカス方向 , フォーカス距離,
中心横, 中心縦 , 半径 , 真偽値 , 繰り返し方式 , リスト );
フォーカス方向――円の中心から見たスタート位置の方向です。
フォーカス距離――円の中心から見たスタート位置の距離です。
中心横 , 中心縦――グラディエーションの円の中心位置です。
半径――グラディエーションの半径です。
繰り返し方式――CycleMethod列挙型による繰り返し方式の指定を行うものです。
「フォーカス」というのは、開始位置を円の中心からずらすためのものです。これで、円の中心からどっちにどれだけずらすかを指定することで、グラディエーションの開始位置を調整できます。
○CycleMethod列挙型
繰り返しの方式を指定するためのものです。これは以下の値が用意されており、そのいずれかを指定します。
NO_CYCLE――繰り返し色を変化させません。
REFRECT――開始地点の色と終了地点の色を往復して繰り返し変化させます。
REPEAT――開始地点の色から終了地点の色へ、という変化を繰り返していきます。
では、これらのグラディエーションの利用例を下にあげておきましょう。ここではLinearGradientで四角形を描き、その中にRadialGradientで円を描いています。引数が多いので難しそうに見えますが、やっていること自体は割と単純です。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
package com.tuyano.libro;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
public class AppController implements Initializable {
@FXML Canvas canvas;
GraphicsContext gc;
@Override
public void initialize(URL location, ResourceBundle resources) {
gc = canvas.getGraphicsContext2D();
draw();
}
void draw(){
Stop[] stops1 = new Stop[] {
new Stop(0, Color.RED),
new Stop(1, Color.YELLOW)
};
LinearGradient gradient1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops1);
gc.setFill(gradient1);
gc.fillRect(50, 50, 150, 150);
Stop[] stops2 = new Stop[] {
new Stop(0, Color.BLUE),
new Stop(0.5, Color.CYAN)
};
RadialGradient gradient2 = new RadialGradient(0, 0, 125, 125, 100, false, CycleMethod.NO_CYCLE, stops2);
gc.setFill(gradient2);
gc.fillOval(75, 75, 100, 100);
}
}
※関連コンテンツ