2012-11-16 77 views
0

我有一個Flex應用程序,它有一個UIComponent,它包含一個Bitmap對象。在Flex 3中,一切都很好。在Flex 4中,相同的代碼導致UIComponent中的子項偏移,我不明白。UIComponent似乎有「填充/邊距」設置(Flex 3到Flex 4遷移問題?)

這裏是我的.html文件的對象標籤:

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="320" height="480" id="MyId"> 
      <param name="allowScriptAccess" value="sameDomain" /> 
      <param name="allowFullScreen" value="false" /> 
      <param name="movie" value="MyFlexApp.swf" /> 
      <param name="quality" value="high" /> 
      <param name="bgcolor" value="#ffff00" /> 
      <embed allowScriptAccess="sameDomain" allowFullScreen="false" src="MyFlexApp.swf" quality="high" bgcolor="#ffff00" width="320" height="480" name="MyAppName" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
     </object> 

這裏是我的.mxml文件:

<?xml version="1.0"?> 
<!-- usingas/UsingCDATA.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" width="320" height="480" backgroundColor="#FF0000" styleName="plain"> 
    <mx:Script> 
    <![CDATA[ 
    import mx.core.UIComponent; 
    import MyClass; 
    public function init() : void 
    { 
      var s:UIComponent = new MyClass(); 
      addChild(s); 
    } 
    ]]> 
    </mx:Script> 
</mx:Application> 

這裏是MyClass.as:

public class MyClass extends UIComponent 
{ 
    ... <snip> ... 

    screenBitmap = new Bitmap(screenBitmapData); 
    addChildAt(screenBitmap, 0); 
    // screenBitmap.x = -160; 
    // screenBitmap.y = -24; 
    var t:TextField = new TextField(); 
    t.type = TextFieldType.INPUT; 
    t.border = true; 
    t.text = "hello"; 
    addChildAt(t, 1); 

    ... <snip> ... 
} 

請注意,該標籤具有黃色背景色。我看到黃色背景正確填充了.swf的320x480大小。並注意該應用程序有一個紅色的背景色。再次,在閃爍的黃色之後,我看到紅色背景正確填充了.swf的320x480大小,所以我相信應用程序本身沒有被抵消。

但我所看到的是screenBitmap對象在顯示器中出現偏移量。它的24像素太低,160像素的右邊(所以位圖的左邊緣剛好在應用程序的顯示矩形中間開始)。我不明白那些抵消來自哪裏。特別是,我不知道MyClass對象是否在Application對象內偏移(即,如果Application對象具有160的「左填充」和24的「頂部填充」),或者它是MyClass對象有那些填充,然後適用於其子孩子(位圖和TextField)。 (我在這裏使用「padding」表示類似於Flex以某種方式執行的.css填充的操作,儘管我沒有在Flex文檔中看到提及這種概念。)

通過取消兩條線的註釋

// screenBitmap.x = -160; 
    // screenBitmap.y = -24; 

我可以得到位圖顯示「正確」,但它不正確,因爲位圖上的鼠標事件然後錯誤地偏移。我當然也可以彌補處理鼠標事件的變化,但我想了解爲什麼會發生這種變化,而不是盲目地補償它。

請注意,我還包括一個TextField對象:

var t:TextField = new TextField(); 
    t.type = TextFieldType.INPUT; 
    t.border = true; 
    t.text = "hello"; 
    addChildAt(t, 1); 

我這樣做只是爲了確保它不是什麼時髦的有關已用移位我的位圖對象。文本對象獲得相同的移位,在整個.swf矩形內左上角160,24。

正如我所說,我沒有在Flex 3中獲得這些偏移量。我使用完全相同的代碼,現在只需使用Flex 4 SDK進行編譯。

偏移量來自哪裏?

+1

你拿的styleName做=「普通」 –

+1

另外,我想假設如果您遷移到Flex 4,您至少必須將''更改爲''(並執行相同的腳本塊)。我認爲你至少必須在應用程序級進行這種更改,而其他組件可以繼續使用'mx',外部應用程序應該是Spark,不是嗎? –

回答

0

非常感謝The_asMan和蘇尼爾D.以下是更正後的.mxml文件,其中偏移的問題不再存在:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" applicationComplete="init()" width="320" height="480" backgroundColor="#FF0000"> 
    <fx:Script> 
    import mx.core.UIComponent; 
    import MyClass; 
    public function init() : void 
    { 
      var s:UIComponent = new MyClass(); 
      addChild(s); 
    } 
    ]]> 
    </fx:Script> 
</s:Application>