Rogue Wave JViews Maps  > Programmer's documentation > Developing with the JViews Diagrammer SDK > Using CSS syntax in the style sheet > Customizing general nodes in the style sheet > Controlling the node’s skin
INDEX | PREVIOUS  NEXT

Controlling the node’s skin

The following properties control the way colors are used in the shape: fillStyle , fillColor1 , fillColor2 , fillStart , fillEnd , fillAngle , and fillTexture .
The fillStyle property specifies the type of Paint object used to fill the shape. The possible values are as listed:
fillStyle : “SOLID_COLOR”;
Round rectangle with a solid color fill style.
fillStyle : “LINEAR_GRADIENT”;
Round rectangle with a linear gradient fill style.
fillStyle : “RADIAL_GRADIENT”;
Round rectangle with a radial gradient fill style.
fillStyle : “TEXTURE”;
Round rectangle with a textured fill style.
The fillColor1 and fillColor2 properties specify the colors used:
  • In SOLID_COLOR mode, the shape is filled with fillColor1 .
  • In LINEAR_GRADIENT and RADIAL_GRADIENT modes, the gradient starts with fillColor1 and ends with fillColor2 :
    fillStyle : “LINEAR_GRADIENT”;
    fillColor1 : “blue”;
    fillColor2 : “red”;
    Round rectangle with a linear gradient from a blue fill color on the left to a red fill color on the right.
    fillStyle : “RADIAL_GRADIENT”;
    fillColor1 : “blue”;
    fillColor2 : “red”;
    Round rectangle with a radial gradient from a blue fill color at the center to a red fill color on the periphery.
In LINEAR_GRADIENT and RADIAL_GRADIENT modes, the fillStart , fillEnd , and fillAngle properties define the geometry of the gradient. A gradient is defined by two points called P1 and P2. The following figures explain the meaning of the properties.
The following figure shows the geometry for a linear gradient.
Snapshot showing a linear gradient from blue to red. Point P1 is located on the bright blue line at the center of the blue fill color region. It is shown as the fillStart point, 0,25 units from the left edge of the figure. Point P2 is located on the bright red line in the center of the red fill color region. It is shown as the fillEnd point, 0,75 units from the left edge of the figure. The fill angle is set to 30 degrees.
Linear gradient
Note that the linear gradient is always in “reflect” mode, so the colors go back and forth from fillColor1 to fillColor2 outside the (P1, P2) segment.
The following figure shows the geometry for a radial gradient.
Snapshot showing a radial gradient from blue to red. Point P1 is located in the bright blue center of the circle that constitutes the blue fill color region. It is shown as the fillStart point, 0,25 units from the left edge of the figure. Point P2 is located in the center of the first red ring surrounding the blue fill color region. It is shown as the fillEnd point, 0,75 units from the left edge of the figure. The fill angle is set to 30 degrees.
Radial gradient
The fillTexture property specifies the URL of an image file to use as a texture in TEXTURE mode.
Current section
PREVIOUS  NEXT
© Copyright Rogue Wave Software, Inc. 2016. Legal Terms