Canvas レイアウトコンテナは、子コンテナや子コントロールを配置する矩形領域を定義します。他のすべてのコンポーネントとは異なり、子コントロールは Flex によって自動配置することができません。子コンポーネントを配置するには、「絶対レイアウト」または「制約ベースのレイアウト」を使用します。絶対レイアウトを使用する場合は、子の x 座標および y 座標を指定します。制約ベースのレイアウトの場合は、左右、ベースライン、または中央のアンカを指定します。それぞれのレイアウト方法の詳細については、コンポーネントのサイズ設定と配置を参照してください。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

Canvas コントロールの作成と使用

MXML で Canvas コントロールを定義するには、<mx:Canvas> タグを使用します。MXML の他の場所（別のタグまたは ActionScript ブロック）のコンポーネントを参照する場合は、id 値を指定します。

絶対配置を使用した Canvas コントロールの作成

それぞれの子の x および y プロパティを使用して、Canvas コンテナ内で子の位置を指定できます。これらのプロパティでは、Canvas コンテナの左上隅を基準とした子の x および y 座標を指定します。左上隅の座標は（0,0）です。x および y 座標の値には、正の整数または負の整数を指定できます。負の値を指定すると、コンテナの可視領域外に子を配置できます。この場合は ActionScript を使用することで、例えばイベントへの応答として、可視領域内に子を移動できます。

次の例に示す Canvas コンテナには、LinkButton コントロール 3 つと Image コントロール 3 つが配置されています。

この Canvas コンテナは次の MXML コードで作成されます。

<?xml version="1.0"?>
<!-- containers\layouts\CanvasSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Canvas id="myCanvas" 
      height="200" width="200"
      borderStyle="solid" 
      backgroundColor="white">

      <mx:LinkButton label="Search" 
        x="10" y="30"
        click="navigateToURL(new URLRequest('http://mycomp.com/search'))"/>
      <mx:Image 
        height="50" width="50" 
        x="100" y="10"
        source="@Embed(source='assets/search.jpg')" 
        click="navigateToURL(new URLRequest('http://mycomp.com/search'))"/>

      <mx:LinkButton label="Help" 
        x="10" y="100"
        click="navigateToURL(new URLRequest('http://mycomp.com/help'))"/>
      <mx:Image 
        height="50" width="50" 
        x="100" y="75"
        source="@Embed(source='assets/help.jpg')" 
        click="navigateToURL(new URLRequest('http://mycomp.com/help'))"/>

      <mx:LinkButton label="Complaints" 
        x="10" y="170" 
        click="navigateToURL(
            new URLRequest('http://mycomp.com/complain'))"/>
      <mx:Image 
        height="50" width="50" 
        x="100" y="140"
        source="@Embed(source='assets/complaint.jpg')" 
        click="navigateToURL(
            new URLRequest('http://mycomp.com/complaint'))"/>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

制約ベースのレイアウトを使用した Canvas コンテナの作成

制約ベースのレイアウトを使用すると、子の上端、下端、左端、右端、ベースラインの任意の組み合わせを、Canvas の端から指定の距離に固定できます。あるいは、子の水平または垂直方向の中心を、Canvas の中心から指定のピクセル数（正数または負数）の位置に固定することもできます。制約ベースのレイアウトを指定するには、top、bottom、left、right、baseline、horizontalCenter、verticalCenter の各スタイルを使用します。Canvas の端との相対位置に子コンテナの上下の端、または左右の端を固定した場合は、Canvas コントロールのサイズが変更されると、子のサイズも変更されます。次の例では、制約ベースのレイアウトを使用して HBox の水平位置を指定し、絶対値を使用して高さと垂直位置を指定します。

<?xml version="1.0"?>
<!-- containers\layouts\CanvasConstraint.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Canvas 
        width="150" height="150" 
        backgroundColor="#FFFFFF">

        <mx:HBox id="hBox2"
            left="30"
            right="30" 
            y="50" 
            height="50" 
            backgroundColor="#A9C0E7">
        </mx:HBox>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、次のイメージが作成されます。

子の重複の防止

Canvas コンテナを使用していると、コンポーネント同士が重なり合ってしまうことがあります。Canvas コンテナが子を配置する際、子のサイズは無視されるためです。また、Canvas コンテナは子を考慮して座標系を調整することはしないため、子コンポーネントがいずれかの境界線やパディングと重なることがあります。

次の例では、コンポーネントが重ならないように、各コンポーネントのサイズと位置を慎重に計算しています。

<?xml version="1.0"?>
<!-- containers\layouts\CanvasOverlap.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100" height="100" 
    backgroundGradientColors="[0xFFFFFF, 0xFFFFFF]">

    <mx:Script>
        <![CDATA[
            [Embed(source="assets/BlackBox.jpg")]
            [Bindable]
            public var imgCls:Class;
        ]]>
    </mx:Script> 
    
    <mx:Canvas id="chboard" backgroundColor="#FFFFFF">
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="0" y="0"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="20" y="0"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="40" y="0"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="10" y="10"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="30" y="10"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="0" y="20"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="20" y="20"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="40" y="20"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="10" y="30"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="30" y="30"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="0" y="40"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="20" y="40"/>
        <mx:Image source="{imgCls}" 
            width="10" height="10" x="40" y="40"/>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、次のイメージが生成されます。

このいずれかのイメージの width および height プロパティを 20 ピクセルに変更した場合、それに応じた位置変更を行わないと、そのイメージが格子縞模様上の他のイメージと重なってしまいます。例えば、前の例の 7 番目の <mx:Image> タグを次の行に置き換えると、この結果表示されるイメージは下図のようになります。

<mx:Image source="{imgCls}" width="10" height="10" x="20" y="20"/>

実行時の子の再配置

アプリケーションにロジックを構築し、Canvas コンテナの子を実行時に再配置することができます。例えば、次のコードでは、ボタンのクリックに応答して、id 値が text1 のテキスト入力ボックスを x=110、y=110 の位置に再配置します。

<?xml version="1.0"?>
<!-- containers\layouts\CanvasRepos.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Canvas 
        width="300" height="300" 
        backgroundColor="#FFFFFF">

        <mx:TextInput id="text1" 
            text="Move me" 
            x="50" y="50"/>
        <mx:Button id="button1" 
            label="Move text1" 
            x="50" y="200" 
            click="text1.x=110; text1.y=110;"/>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。