リンクの装飾の制御

> > > > >

IlvGeneralLink により、IlvGraphic オブジェクトをリンクの相対位置に配置できます。装飾はリンクの上またはリンクの横 (デフォルト) に配置できます。

なお、decorationPosition 値を入力する構文は配列です。値のコンマ区切りリストとしてすべての値を同時に入力するか、配列エレメントを 1 つずつ入力できます。

別の配列プロパティー decorationOptions は、装飾がどのように表示されるのかを変更します。このプロパティーは、値のビット・セットであるため、以下のように垂直バー演算子 | を使用して、複数のオプションを同時に指定できます。

DECORATION_NOTHING: デフォルト値 (ズーム可能、回転なし、アニメーションなし) を意味します。
DECORATION_FIXED_SIZE: これを設定すると、装飾はズームしません。
DECORATION_ANIMATE: これを設定すると、装飾はリンクに沿って移動します。その速度は、プロパティー animateSpeed で定義します。
DECORATION_ROTATE: これを設定すると、装飾はリンク形状に従うように回転します。

オプション DECORATION_ROTATE を設定する場合は、垂直バー演算子 (|) を使用して以下のオプションのいずれかと組み合わせて、回転角度の動作を調整できます。

DECORATION_PROPORTIONAL_ANGLE: リンクの傾斜に比例して装飾を回転させます。これはラベルには適さない可能性があります。リンクが 180 度回転されると、ラベルの装飾が上下逆になって読みにくくなる可能性があるためです。
DECORATION_RIGHT_SIDE_UP_ANGLE: 装飾の上下が正しい状態を保ちながら、装飾を特定の角度回転させます。これはラベルで有用である可能性がありますが、矢印などの装飾には適さない可能性があります。

装飾をリンクの上に配置するには、オプション DECORATION_OVER を設定してから、リンクの中央に対する装飾の相対位置を制御する追加オプションを設定します。

DECORATION_ANCHOR_TOP: 装飾をリンクの中央下にシフトします。
DECORATION_ANCHOR_BOTTOM: 装飾をリンクの中央上にシフトします。
DECORATION_ANCHOR_LEFT: 装飾をリンクの中央右にシフトします。
DECORATION_ANCHOR_RIGHT: 装飾をリンクの中央左にシフトします。

以下のようにオプションを混用できます。DECORATION_ANCHOR_TOP|DECORATION_ANCHOR_LEFT は、装飾の左上隅をリンクの中央に配置します。デフォルトの動作では、装飾の中央をリンクの中央に配置します。装飾のバウンディング・ボックスに対して X 値と Y 値を使用してオフセットを適用できます。

以下の図に、3 つの装飾を示します。1 つはラベルで、残りの 2 つは同じリンク上のアイコンです。

塗りつぶす色が青で終端と結合が丸められた、2 つの垂直に位置合わせされたリンクを示す図。
背景色が青でボーダーが水色の矩形のラベルの装飾で、白色フォントの単語「smile」に続いて感嘆符が示されています。
これは、上のリンクの右端上に配置されています。下のリンクには、2 つの黄色のスマイリー・アイコンの装飾が付加されています。

リンクでの装飾

link { 
        foreground  : #55BEF3 ; 
        lineWidth   : 10 ; 
        endCap      : CAP_ROUND ; 
        lineJoin    : JOIN_ROUND ; 
        borderWidth : 2 ; 
}

link.top    { 

        decorations[0]      : @#label ; 
        decorationPositions : 0.9 ; 
}

link.center {
        visible : false
}

link.bottom { 
        decorations[0]   : @#smiley ; 
        decorations[1]   : @#smiley ; 
  decorationOptions[0]   : DECORATION_OVER ; 
  decorationOptions[1]   : DECORATION_OVER|DECORATION_ANCHOR_TOP ; 
     decorationPositions : 0.25,0.75  ; 
}


Subobject#label {
        class            : 'ilog.views.sdm.graphic.IlvGraphicFactories$ZoomableLabel' ;
        label            : "smile!" ;
        antialiasing     : true ;
        leftMargin       : 5 ;
        rightMargin      : 5 ;
        topMargin        : 5 ;
        bottomMargin     : 5 ;
        foreground       : white ;
        borderOn         : true ;
        stroke           : @=stroke ;
        strokePaint      : @=borderPaint ;
        backgroundOn     : true ;
        backgroundPaint  : @=bgPaint ;
}

// border is cyan
Subobject#borderPaint {
        class            : ilog.views.sdm.graphic.IlvPaint ;
        color            : cyan ;
}

// background is blue
Subobject#bgPaint {
        class            : ilog.views.sdm.graphic.IlvPaint ;
        color            : blue ;
}

// stroke for the text
Subobject#stroke {
        class            : ilog.views.sdm.graphic.IlvBasicStroke ;
        lineWidth        : 1 ;
}

// smiley icon
Subobject#smiley {
  class         : "ilog.views.sdm.graphic.IlvGraphicFactories$Icon"
  IlvRect       : 0,0,12,12 ; 
  imageLocation : file:smiley.gif ; 
}

IlvLabelInterface を実装している最初の装飾に迅速にアクセスする label という便利なプロパティーに着目してください。装飾が見つからない場合は、現在の decorations 配列で使用可能な最初のスロットに単純な IlvZoomableLabel が作成されます。

現在のセクション

スタイル・シートでの一般リンクのカスタマイズ