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

 < previousnext > 

 

Polygon

 

<polygon fill_color='string' fill_alpha='number' line_color='string' line_thickness='number' line_alpha='number' caps='string' joints='string' miter='number'>

   <point x='number' y='number' />
   <point x='number' y='number' target='string' />
   ...

</polygon>


Description

Polygon draws a polygon by connecting multiple points. Any number of points can be nested inside the polygon tags. The polygon's attributes are:

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

  • fill_alpha: The transparency value inside the polygon. 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 for a color. The default is "000000" (black).

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

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

  • caps: If the polygon is not closed, this attribute determines the type of caps at the line ends. Valid values are none, round, and square. The default is none.

     

  • joints: If line_thickness is greater than zero, then this attribute specifies the type of corner joints. Valid values are bevel, miter, and round. The default is round.

  • miter: If joints is set to miter, then this value specifies the limit at which a miter is cut off. This value expresses a factor of line_thickness. For example, with a miter of 2.5 and a line_thickness of 10 pixels, the miter is cut off at 25 pixels. Valid values range from 1 to 255. The default is 3.

The point's attributes are:

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

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

  • target: The ID of an object to attach this point to. If either the polygon object or the target object moves, then this polygon point follows the target object.

 

Example

<slickboard>

   <!-- draw a red star with a green outline -->
   <polygon fill_color='ff3300' line_color='88ff00' line_thickness='5'>   
      <point x='200' y='25' />
      <point x='222' y='94' />
      <point x='295' y='94' />
      <point x='236' y='136' />
      <point x='258' y='205' />
      <point x='200' y='163' />
      <point x='141' y='205' />
      <point x='163' y='136' />
      <point x='104' y='94' />
      <point x='177' y='94' />
      <point x='200' y='25' />
   </polygon>
   
   <!-- draw a white triangle with beveled joints -->
   <polygon fill_alpha='0' line_color='ffffff' line_alpha='.9' line_thickness='20' joints='bevel'>   
      <point x='50' y='25' />
      <point x='100' y='225' />
      <point x='250' y='50' />
      <point x='50' y='25' />
   </polygon>
   
   <!-- draw an open, blue polygon with mitered joints and round caps -->
   <polygon fill_alpha='0' line_color='8888ff' line_thickness='20' caps='round' joints='miter'>   
      <point x='300' y='25' />
      <point x='350' y='50' />
      <point x='300' y='150' />
      <point x='400' y='100' />
      <point x='420' y='200' />
   </polygon>
   
</slickboard>

 


<slickboard>

   <!-- drag both the red square and blue balloon to test this -->

   <!-- draggable red square -->
   <object id='red'>
      <rect x='200' y='150' fill_color='ff4400' shadow='default' state='hit' /> 
      <action> <item type='drag' float='false'/> </action>   
   </object>     
   
   
   <!-- draggable blue balloon with a point attached to the red square -->
   <object >
   
      <polygon fill_color='8888ff' line_thickness='0' shadow='default' state='hit'>   
         <point x='150' y='50' />
         <point x='300' y='50' />
         <point x='300' y='100' />
         <point x='200' y='100' />
         <point x='225' y='175' target='red' />
         <point x='170' y='100' />
         <point x='150' y='100' />
         <point x='150' y='100' />
      </polygon>
   
      <action> <item type='drag' float='false'/> </action> 
       
   </object>     
   
   
   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us