如何在兩個組件之間繪製連接邊框？

Question

在我自己解決這個問題之前，我想我會選擇SO社區的頭腦。

讓我們假設我有一個使用按鈕的Image。默認情況下，圖像周圍沒有邊框。點擊這個Image將會導致另一個組件被顯示在它下面或旁邊。當顯示第二個組件時，我想圍繞Image和第二個組件繪製連接的邊框。

默認情況下，第二個組件不可見。它只會是可見的使用popupManager，PopUpAnchor，設置visible屬性點擊Image後，點擊等前

例如：點擊後

+--------------------------------+ 
|        | 
| XXX <-- My Image   | 
| XXX       | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
|        | 
+--------------------------------+ 

例子：

+--------------------------------+ 
| +---+       | 
| |XXX| <-- My Image   | 
| |XXX|_______________   | 
| |     |   | 
| | My Second  |   | 
| | Component  |   | 
| |     |   | 
| |     |   | 
| +-------------------+   | 
|        | 
+--------------------------------+ 

創建類似這樣的東西有多困難？

Answer 1

如果您正在使用FLEX4 /火花，那麼你應該考慮剝皮（反正當borderStyle樣式僅在最後一戰） 。

這裏是一個小的樣品，以實現在圖像中示出的行爲：

它採用具有兩種狀態（摺疊和展開）的定製組件。
該文本僅附加到擴展狀態，邊界皮膚也是如此。
爲此，您需要兩個皮膚類，這些類將應用於圖像和文本組件的父級。

的應用：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:my="*"> 
    <s:VGroup width="100%" height="100%" paddingLeft="20" paddingTop="20"> 
     <my:ExpandableImage id="component" width="300" /> 
     <s:Button label="{component.currentState}" click="component.changeState(event);" /> 
    </s:VGroup> 
</s:WindowedApplication> 

ExpandableImage.mxml //要在施加有兩種狀態

<?xml version="1.0" encoding="utf-8"?> 
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    verticalScrollPolicy="off" horizontalScrollPolicy="off" 
    verticalGap="0" width="100%" 
    currentState="collapsedState"> 
    <fx:Script> 
     <![CDATA[ 

      public function changeState(event:MouseEvent):void 
      { 
       if (currentState == 'collapsedState') 
        currentState = 'expandedState'; 
       else 
        currentState = 'collapsedState'; 
      } 

     ]]> 
    </fx:Script> 
    <mx:VBox id="imgHolder" borderSkin="MyImageSkin" 
     width="50" height="50" includeIn="collapsedState, expandedState" cornerRadius="5" 
     backgroundAlpha="1" borderAlpha="0" backgroundColor="#FFFFFF" borderColor="#000000"> 
     <mx:Image id="img" source="{IMyConstants.MYLOGO}" 
      width="48" height="48" 
      mouseEnabled="true" click="changeState(event)" /> 
    </mx:VBox> 
    <mx:VBox id="txtHolder" borderSkin="MyDetailsSkin" 
     width="100%" height="100%" includeIn="expandedState" cornerRadius="5" 
     backgroundAlpha="1" borderAlpha=".5" backgroundColor="#FFFFFF" borderColor="#000000"> 
     <mx:Text id="txt" text="{IMyConstants.LOREMIPSUM}" 
      width="100%" /> 
    </mx:VBox> 
    <mx:states> 
     <s:State name="collapsedState" /> 
     <s:State name="expandedState" /> 
    </mx:states> 
    <mx:transitions> 
     <mx:Transition fromState="collapsedState" toState="expandedState"> 
      <s:Parallel duration="500"> 
       <mx:Resize target="{this}" /> 
       <mx:SetStyleAction target="{imgHolder}" 
        name="borderAlpha" value=".5" /> 
      </s:Parallel> 
     </mx:Transition> 
     <mx:Transition fromState="expandedState" toState="collapsedState"> 
      <s:Parallel duration="500"> 
       <mx:Resize target="{this}" /> 
       <mx:SetStyleAction target="{imgHolder}" 
        name="borderAlpha" value="0" /> 
      </s:Parallel> 
     </mx:Transition> 
    </mx:transitions> 
</mx:VBox> 

MyImageSkin.as //皮膚定製組件圖像組件的父級

public class MyImageSkin extends RectangularBorder 
{ 
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
    { 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 
     var cornerRadius:Number = getStyle("cornerRadius"); 
     var borderColor:int = getStyle("borderColor"); 
     var borderAlpha:Number = getStyle("borderAlpha"); 
     var backgroundColor:int = getStyle("backgroundColor"); 
     var backgroundAlpha:Number = getStyle("backgroundAlpha"); 
     graphics.clear(); 
     //border 
     drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 
      {tl: cornerRadius, tr:cornerRadius, bl: 0, br: 0}, 
      borderColor, borderAlpha); 
     //content 
     drawRoundRect(1, 1, unscaledWidth-2, unscaledHeight-1, 
      {tl: cornerRadius, tr:cornerRadius, bl: 0, br: 0}, 
      backgroundColor, backgroundAlpha); 
    } 
} 

MyDetailsS​​kin。作爲 //對文本的父應用於皮膚

public class MyDetailsSkin extends RectangularBorder 
{ 
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
    { 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 
     var cornerRadius:Number = getStyle("cornerRadius"); 
     var borderColor:int = getStyle("borderColor"); 
     var borderAlpha:Number = getStyle("borderAlpha"); 
     var backgroundColor:int = getStyle("backgroundColor"); 
     var backgroundAlpha:Number = getStyle("backgroundAlpha"); 
     graphics.clear(); 
     //border 
     drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 
      {tl: 0, tr:cornerRadius, bl: cornerRadius, br: cornerRadius}, 
      borderColor, borderAlpha); 
     //content 
     drawRoundRect(1, 1, unscaledWidth-2, unscaledHeight-2, 
      {tl: 0, tr:cornerRadius, bl: cornerRadius, br: cornerRadius}, 
      backgroundColor, backgroundAlpha); 
     //clear separator 
     drawRoundRect(1, 0, 49, 1, {tl: 0, tr:1, bl: 1, br: 1}, backgroundColor, 1); 
    } 
} 

我真的希望這有助於

Answer 2

敢肯定你能做到這一點與風格
添加第三個容器我打上****
打開頂部和右側邊框關上我的新容器（ ***）
轉底邊境關閉您的圖像容器
上 打開頂部邊框關你的第二個組件上

+--------------------------------+ 
| +---+****************   | 
| |XXX| <-- My Image *   | 
| |XXX|_______________*   | 
| |     |   | 
| | My Second  |   | 
| | Component  |   | 
| |     |   | 
| |     |   | 
| +-------------------+   | 
|        | 
+--------------------------------+