シェイプを使ったベクターグラフィック (3/6)
作成:2015-04-04 11:46
更新:2015-04-04 11:46
更新:2015-04-04 11:46
■直線・曲線のシェイプ
円や四角はとてもシンプルな図形ですが、より複雑な図形を必要とすることもあります。そうした場合に用いられるのが、「直線の多角形（ポリゴン）」や「曲線」のシェイプでしょう。
これらのシェイプは、位置情報に関する属性が非常にたくさん必要になり、それだけ記述も複雑になってきます。以下に使い方を整理しておきましょう。
●直線（多角形）のシェイプ「Polygon」「Polyline」
複数の点を直線で結ぶ多角形を描くためのものです。Polygonは開始地点と終了地点を結ぶ「閉じた図形」を描き、Polylineは両端を結ばない「開放された図形」を描きます。基本的な使い方はどちらもほぼ同じです。
これらをFXMLで記述する場合には、開始タグと終了タグの間に<points>というタグを用意し、更にその中に<Double>タグを使って各位置の縦横の位置情報を記述していきます。
●曲線のシェイプ「QuadCurve」「CubicCurve」
曲線は2種類のシェイプが用意されています。「QuadCurve」は、2次曲線を描くためのものです。これは開始点と終了点の２点の他、１つのコントロールポイントを使って描かれます。Arcで描く円弧のような曲線になります。
「CubicCurve」は、３次曲線を描くためのものです。これは開始点と終了点の他、２つのコントロールポイントを使って描かれます。いわゆるベジエ曲線と呼ばれるのがこれにあたります。
これらは開始点と終了点、そしてコントロールポイントの位置をすべて属性として記述して作成します。
startX――開始地点の横位置を指定します。
startY――開始地点の縦位置を指定します。
endX――終了地点の横位置を指定します。
endY――終了地点の縦位置を指定します。
・QuadCurveの場合
controlX――コントロールポイントの横位置を指定します。
controlY――コントロールポイントの縦位置を指定します。
・CubicCurveの場合
controlX1――第1コントロールポイントの横位置を指定します。
controlY1――第1コントロールポイントの縦位置を指定します。
controlX2――第2コントロールポイントの横位置を指定します。
controlY2――第2コントロールポイントの縦位置を指定します。
下に、PolygonとCubicCurveを表示するFXMLのサンプルを挙げておきましょう。<Polygon>タグでは、その中に<points>タグがあり、更にその中に<Double>タグを使って、各頂点の横位置と縦位置を順に記述しています。書き方がちょっとわかりにくいのでよくタグの構造を理解して使いましょう。
これらのシェイプは、位置情報に関する属性が非常にたくさん必要になり、それだけ記述も複雑になってきます。以下に使い方を整理しておきましょう。
●直線（多角形）のシェイプ「Polygon」「Polyline」
複数の点を直線で結ぶ多角形を描くためのものです。Polygonは開始地点と終了地点を結ぶ「閉じた図形」を描き、Polylineは両端を結ばない「開放された図形」を描きます。基本的な使い方はどちらもほぼ同じです。
これらをFXMLで記述する場合には、開始タグと終了タグの間に<points>というタグを用意し、更にその中に<Double>タグを使って各位置の縦横の位置情報を記述していきます。
●曲線のシェイプ「QuadCurve」「CubicCurve」
曲線は2種類のシェイプが用意されています。「QuadCurve」は、2次曲線を描くためのものです。これは開始点と終了点の２点の他、１つのコントロールポイントを使って描かれます。Arcで描く円弧のような曲線になります。
「CubicCurve」は、３次曲線を描くためのものです。これは開始点と終了点の他、２つのコントロールポイントを使って描かれます。いわゆるベジエ曲線と呼ばれるのがこれにあたります。
これらは開始点と終了点、そしてコントロールポイントの位置をすべて属性として記述して作成します。
startX――開始地点の横位置を指定します。
startY――開始地点の縦位置を指定します。
endX――終了地点の横位置を指定します。
endY――終了地点の縦位置を指定します。
・QuadCurveの場合
controlX――コントロールポイントの横位置を指定します。
controlY――コントロールポイントの縦位置を指定します。
・CubicCurveの場合
controlX1――第1コントロールポイントの横位置を指定します。
controlY1――第1コントロールポイントの縦位置を指定します。
controlX2――第2コントロールポイントの横位置を指定します。
controlY2――第2コントロールポイントの縦位置を指定します。
下に、PolygonとCubicCurveを表示するFXMLのサンプルを挙げておきましょう。<Polygon>タグでは、その中に<points>タグがあり、更にその中に<Double>タグを使って、各頂点の横位置と縦位置を順に記述しています。書き方がちょっとわかりにくいのでよくタグの構造を理解して使いましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<?xml version="1.0" encoding="UTF-8"?> <?import java.lang.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.shape.*?> <?import javafx.scene.shape.Ellipse?> <?import javafx.scene.shape.Line?> <?import javafx.scene.shape.Polygon?> <?import javafx.scene.shape.CubicCurve?> <Pane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.tuyano.libro.AppController"> <Polygon fill="RED"> <points> <Double fx:value="110.0" /> <Double fx:value="10.0" /> <Double fx:value="210.0" /> <Double fx:value="20.0" /> <Double fx:value="150.0" /> <Double fx:value="100.0" /> </points> </Polygon> <CubicCurve fill="YELLOW" stroke="BLUE" strokeWidth="5" startX="50" startY="50" endX="200" endY="200" controlX1="200" controlY1="50" controlX2="50" controlY2="200" /> </Pane>
※関連コンテンツ