コンテンツに応じてspark.components.Labelのサイズを変更し、その寸法を確認してください。

Question

私はFlashゲームをFlexに移植しています。オリジナルのFlashゲームで

、プレイヤーが何かをチャットだろうというとき、私は、TextFieldにそのテキストを割り当てる（ harcoded幅W = 240とwordWrapの=真を持っていた、複数行=真）。

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：その後、私は、TextFieldのtextHeightとがそれを周りに四角形を描画（その下）に使用します。

ただし、私の新しいFlexアプリケーションでは、Labelのディメンションの検索方法とテキストの拡大方法についてはわかりません。望んだとしてここ

は動作しません、私のテストケース、である（しかし、それは大丈夫Flash Builderで実行されます）。

誰もが何か提案を持って下さいんが、私は多くのことを検索しました。

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のTextField

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" />