The extra effects available for a link are:
Waves
The wave effect is very effective for
representing a wireless connection. The wave specification
consists of two numbers: the wave amplitude and its period, in
pixels. The property type is a String where two integers
separated by “/” represent, respectively, amplitude and period.
The effect renders best with straight lines but remains
compatible with any shape.
The wave effect can also be mixed with
dashes, border, arrow, and so on.
The wave effect for a link with a
border
Basic link properties and the wave
property
link {
lineWidth : 10 ;
endCap : CAP_ROUND ;
lineJoin : JOIN_ROUND ;
foreground : 238,174,238 ;
borderWidth : 2 ;
}
link.top {
visible : false ;
}
link.center {
borderWidth : 2 ;
wave : 20/30 ;
}
link.bottom {
visible : false ;
}
Animation
You can animate a link with dashes (see the
lineStyle
property) or alternate colors (see the
alternateColor
property). The animation consists of incrementing the
lineStylePhase
value at regular intervals, so that the pattern is shifted at
each animation frame. The current implementation updates the
pattern every 500 ms.
The
animateSpeed
property controls animation of the link and how much the phase is
incremented. If the value is
0
, the animation is stopped. Otherwise, the value must be between
0f
and
1f
, and represents a fraction of dash pattern length. For example,
0.1
means that ten frames pass before you see the first frame again.
Note that
0.9
represents the same increment but in the backward direction.
Zoom
IlvGeneralLink inherits from IlvLinkImage, and keeps its zoom behavior.
In particular, the
maximumLineWidth
property sets the maximum size of the line. Also, the link is
zoomable only if one edge node is zoomable. Note that the link
border thickness does not zoom. The border line style and the
link line style follow the zoom level of the link.
Neon effect and road effect
MODE_NEON
is a minor mode which is a variation of
MODE_GRADIENT
. It displays the link with transparent colors, giving a glowing
effect (this works best with larger links and with darker
backgrounds). The border is automatically disabled in this mode.
An example of using Neon mode is to mark link selection, as shown
in the top link in figureThe wave effect for a link with a border.
(The second link shows the same link when it is not selected.)
Previous examples already demonstrated some of the many
possibilities that the link appearance offers. By combining some
of the properties, you can achieve some fancy effects, such as
the “road” link in figure The wave effect for a link with a border,
where the large border is the same gray color as the link
foreground, and the white
alternateColor
looks like the middle line of a road.
The neon effect
Selected (neon) and not selected links,
and a road link
link {
lineWidth : 10 ;
lineJoin : JOIN_ROUND ;
endCap : CAP_ROUND ;
foreground : 255,181,197 ;
}
link.top {
mode : MODE_NEON ;
lineWidth : 20 ;
}
link.center {
borderWidth : 1 ;
}
link.bottom {
mode : MODE_UNICOLOR;
endCap : CAP_BUTT ;
lineWidth : 15 ;
foreground : darkGray ;
lineStyle : 20,10;
lineStylePhase : 5 ;
alternateColor : white ;
borderWidth : 12 ;
borderUpColor : darkGray ;
curved : 0.65 ;
}