| A group object can be used to collect shapes. In this example, There is a group that contains an elipse and two lines as children. Changing the group position also change the position of all contained elements. | |
| Following the bubbling event pattern, all the events over a shape are propageted to its parent. In this example, both elipse objects are child of a group element and click event listeners have been added to the elipse and the group. | |
|
Groups can be nested as a regular shape. An important property of the groups is the ability
to define their own coordSize, coorOrigin and size. In this example, both shapes have been
created with the same properties. The red one has been added as a child element of a group with the
following properties: Size(50,50); Position(25,25); CoordSize(100,100); CoordOrigin(0,0) The blue one has been added as a child of another group with the following properties:: Size(50,50); Position(25,25); CoordSize(100,100); CoordOrigin(0,0); Finally, the second group has been added as a child of the first declared group. |
|
|
Group coordsize defines how many units there are along the width of the containing block.
In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have been
positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). 1) Group with CoordSize(100,100) 2) Group with CoordSize(100,200) 3) Group with CoordSize(200,100) |
(1)
(2)
(3)
|
|
Group coordorigin defines the coordinate at the top left corner of the containing block.
In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been positioned
at (0,0),(0,100),(100,0),(100,100)(50,50). 1) Group with CoordOrigin(0,0) 2) Group with CoordOrigin(0,50) 3) Group with CoordOrigin(50,0) |
(1)
(2)
(3)
|
| Visibility can be used to hide an element and disable all the element events. In the case of a group, this property is applied to all the children elements. | |
| Scale. |