Controlling the Node's Skin

Developing with the SDK > Using CSS Syntax in the Style Sheet > Customizing General Nodes in the Style Sheet > Controlling the Node's Skin

Controlling the Node's Skin

INDEX

PREVIOUS NEXT

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";
fillStyle : "LINEAR_GRADIENT";
fillStyle : "RADIAL_GRADIENT";
fillStyle : "TEXTURE";

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";

fillStyle : "RADIAL_GRADIENT";
fillColor1 : "blue";
fillColor2 : "red";

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.

Figure 3.2 shows the geometry for a linear gradient.

Figure 3.2 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.

Figure 3.3 shows the geometry for a radial gradient.

Figure 3.3 Radial Gradient

The fillTexture property specifies the URL of an image file to use as a texture in TEXTURE mode.

PREVIOUS NEXT

fillStyle : "LINEAR_GRADIENT"; fillColor1 : "blue"; fillColor2 : "red";
fillStyle : "RADIAL_GRADIENT"; fillColor1 : "blue"; fillColor2 : "red";