SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Rect

 

<rect x='number' 
      y='number' 
      width='number'  
      height='number' 
      rotation='number' 
      fill_color='string' 
      fill_alpha='number'
      line_color='string' 
      line_alpha='number'
      line_thickness='number'
      corner_tl='number'
      corner_tr='number'
      corner_br='number'
      corner_bl='number'
      />
      


Description

Rect draws a rectangle with the following attributes:

  • x: The horizontal position of the rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default is zero.

  • y: The vertical position of the rectangle's upper left corner relative to the upper left corner of the background (0, 0). The default is zero.

  • width: The rectangle's width. The default is 100.

  • height: The rectangle's height. The default is 100.

  • rotation: The rectangle's rotation around its upper left point (x, y). The default value is zero.

  • fill_color: The color inside the rectangle. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • fill_alpha: The transparency value inside the rectangle. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 1.

  • line_color: The border's color. This is a string holding triple hexadecimal values representing the red, green, and blue components of a color. The default is "000000" (black).

  • line_alpha: The border's transparency value. Valid values range from 0 (fully transparent) to 1 (fully opaque). The default is 1.

  • line_thickness: The border's thickness. The default is 0 pixels.

  • corner_tl: The top-left corner radius in pixels. If this is set to a value above zero, then the top-left corner gets rounded by this radius amount. The default is zero (square corner).

  • corner_tr: The top-right corner radius in pixels. If this is set to a value above zero, then the top-right corner gets rounded by this radius amount. The default is zero (square corner).

  • corner_br: The bottom-right corner radius in pixels. If this is set to a value above zero, then the bottom-right corner gets rounded by this radius amount. The default is zero (square corner).

  • corner_bl: The bottom-left corner radius in pixels. If this is set to a value above zero, then the bottom-left corner gets rounded by this radius amount. The default is zero (square corner).

 

Example

<slickboard>

   <!-- draw a black square -->
   <rect x='50' y='80' width='50' height='50' />
   
   <!-- draw a red, rotated rectangle with a green, transparent outline and round corners -->   
   <rect x='150' 
         y='80' 
         width='150' 
         height='100' 
         rotation='10' 
         fill_color='ff3300' 
         line_color='88ff00' 
         line_alpha='.6' 
         line_thickness='15' 
         corner_tl='10' 
         corner_tr='20' 
         corner_br='30' 
         corner_bl='40' 
         />
         
   <!-- draw a blue rectangle with a white outline -->
   <rect x='340' 
         y='80' 
         width='100' 
         height='150' 
         fill_color='4400ff' 
         line_color='ffffff' 
         line_thickness='10' 
         />   
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us