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

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

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

哈,解决方式是:监听舞台变化,获取变化后的舞台宽高(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>



      经过代码测试,正确。

        

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