页游中常见的游戏元素位置自适应浏览器大小变化之解决方案

在玩页游中，很常见的一个功能是，当你改变浏览器的大小时，页游中一些元素位置比如聊天框等会自动随着浏览器变化而变化，该功能如何实现了？

哈，解决方式是：监听舞台变化，获取变化后的舞台宽高（stage.stageWidth，stage,stageHeight),然后根据新的舞台宽高，再改变舞台上各个元素的位置。

上代码测试：

<?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" addedToStage="application1_addedToStageHandler(event)" minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

protected function application1_addedToStageHandler(event:Event):void

{

stage.addEventListener(Event.RESIZE,resizeHandler);

changeBtnPositon();

}

private function resizeHandler(event:Event):void

{

trace(stage.stageWidth,stage.stageHeight);

changeBtnPositon();

}

private function changeBtnPositon():void

{

btn.x=(stage.stageWidth-btn.width)/2;

btn.y=(stage.stageHeight-btn.height)/2;

}

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<s:Button id="btn" x="251" y="288" width="125" height="54" label="该按钮始终居中"/>

</s:Application>

经过代码测试，正确。