首页 > 代码库 > 页游中常见的游戏元素位置自适应浏览器大小变化之解决方案
页游中常见的游戏元素位置自适应浏览器大小变化之解决方案
在玩页游中,很常见的一个功能是,当你改变浏览器的大小时,页游中一些元素位置比如聊天框等会自动随着浏览器变化而变化,该功能如何实现了?
哈,解决方式是:监听舞台变化,获取变化后的舞台宽高(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>
经过代码测试,正确。
页游中常见的游戏元素位置自适应浏览器大小变化之解决方案