Styleクラスを使った描画スタイルの設定

ポリラインやポリゴンを表示する場合に、線の色や太さ、また塗りつぶしの色などの描画スタイルはStyleクラスを使って定義します。ここではStyleクラスの使い方について確認します。

Styleクラスは次のように定義されています。

Style(color:String, weight:Number, opacity:Number, startline:String, endline:String)

地物の描画スタイルを管理します。

Parameters:
  color  描画色
  weight  描画幅
  opacity  透過率0～1.0
  startline  始端スタイル(arrow＝矢印)
  endline  終端スタイル(arrow＝矢印)

1番目の引数には色を文字列で指定します。形式は'RRGGBB'です。赤緑青をそれぞれ00からffまでの値で指定します。例えば次のように指定します。

'ff0000'    red
'ffff00'    yellow
'808080'    gray

2番目の引数には線の太さをピクセル単位の数値で指定します。

3番目の引数には透過率を0から1.0までの数値で指定します。0に近いほど透過となり、1.0に近いほど不透過となります。

4番目と5番目の引数には線の終端スタイルを指定します。'arrow'を指定した場合は終端が矢印となりますが、他にどのような値が指定可能なのか分かっていません。

具体的には次のように記述します。

var style = new Y.Style('ff0000', 10, 0.7);

このように作成したStyleクラスのオブジェクトを、ポリラインやポリゴンなどの線の色などに指定します。具体的な使い方は次のページで確認します。