根據其內容調整spark.components.Label並找到其尺寸

Question

我正在將Flash遊戲移植到Flex。

在原來的Flash小遊戲，當玩家會聊什麼，我給你的文本到TextField（其中有一個harcoded寬度W = 240和將wordWrap =真，多=真）。從那以後，我使用文本域的textHeight不同左右（和下方）繪製一個矩形它：

public function set text(str:String):void { 
     _tf.text = str; 
     _tf.height = _tf.textHeight + 2 * PAD; 

     // draw the rectangle around the TextField 
     _rect.x = _tf.x - PAD; 
     _rect.y = _tf.y - PAD; 
     _rect.graphics.clear(); 
     _rect.graphics.beginFill(BGCOLOR, 0.8); 
     _rect.graphics.drawRoundRect(0, 0, _tf.textWidth + 2 * PAD, _tf.textHeight + 2 * PAD, R); 
     _rect.graphics.endFill(); 

     _fadeTimer.reset(); 
     _fadeTimer.start(); 
    } 

This works ok。

在我的新Flex應用程序，但是我不知道，如何找到Label尺寸和如何使它與文本增長。

這裏是我的測試情況下，希望不工作（但它運行在Flash Builder OK）。

是否有人請有任何建議，我已經搜查了很多。

BubbleTest.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    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:comps="*" 
    width="700" height="525" backgroundColor="#CCCCCC" 
    creationComplete="init()"> 

    <fx:Script> 
     <![CDATA[ 
      public function init():void { 
       _bubble0.text = 'Hello world'; 
      }  
     ]]> 
    </fx:Script> 

    <s:Rect id="_user0" horizontalCenter="0" y="340" width="160" height="140"> 
     <s:stroke> 
      <s:SolidColorStroke color="red" /> 
     </s:stroke> 
    </s:Rect> 

    <s:Rect id="_user1" left="4" top="4" width="160" height="140"> 
     <s:stroke> 
      <s:SolidColorStroke color="red" /> 
     </s:stroke> 
    </s:Rect> 

    <s:Rect id="_user2" right="4" top="4" width="160" height="140"> 
     <s:stroke> 
      <s:SolidColorStroke color="red" /> 
     </s:stroke> 
    </s:Rect> 

    <comps:Bubble id="_bubble0" x="20" y="340" /> 
    <comps:Bubble id="_bubble1" left="170" top="4" /> 
    <comps:Bubble id="_bubble2" right="170" top="4" /> 

</s:Application> 

Bubble.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Group 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    creationComplete="init(event)"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 

      public static const W:uint = 240; 
      private static const R:uint = 6; 
      private static const PAD:uint = 4; 
      private static const BGCOLOR:uint = 0xCCFFCC; 

      private var _timer:Timer = new Timer(500, 20); 

      public function init(event:FlexEvent):void { 
       _timer.addEventListener(TimerEvent.TIMER, fadeBubble); 
       _timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble); 
       addEventListener(MouseEvent.CLICK, hideBubble); 

       if (x > 100 && x < 200) { 
        _left.visible = true; 
        _right.visible = false; 
       } else { 
        _left.visible = false; 
        _right.visible = true; 
       } 
      } 

      public function set text(str:String):void { 
       _text.setStyle('color', Util.isRed(str) ? 0xFF0000 : 0x000000); 
       _text.text = str; 

       // XXX resize _rect here, but how? 

       _timer.reset(); 
       _timer.start(); 
      } 


      public function get text():String { 
       return _text.text; 
      } 

      private function fadeBubble(event:TimerEvent):void { 
       if (_timer.currentCount * 2 > _timer.repeatCount) 
        alpha /= 2; 
      } 

      public function hideBubble(event:MouseEvent):void { 
       visible = false; 
       _timer.stop(); 
      }   
     ]]> 
    </fx:Script> 

    <s:Graphic id="_right" x="{W}" y="0"> 
     <s:Path data="L 0 10 
       L 20 20 
       L 0 30"> 
      <s:fill> 
       <s:SolidColor color="{BGCOLOR}" /> 
      </s:fill> 
     </s:Path> 
    </s:Graphic> 

    <s:Graphic id="_left" x="0" y="0"> 
     <s:Path data="L 0 10 
       L -20 20 
       L 0 30"> 
      <s:fill> 
       <s:SolidColor color="{BGCOLOR}" /> 
      </s:fill> 
     </s:Path> 
    </s:Graphic> 

    <s:Rect id="_rect" x="0" y="0" width="{W}" height="120" radiusX="{R}" radiusY="{R}"> 
     <s:fill> 
      <s:SolidColor color="{BGCOLOR}" /> 
     </s:fill> 
    </s:Rect> 

    <s:Label id="_text" x="0" y="75" width="{W}" fontSize="16" textAlign="center" /> 
