Flexのいくつかのコンポーネントにまたがるイメージを作成する

Question

最近、私は素晴らしいオンライン図作成ツール、LovelyChartsを見つけました。私はUIの設計方法が好きです - あなたはスクリーンショットhereを見ることができます。スクリーンショットの右上隅にあるLovelyChartsのロゴのように、複数のコンポーネントにまたがるイメージを作成する方法を知りました。誰かが私を正しい方向に蹴ってくれますか？

Answer 1

透明な背景でイメージを作成する必要があります。 JPEG形式は透明な背景をサポートしていないので、GIFまたは別の形式を使用する必要があります。次に、次のコードのようにイメージを埋め込みます。

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       layout="vertical"> 
    <mx:Canvas width="476" 
       height="264"> 
     <mx:Label x="103" 
        y="110" 
        text="Some text" 
        width="155"/> 
     <mx:Image x="115" 
        y="110" 
        width="100" 
        height="100" 
        source="@Embed('assets/transparent_back.gif')"/> 
    </mx:Canvas> 

あなたが好きなら、他のコンポーネントを重ね、あなたがキャンバスにしたい画像を配置することができます。透明な背景の画像の例を次に示します。http://commons.wikimedia.org/wiki/File:Gluecksklee_%28transparent_background%29.gif

Answer 2

これは間違いなく有効です。アプリケーションのレイアウトは絶対的であると、画像の2つの例がある - キャンバスタグ内で宣言1および他の外

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       layout="absolute"> 
    <mx:Canvas width="476" 
       height="264" 
       x="50" 
       y="0" 
       borderStyle="solid" 
       borderThickness="5" 
       borderColor="black"> 
     <mx:Label x="103" 
        y="110" 
        text="Some text" 
        width="155"/> 
     <mx:Image x="115" 
        y="110" 
        width="100" 
        height="100" 
        source="@Embed('assets/transparent_back.gif')"/> 
    </mx:Canvas> 
    <mx:Image x="30" 
       y="110" 
       width="100" 
       height="100" 
       source="@Embed('assets/transparent_back.gif')"/> 

</mx:Application>