You can customize the following aspects of
network links:
Note
Color values are given as literals or
hexadecimal codes. The resulting colors are shown in the figures.
Major appearance modes
The general link has three principal looks associated with the
property
mode
. For the first two looks, the
foreground
property sets the main color.
Three main looks for links
The properties of the first look shown in
the figure are composed as follows:
mode = MODE_UNICOLOR lineWidth = 10 foreground = pink
The properties of the second look shown in
the figure are composed as follows:
mode = MODE_GRADIENT lineWidth = 10 foreground = pink
The properties of the third look shown in
the figure are composed as follows:
mode = MODE_TEXTURE lineWidth = 10 fillTexture = wood.png
The
fillTexture
property specifies the URL of an image file to use as a texture
in
TEXTURE
mode. Note that the URL does not use the URL Access Service.
An optional border
A border is painted when the
borderWidth
property is greater than
0
, the default value. The default border color is black. Two other
properties control the line style (such as dashes).
Links with simple borders
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 foreground = #90EE90 endCap = CAP_ROUND borderWidth = 4 borderColor = red
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 foreground = #90EE90 endCap = CAP_ROUND borderWidth = 4 borderColor = gray borderLineStyle = "10,5"
borderLineStyle
is expressed as a float array.
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 foreground = #90EE90 endCap = CAP_ROUND borderWidth = 2
Links with more complex borders
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 mode = MODE_UNICOLOR endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 4 borderColor = white borderColor2 = black foreground = #FFAFAF
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 mode = MODE_UNICOLOR endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 4 borderColor = white borderColor2 = black foreground = #FFC800 borderLineStyle = "10,10"
borderLineStyle
is expressed as a float array.
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 mode = MODE_UNICOLOR endCap = IlvStroke.CAP_ROUND lineJoin = IlvStroke.JOIN_ROUND borderWidth = 4 borderColor = yellow borderColor2 = blue foreground = #1EC830
End cap and join style of the stroke
The default stroke parameters are
JOIN_MITER
and
CAP_SQUARE
. You can change the end cap and join style, as shown in the
following figure.
Different values for stroke parameters
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 endCap = IlvStroke.CAP_ROUND lineJoin = IlvStroke.JOIN_ROUND borderWidth = 2 foreground = #9A9AFF
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_MITER borderWidth = 2 foreground = #9A9AFF
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_SQUARE lineJoin = JOIN_BEVEL borderWidth = 2 foreground = #9A9AFF
Curves
The
curved
property uses the link points to feed a Bezier function which
renders a curved link. Intermediate points show the path for the
Bezier computation. With two points, a standard deviation
applies, that is, at 1/4 before the end of the link. The curved
value is a float between
0f
and
1f
. A value of
0
means no curve at all (the default), and a value of
1
means the sharpest curve. Use a value of
0.65f
for an attractive curve.
Curved links
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FFDAB9 curved = 0.65 mode = MODE_UNICOLOR
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_SQUARE lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FFDAB9 curved = 0.65 lineStyle = [10,20]
lineStyle
is expressed as a float array.
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_SQUARE lineJoin = JOIN_BEVEL borderWidth = 6 foreground = #FFDAB9 curved = 0.65 borderLineStyle = [1,10]
borderLineStyle
is expressed as a float array.
Dashes
Dashes provide interesting effects together with
endCap
values. Dashes are controlled by the
lineStyle
property. They are expressed as a float array. Alternate entries
in the array represent lengths of the opaque and transparent
segments of the dashes.
Note that the dash specification also applies to the border
unless the
borderLineStyle
property overrides it.
Links with dashed line styles
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #55BEF3 lineStyle = [1,15]
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FFC800 lineStyle = [10,8,20,8]
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = red mode = MODE_UNICOLOR lineStyle = [4,4] curved = 0.65
Alternating colors
The
alternateColor
property toggles the link in alternate mode with the specified
color. The segment size equals the thickness of the link.
Otherwise, the segment size can be specified with the
lineStyle
property.
The
lineStylePhase
property sets the initial offset. If no
lineStyle
is specified, the phase is proportional to twice the line width.
In the following figure, the bottom link starts the alternate
color one segment later than the top one.
Links with alternate colors
The appropriate values for the links are
as follows.
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = yellow alternateColor = darkGray curved = 0.65
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = yellow alternateColor = darkGray curved = 0.65 lineStyle = [4,3]
lineStyle
is expressed as a float array.
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = yellow alternateColor = darkGray curved = 0.65 lineStylePhase = 1 mode = MODE_UNICOLOR
Arrows
There are four modes for representing an arrow controlled by the
arrowMode
property.
- The
ARROW_FILLmode value (the default) draws a filled triangular arrow. - The
ARROW_OPENmode value draws a two-arm arrow. - The
ARROW_GRADIENTmode value shows an oriented link by smoothly varying the luminosity along the link. The link appears darker near the source and brighter near the target. - The
ARROW_DECORATIONmode value delegates the task of displaying the arrow to one of the link decorations.
In the first two modes, the
arrowPosition
property controls the position of the arrow along the link. Its
value is a
float
between
0
and
1
. A value of
0
means the start of the link. A value of
1
means the end of the link (the default). The arrow direction is
aligned with the link segment below it.
The property
arrowRatio
controls the size of the arrow, which is proportional to the
width of the link. A float value of
0.5
means the arrow is the same size as the link. The default value
1
means the arrow is twice as wide as the link. This property
applies to all four arrow modes.
The default color of an arrow is black. The color can be set by
the property
arrowColor
.
Links with arrows
The properties of the top link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FF82AB arrowMode = ARROW_GRADIENT oriented = true
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FF82AB arrowMode = ARROW_GRADIENT oriented = true mode = MODE_UNICOLOR arrowMode = ARROW_FILL
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 2 foreground = #FF82AB arrowMode = ARROW_OPEN oriented = true arrowColor = #A3056E arrowPosition = 0.2
Waves
A wave effect is very effective for representing a wireless
connection. The wave specification consists of two numbers in
pixels representing the wave amplitude and its period. The
property type is
String
, where two integers separated by a forward slash or solidus (/)
represent the amplitude and period respectively. The effect is
rendered best with straight lines, but remains compatible with
any shape.
The wave effect can also be combined with
dashes, border, arrow, and so on.
Link with wave effect
The properties of the link in the figure
are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND borderWidth = 2 foreground = #EEAEEE wave = 20/30
Animation
A link with dashes (see the
lineStyle
property) or alternate colors (see the
alternateColor
property) can be animated. The animation consists of incrementing
the
lineStylePhase
value at regular intervals, so that the dash pattern is shifted
at each animation frame. The current implementation updates 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 the dash pattern length. For
example,
0.1
means that ten frames elapse before seeing the first frame again.
Note that
0.9
represents the same increment but in the reverse direction.
Zoom
The
maxLineWidth
property sets the maximum width of the line. The link is zoomable
only if one edge node is zoomable. Note that the link border
cannot be zoomed.
The
minLineWidth
property sets the minimum width of the line.
Special effects
MODE_NEON
is a minor mode that is a variation of
MODE_GRADIENT
. It displays the link with transparent colors, giving a glowing
effect. (This effect works best with larger links and with darker
backgrounds.) The border is automatically disabled in this mode.
Neon mode could be used to mark link selection, for example.
The preceding figures show some of the diversity offered in the
appearance of links. By combining some of the properties, you can
obtain some special effects, such as the road
link in the following figure, where the large border is the same
gray color as the link foreground and the white value of the
alternateColor
property looks like the center line of a road.
Links with special effects
The style of the top link in the figure is
composed as follows:
lineWidth = 20 endCap = CAP_ROUND lineJoin = JOIN_ROUND foreground = #FFB5C5 mode = MODE_NEON
The properties of the center link in the
figure are composed as follows:
lineWidth = 10 endCap = CAP_ROUND lineJoin = JOIN_ROUND foreground = #FFB5C5
The properties of the bottom link in the
figure are composed as follows:
lineWidth = 15 endCap = CAP_BUTT lineJoin = JOIN_ROUND borderWidth = 12 foreground = #404040 borderColor = #404040 alternateColor = white curved = 0.65 mode = MODE_UNICOLOR LineStyle = [20,10]
lineStyle
is expressed as a float array.