</s:Group> 

SOFAR我只帶了2個想法：

1）不知何故得到阿霍德標籤的mx_internal文本字段

import mx.core.mx_internal; 
use namespace mx_internal; 
// XXX and then? 

2）使用<的mx：UIComponent ID = 「UIC」/ >和的addChild（）我自己的TextField它

但也許有是更無痛的方式？

Answer 1

你將不得不改變你想想，如果你使用的柔性佈局一點的方式。你想要做的是將矩形設置爲基於百分比的寬度，並將絕對寬度設置爲無。這可以讓佈局做的是所謂的「尺寸到內容」的含義，其寬度將由其子女決定。然後，使用基於百分比的寬度的項目將查看該值並展開。有點難以通過單詞來解釋，所以我在這裏粘貼了新的Bubble.mxml供您查看。它可能不是你想要的確切外觀，但這應該讓你開始，只會稍微調整一下，以得到你想要的。

<?xml version="1.0" encoding="utf-8"?> 

<fx:Script> 
    <![CDATA[ 
     import mx.events.FlexEvent; 

     //public static const W:uint = 240; 
     private static const R:uint = 6; 
     private static const PAD:uint = 4; 
     private static const BGCOLOR:uint = 0xCCFFCC; 

     private var _timer:Timer = new Timer(500, 20); 

     public function init(event:FlexEvent):void { 
      _timer.addEventListener(TimerEvent.TIMER, fadeBubble); 
      _timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble); 
      addEventListener(MouseEvent.CLICK, hideBubble); 

      if (x > 100 && x < 200) { 
       _left.visible = true; 
       _right.visible = false; 
      } else { 
       _left.visible = false; 
       _right.visible = true; 
      } 
     } 

     public function set text(str:String):void { 
      //_text.setStyle('color', Util.isRed(str) ? 0xFF0000 : 0x000000); 
      _text.text = str; 

      // XXX resize _rect here, but how? 

      _timer.reset(); 
      _timer.start(); 
     } 


     public function get text():String { 
      return _text.text; 
     } 

     private function fadeBubble(event:TimerEvent):void { 
      if (_timer.currentCount * 2 > _timer.repeatCount) 
       alpha /= 2; 
     } 

     public function hideBubble(event:MouseEvent):void { 
      visible = false; 
      _timer.stop(); 
     }   
    ]]> 
</fx:Script> 

<s:Graphic id="_right"> 
    <s:Path data="L 0 10 
      L 20 20 
      L 0 30"> 
     <s:fill> 
      <s:SolidColor color="{BGCOLOR}" /> 
     </s:fill> 
    </s:Path> 
</s:Graphic> 

<s:Graphic id="_left" x="0" y="0"> 
    <s:Path data="L 0 10 
      L -20 20 
      L 0 30"> 
     <s:fill> 
      <s:SolidColor color="{BGCOLOR}" /> 
     </s:fill> 
    </s:Path> 
</s:Graphic> 

<s:Rect id="_rect" x="0" y="0" width="100%" height="100%" radiusX="{R}" radiusY="{R}"> 
    <s:fill> 
     <s:SolidColor color="{BGCOLOR}" /> 
    </s:fill> 
</s:Rect> 

<s:Label id="_text" x="0" paddingTop="5" paddingBottom="5" fontSize="16" textAlign="center" />