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

 next > 

 

Circle

 

<circle x='number' 
        y='number' 
        radius='number'  
        start='number'  
        end='number'  
        fill_color='string' 
        fill_alpha='number' 
        line_color='string' 
        line_alpha='number'
        line_thickness='number'
        />


Description

Circle draws a circle, slice, or an arc with the following attributes:

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

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

  • radius: The circle's radius. The default is 100.

  • start: To draw a complete circle, omit this attribute. To draw a slice, this determines the starting angle of the slice. A slice is rendered clockwise from the start to the end angle. Angle zero is at the 12 o'clock position. A full circle is 360 degrees. You may use values below 0 and over 360, but the end value must be larger then the start value. The default is 0.

  • end: To draw a complete circle, omit this attribute. To draw a slice, this determines the ending angle of the slice. A slice is rendered clockwise from the start to the end angle. Angle zero is at the 12 o'clock position. A full circle is 360 degrees. You may use values below 0 and over 360, but the end value must be larger then the start value. The default is 360.

  • fill_color: The color inside the circle. 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 circle. 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.

 

Example

<slickboard>
    
   <!-- draw a red circle with a transparent green outline -->   
   <circle x='125' 
           y='125' 
           radius='75'    
           fill_color='ff4400' 
           fill_alpha='1' 
           line_color='88ff00' 
           line_alpha='.5'
           line_thickness='10'
           />
  
   <!-- draw a circle with just a white outline -->   
   <circle x='175' 
           y='75' 
           radius='50'    
           fill_alpha='0' 
           line_color='ffffff' 
           line_alpha='.9'
           line_thickness='10'
           />
           
   <!-- draw a blue slice -->   
   <circle x='250' 
           y='100' 
           radius='100' 
           start='45'
           end='90'   
           fill_color='4400ff' 
           fill_alpha='.9' 
           line_thickness='0'
           />
          
   <!-- draw a green arc-->   
   <circle x='250' 
           y='225' 
           radius='100' 
           start='0'
           end='90' 
           fill_alpha='0'  
           line_color='88ff00' 
           line_alpha='.9' 
           line_thickness='20'
           />

</slickboard>

 

 next > 


Copyright © 2010-2017, maani.us