4. Objects, Components, and Containers

4.1 Objects

All elements in X2D are descendents of the Object class. While there is no object element per se, it represents an abstract superclass which has an id attribute associated with it.

4.2 Components

All components will have a common set of visual attributes associated with them. These include position, size, color, and alpha. Special types of components may have more attributes.

4.2.1 Position

There are two ways to specify position. Either of the following will work:

• <rectangle position="60 20"/>

• <rectangle x="60" y="20"/>  

The origin (0,0) of the viewing coordinates is at the top-left corner. The default position is also (0,0).

4.2.2 Size

Size can be specified as follows:

• <rectangle size="200 300"/>

• <rectangle width="200" height="300"/>

4.2.3 Color

When specifying color, RGBA values can be specified all together, or RGB and alpha can be specified independently. Note that color values are normalized to [0.0, 1.0].

• <rectangle color="0.8 0.8 0.8 1.0"/>

• <rectangle color="0.8 0.8 0.8"/>

• <rectangle alpha="0.5"/>

When specifying color, values can also be given in sRGB format. An other alternative is to specify the color's name. See the data types section for a list of recognized color names.

4.3 Component Elements

In addition to having attributes, components can also have an animations and event handlers associated with them. See the section on animation and interactivity for more information.

4.4 Containers

Containers are a class of components that can contain other components.

4.4.1 The <group> tag

The <group> element allows components to be grouped together, as in the following example.

<x2d width="400" height="300">
  <group id="RECTANGLES">
    <rect x="100" y="100" width="100" height="100" />
    <rect x="200" y="200" width="100" height="100" />
    <rect x="300" y="300" width="100" height="100" />
  </group>
  <group id="CIRCLES">
    <circle cx="150" cy="300" r="25" />
    <circle cx="250" cy="300" r="25" />
    <circle cx="350" cy="300" r="25" />
  </group>
</x2d>

<group> elements can contain other <group> elements nested within it, as in the following example:

<x2d width="400" height="300">
  <group>
     <group>
       <group>
         <rectangle/>
       </group>
     </group>
   </group>
</x2d>

4.4.2 The <transform> tag

The <transform> element is also a grouping element. The <transform> element allows for 2D transformations such as translation, rotation, and scaling. All transformations are applied to the transformation group. The <transform> tag has the following attributes:

<transform translation="0 0" rotation"0" scale="1 1"/>

The following example shows a translate and scale transformation being applied to a rectangle.

<x2d width="400" height="300">
  <transform translation="100 0">
     <transform scale="2 2">
       <rectangle/>
     </transform>
   </transform>
</x2d>