Flex Canvas (mx.containers.Canvas)
The Canvas is a container used for absolute positioning of its children.
The Canvas class is found in the mx.containers package.
A Canvas layout container defines a rectangular region in which you place child containers and controls. It is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.
The below example uses a Canvas as a container to absolute position some child controls:
<mx:Canvas> <mx:Label x="0" y="0" text="A0" /> <mx:Label x="100" y="0" text="A1" /> <mx:Label x="0" y="100" text="B0" /> <mx:Label x="100" y="100" text="B1" /> </mx:Canvas>
Flex sets the children of a Canvas layout container to their preferred width and preferred height. You may override the value for a child's preferred width by setting its width property to either a fixed pixel value or a percentage of the container size. You can set the preferred height in a similar manner.
Unique characteristics of the Canvas container:
- Child components are absolutely positioned using x and y coordinates
- Child components can overlap
Canvas is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.
When you use a Canvas container components may overlap.
A canvas can also be used for constraint-based layouts. Constraint-based layouts use the following attributes: top, left, bottom, right, horizontalCenter, verticalCenter.