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

 < previousnext > 

 

Scribble

 

<scribble active='boolean' 
        color='string' 
        thickness='number'  
        alpha='number' 
        />
      


Description

Scribble can be added to an object to enable freehand drawing in its layer, annotate objects in lower layers, while still interacting with object in higher layers:

 

The scribble attributes are:

  • active: If true, then scribbling can start immediately after the board gets rendered. If false, then scribbling must be activated by an action first. The default is false.

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

  • thickness: The pen's thickness. The default is 20 pixels.

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

 


Actions

Scribble actions are used to enter or exit the scribbling mode, change the pen attributes, and to clear the scribbles.

 

Example

<slickboard>
 
   <!-- draggable orange circle below the scribble layer, which can be scribbled on -->
   <object>
      <circle x='240' y='150' radius='50' fill_color='ff6600' shadow='default' state='hit' />
      <action><item type='drag' /></action>
   </object>  
   
   
   <!-- scribbling layer -->
   <object>
      <scribble active='false' />   
   </object>
      
   
   <!-- layers above the scribble layers can be ineracted with -->
   <object>
   
      <!-- bottom drawer that holds drawing tools -->
      <rect x='100' y='300' width='280' height='40' fill_color='8888ff' corner_tl='10' corner_tr='10' shadow='default' /> 
      <drawer type='up' depth='40' />
     
      <!-- select a black pen and start the scribbling mode -->
      <object>
         <circle x='150' y='320' radius='15' fill_color='000000' fill_alpha='.6' state='hit' shadow='default' />
         <action>
            <item type='scribble_start' />
            <item type='scribble_pen' color='000000' thickness='30' alpha='.6' />
         </action>
      </object>  
   
      <!-- select a red pen and start the scribbling mode -->
      <object>
         <circle x='200' y='320' radius='15' fill_color='ff3300' fill_alpha='.7' state='hit' shadow='default' />
         <action>
            <item type='scribble_start' />
            <item type='scribble_pen' color='ff3300' thickness='30' alpha='.7' />
         </action>
      </object>  
   
      <!-- select a blue pen and start the scribbling mode -->
      <object>
         <circle x='250' y='320' radius='10' fill_color='4400ff' fill_alpha='.7' state='hit' shadow='default' />
         <action>
            <item type='scribble_start' />
            <item type='scribble_pen' color='4400ff' thickness='20' alpha='.7' />
         </action>
      </object>  

      <!-- clear the scribble and end the scribbling mode -->
      <object>
         <rect x='300' y='310' width='65' height='20' fill_color='aaaaff' 
               corner_tl='5' corner_tr='5' corner_bl='5' corner_br='5' shadow='default' state='hit' />   
         <text x='300' y='311' width='65' height='20' color='000000' align_h='center' shadow='default'>Clear</text>   
         <action>
            <item type='scribble_clear' />
            <item type='scribble_stop' />
         </action>
      </object> 
     
   </object>


   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us