Appearance

GRADIENT_RECT ​

Fills a rectangular shape with smooth, shaded colors.

Syntax ​

leo-grammar
GRADIENT_RECT [ x:measureValue ] [ y:measureValue ] [ w:measureValue ] [ h:measureValue ]
    [ style:GradientMode ] [ color1:ColorSpec ] [ color2:ColorSpec ] [ color3:ColorSpec ] [ color4:ColorSpec ] .

GradientMode : horz | vert | updiag | downdiag | diagcross .

Parameters ​

  • x (measureValue, optional) - The x-coordinate of the top-left corner of the rectangle. The default is 0cm.
  • y (measureValue, optional) - The y-coordinate of the top-left corner of the rectangle. The default is 0cm.
  • w (measureValue, optional) - The width of the rectangle. The default is 0cm.
  • h (measureValue, optional) - The height of the rectangle. The default is 0cm.
  • style (modifier, optional) - The direction of the color gradient. The default is diagcross.
  • color1 (ColorSpec, optional) - The first color used for the gradient. The default is "black".
  • color2 (ColorSpec, optional) - The second color used for the gradient. The default is "black".
  • color3 (ColorSpec, optional) - The color used for the bottom-right corner of the gradient with the diagcross style. The default is "black".
  • color4 (ColorSpec, optional) - The color used for the bottom-left corner of the gradient with the diagcross style. The default is "black".

Details ​

This command does not draw an outline. It is not influenced by any style commands.

The direction of the gradient depends on the value of the style parameter:

  • horz: from the left with color1 to the right with color2.
  • vert: from the top with color1 to the bottom with color2.
  • updiag: from the bottom-left corner with color1 to the top-right corner with color2.
  • downdiag: from the top-left corner with color1 to the bottom-right corner with color2.
  • diagcross: four-color shading with one color per corner: color1 in the top-left, color2 in the top-right, color3 bottom-right and color4 in the bottom-left corners.

Colors are specified through a ColorSpec, which has to evaluate to a strValue or an intValue (see LEO Colors for details).

To draw a border around the gradient two more commands are needed: FILL style:null followed by a RECTANGLE (using the current PEN setting) with the same coordinates as GRADIENT_RECT.

The command GRADIENT_RECT style:diagcross is not fully supported in SVG Graphics. Instead of the original ones, SVG-specific algorithms are used, yielding very similar results.

Rotation of a gradient rectangle is not possible. This has an influence on the drawing of relations where a rectangle's shape will change with different rotations. If a rotation is necessary then use two GRADIENT_TRI commands instead.

See Also ​

Examples ​

Draw a dark violet rectangle with a downwards diagonal gradient and without any outline.
Dark violet gradient in a rectangular shape

leo
GRAPHREP

GRADIENT_RECT x:-1.4cm y:-0.7cm w:2.8cm h:1.4cm style:downdiag color1:"$666699" color2:"$444466"

Draw a rectangle with an outline and an upwards diagonal gradient filling from yellow to red.
Rectangle with a gradient going from yellow in the bottom-left corner to red in the top-right corner

leo
GRAPHREP
# Note: SHADOW is on by default.

GRADIENT_RECT x:-1.4cm y:-0.7cm w:2.8cm h:1.4cm style:updiag color1:"yellow" color2:"red"
PEN w:0.05cm
FILL style:null
RECTANGLE x:-1.4cm y:-0.7cm w:2.8cm h:1.4cm

Draw the different styles of gradient rectangles with varying colors and write the style in the middle of each rectangle.
The five styles of gradients from left to right using different colors

leo
GRAPHREP

GRADIENT_RECT x:-5.2cm y:-0.6cm w:2cm h:1.2cm style:horz color1:"mistyrose" color2:"salmon"
TEXT "horz" x:-4.2cm w:c h:c
GRADIENT_RECT x:-3.1cm y:-0.6cm w:2cm h:1.2cm style:vert color1:"peachpuff" color2:"orange"
TEXT "vert" x:-2.1cm w:c h:c
GRADIENT_RECT x:-1cm y:-0.6cm w:2cm h:1.2cm style:updiag color1:"honeydew" color2:"green"
TEXT "updiag" x:0cm w:c h:c
GRADIENT_RECT x:1.1cm y:-0.6cm w:2cm h:1.2cm style:downdiag color1:"paleturquoise" color2:"cadetblue"
TEXT "downdiag" x:2.1cm w:c h:c
GRADIENT_RECT x:3.2cm y:-0.6cm w:2cm h:1.2cm style:diagcross color1:"powderblue" color2:"steelblue" color3:"thistle" color4:"darkviolet"
TEXT "diagcross" x:4.2cm w:c h:c

Draw an ellipse with a gradient filling and a shadow.
An ellipse with a gradient filling from light orange to light blue

leo
GRAPHREP
# Note: SHADOW is on by default.

# Clip the ellipse region.
CLIP_ELLIPSE rx:-1.4cm ry:-0.7cm
# Draw the gradient.
GRADIENT_RECT x:-1.4cm y:-0.7cm w:2.8cm h:1.4cm style:downdiag color1:"sandybrown" color2:"skyblue"
# Turn off the clipping region.
CLIP_OFF
# Draw the ellipse outline.
FILL style:null
ELLIPSE rx:-1.4cm ry:-0.7cm

Versions and Changes ​

Available since ADOxx 1.3