我们通过设置Starling实例的stage.stageWidth和stage.stageHeight,可以控制Starling的缩放。以及通过Starling实例的viewPort属性来控制截取显示的坐标以及面积。
下边对Starling中的缩放,一条条的总结:
在Starling实例的viewPort没有参与进来时:
1.当设置Starling实例的stage.stageWidth和stage.stageHeight时候,Starling的缩放比例等于实际舞台的宽或高除以设置的Starling实例的舞台宽或高。
2.上边的那个缩放比例,各自为政。也就是说可以是不等比例的。
在Starling实例的viewPort参与进来时:
1.Starling的缩放比例等于ViewPort设置的宽或高除以Starling里边实例的舞台宽或高。
2.ViewPort的值是Rectangle对象。截取Starling的宽高,以及Starling的坐标由ViewPort决定。
3.该过程可以这样理解。先对Starling进行缩放处理,再进行截取处理。最后进行坐标处理。
下边贴出demo进行测试。在demo的输入框中,输入从0到14之间(包裹0和14)的数字,点后边的类型确定按钮。来看舞台中图片的变化。可以参考后边的测试代码。
贴出测试代码:
文档类:Main.as
package com.vini123 { import com.vini123.game.Game; import com.vini123.ui.Button; import com.vini123.ui.InputTxt; import com.vini123.ui.OutputTxt; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.utils.setTimeout; import starling.core.Starling; import starling.events.Event; /** * @author vini123 * @email lichking_lin86@qq.com * @weixin vinifly * @date 2014-4-23 下午2:14:16 * */ [SWF(width="690", height="460", frameRate="30")] public class Main extends Sprite { private var _starling:Starling; private var _button:Button; private var _typeTxt:InputTxt; private var _mesTxt:OutputTxt; private var _sw:int = 690; private var _sh:int = 460; public function Main() { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; _starling=new Starling(Game, stage); _starling.start(); _starling.addEventListener(Event.ROOT_CREATED, rootCreatedHandler); _button = new Button("模式效果"); addChild(_button); _button.x = _sw -_button.width -10; _button.y = _sh - _button.height -10; _typeTxt = new InputTxt(23) ; addChild(_typeTxt); _typeTxt.x = _button.x + - _typeTxt.width - 10; _typeTxt.y = _button.y + _button.height * 0.5 - _typeTxt.height * 0.5; _mesTxt = new OutputTxt(); _mesTxt.x = 100 ; _mesTxt.y = 50 ; addChild(_mesTxt); _button.addEventListener(MouseEvent.CLICK , mouseClickHandler); //setTimeout(function():void{addChild(_typeTxt);} ,1000); stage.addEventListener(MouseEvent.MOUSE_DOWN , mouseDownHandler ); print("初始化,进来啦。\n请输入0到14之间的数字,包裹0和14进行测试"); } private function mouseClickHandler(e:MouseEvent):void { creat(int(_typeTxt.txt.text)); } private function mouseDownHandler(e:MouseEvent):void { setTimeout(function():void{_typeTxt.txt.text = "";},200); stage.focus = _typeTxt.txt; } private function creat(type:int):void { //var type:int=Math.floor(Math.random() * 11); /** * 设置Starling,的stage的宽和高,实际舞台的宽高除以你刚才设置的的宽高,是Starling里边的可视对象的放大倍数 * 如果设置viewPort , 也可以调整 */ switch (type) { case 0: _starling.stage.stageWidth = _sw * 0.5 ; _starling.stage.stageHeight = _sh * 0.5; print("2倍原来大小"); break; case 1: _starling.stage.stageWidth = _sw; _starling.stage.stageHeight = _sh; print("1倍原来大小"); break; case 2: _starling.stage.stageWidth = _sw * 2; _starling.stage.stageHeight = _sh * 2; print("0.5倍原来大小"); break; case 3: _starling.stage.stageWidth = _sw * 4; _starling.stage.stageHeight = _sh * 4; print("0.25倍原来大小"); break; case 4: _starling.stage.stageWidth = _sw * 0.5; _starling.stage.stageHeight = _sh * 0.5; _starling.viewPort = new Rectangle(0,0,_sw,_sh); print("两倍原来宽高,截取" + _sw + ","+ _sh + "范围"); break; case 5: _starling.stage.stageWidth = _sw * 0.5; _starling.stage.stageHeight = _sh * 0.5;; _starling.viewPort = new Rectangle(0,0,_sw * 0.5,_sh * 0.5); print("一倍原来宽高,截取" + _sw * 0.5 + ","+ _sh * 0.5 + "范围"); break; case 6: _starling.stage.stageWidth = _sw * 0.5; _starling.stage.stageHeight = _sh * 0.5; _starling.viewPort = new Rectangle(_sw * 0.25,_sh * 0.25 , _sw * 0.5 , _sh * 0.5); print("一倍原来宽高,截取" + _sw * 0.5 + ","+ _sh * 0.5 + "范围,并将坐标移到(" + _sw * 0.5 + ","+ _sh * 0.5 + ")位置"); break; case 7: _starling.stage.stageWidth = _sw ; _starling.stage.stageHeight = _sh ; _starling.viewPort = new Rectangle(0,0,_sw * 0.5,_sh * 0.5); print("0.5倍原来宽高,截取" + _sw * 0.5 + ","+ _sh * 0.5 + "范围"); break; case 8: _starling.stage.stageWidth = _sw; _starling.stage.stageHeight = _sh; _starling.viewPort = new Rectangle(0,0,_sw * 0.25,_sh * 0.25); print("0.25倍原来宽高,截取" + _sw * 0.25 + ","+ _sh *0.25 + "范围"); break; case 9: _starling.stage.stageWidth = _sw; _starling.stage.stageHeight = _sh; _starling.viewPort = new Rectangle(0,0,_sw * 2 , _sh * 2); print("2倍原来宽高,截取" + _sw * 2 + ","+ _sh * 2 + "范围。因为范围过大,超出舞台。超出舞台部分忽略"); break; case 10: _starling.stage.stageWidth = _sw * 2 ; _starling.stage.stageHeight = _sh * 2 ; _starling.viewPort = new Rectangle(0,0,_sw,_sh); print("0.5倍原来宽高,截取" + _sw + ","+ _sh + "范围。因为放大后,Staring的显示宽高不足" + _sw + ","+ _sh + ",所以,其余部分没有显示。"); break; case 11: _starling.stage.stageWidth = _sw * 2 ; _starling.stage.stageHeight = _sh ; print("0.5倍原来宽,1倍原来的高。所以看起来像压扁了"); break; case 12: _starling.stage.stageWidth = _sw ; _starling.stage.stageHeight = _sh * 2 ; print("1倍原来宽,0.5倍原来的高。所以看起来像压矮了"); break; case 13: _starling.stage.stageWidth = _sw * 0.5; _starling.stage.stageHeight = _sh ; _starling.viewPort = new Rectangle(0,0,_sw * 0.5 , _sh); print("1倍原来宽高,截取" + _sw * 0.5 + ","+ _sh + "范围。这个时,Staring宽度被截取一半"); break; case 14: _starling.stage.stageWidth = _sw * 0.5; _starling.stage.stageHeight = _sh ; _starling.viewPort = new Rectangle(0,0,_sw , _sh); print("2倍原来宽,1倍原来的高,截取" + _sw + ","+ _sh + "范围。这个时,Staring宽度放大两倍,高度却不放大。"); break; default: print("请输入0到14之间的数字,包裹0和14。要不,你就是猪头!"); break; } } private function print(str:String):void { _mesTxt.text = str; } private function rootCreatedHandler(e:Event):void { print(("构造"+ _starling.stage.getChildAt(0))); } } }
package com.vini123.game { import flash.display.Bitmap; import starling.display.Image; import starling.display.Sprite; import starling.events.Event; /** * @author vini123 * @email lichking_lin86@qq.com * @weixin vinifly * @date 2014-4-23 下午2:16:53 * */ public class Game extends Sprite { [Embed(source="../../../../asset/images/02.jpg")] private var Girl:Class; public function Game() { addEventListener(Event.ADDED_TO_STAGE , addStageHandler); } private function addStageHandler(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE , addStageHandler); var girl:Bitmap = new Girl() as Bitmap; addChild(Image.fromBitmap(girl)); } } }
package com.vini123.ui { import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; /** * @author vini123 * @email lichking_lin86@qq.com * @weixin vinifly * @date 2014-4-21 下午5:48:44 * */ public class Button extends Sprite { public var id:int; private var _label:String; private var _txt:TextField; private var _txtFormat:TextFormat; private var _size:int = 13; private var _txtFont:String = "Microsoft YaHei"; private var _defaultTxtColor:int = 0xffffff; private var _overTxtColor:int = 0xE32668; private var _background:Sprite; private var _backgroundColor:int = 0x0099ff; private var _frame:Sprite; private var _frameBorder:int = 0; private var _gapX:int = 10; private var _gapY:int = 4; private var _isSelect:Boolean = false; private var _isAdd:Boolean = false; private var _recFrame:Sprite; private var _checkFrame:Sprite; private var _isList:Boolean = false; public function Button(label:String , isList:Boolean = false):void { _label = label; _isList = isList; _txtFormat = new TextFormat(); _txtFormat.size = _size; _txtFormat.font = _txtFont; _txtFormat.bold = true; _txtFormat.letterSpacing = 1; _txt = new TextField(); addChild(_txt); _txt.defaultTextFormat = _txtFormat; _txt.autoSize = TextFieldAutoSize.LEFT; _txt.textColor = _defaultTxtColor; _txt.mouseEnabled = false; _txt.multiline = false; _txt.text = _label; _txt.x = _gapX ; _txt.y = _gapY * 0.6; _frame = new Sprite(); addChild(_frame); if(_isList) { drawRect(); } _background = new Sprite(); addChildAt(_background , 0); resizeDeep(); this.buttonMode = true; this.addEventListener(MouseEvent.ROLL_OVER , overHandler); this.addEventListener(MouseEvent.ROLL_OUT , outHandler); } private function drawRect():void { var tempHeight:int = _txt.textHeight -4; _recFrame = new Sprite(); _recFrame.graphics.lineStyle(1.2,_defaultTxtColor); _recFrame.graphics.beginFill(0xfff, 0); _recFrame.graphics.drawRect(0,0,tempHeight ,tempHeight); _recFrame.graphics.endFill(); addChild(_recFrame); _checkFrame = new Sprite(); _checkFrame.graphics.clear(); _checkFrame.graphics.lineStyle(1,_overTxtColor); _checkFrame.graphics.moveTo(1 , tempHeight*0.3 ); _checkFrame.graphics.lineTo(tempHeight * 0.3 ,tempHeight -1); _checkFrame.graphics.lineTo(tempHeight -1 , 0); _checkFrame.graphics.endFill(); _recFrame.addChild(_checkFrame); _recFrame.x = _txt.x + _txt.textWidth + _gapX + 2; _recFrame.y = _txt.y + 4; _checkFrame.visible = false; } private function resizeDeep():void { var tempWidth:int = _txt.textWidth + _gapX * 2 var tempHeight:int = _txt.textHeight + _gapY *2 ; if(_isList) { tempWidth = _txt.textWidth + _gapX * 3 + _recFrame.width + 5 ; } _background.graphics.clear(); _background.graphics.beginFill(_backgroundColor); _background.graphics.drawRoundRect(0,0,tempWidth , tempHeight , 5 , 5); _background.graphics.endFill(); } private function resizeFrame():void { _frame.graphics.clear(); if(_isSelect) { _frame.graphics.beginFill(0xFFFF00); _frame.graphics.drawRect(0 , 0 , _background.width ,_background.height); _frame.graphics.drawRect( _frameBorder , _frameBorder ,( _background.width - _frameBorder * 2) ,(_background.height - _frameBorder*2)); } } public function get label():String { return _label; } public function set label(value:String):void { _label = value; _txt.text = _label; resizeDeep(); } private function outHandler(e:MouseEvent):void { if(!_isSelect) { _txt.textColor = _defaultTxtColor; } } private function overHandler(e:MouseEvent):void { if(!_isSelect) { _txt.textColor = _overTxtColor; } } private function updataTxtColor():void { if(_isSelect) { _txt.textColor = _overTxtColor; } else { _txt.textColor = _defaultTxtColor; } } public function set isSelect(value:Boolean):void { _isSelect = value; updataTxtColor(); resizeFrame(); } public function get isAdd():Boolean { return _isAdd; } public function set isAdd(value:Boolean):void { _isAdd = value; if(_isAdd) { _checkFrame.visible = true; } else { _checkFrame.visible = false; } } } }
package com.vini123.ui { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; /** * @author vini123 * @email lichking_lin86@qq.com * @weixin vinifly * @date 2014-4-23 下午5:39:33 * */ public class InputTxt extends Sprite { private var _txt:TextField; private var _txtFormat:TextFormat; private var _background:Sprite; private var _gap:int = 5; public function InputTxt(w:int) { _txtFormat = new TextFormat(); _txtFormat.bold = true; _txtFormat.font = "Microsoft Yahei"; _txtFormat.size = 15 ; _txtFormat.color = 0x445566; _txt = new TextField(); _txt.multiline = false; _txt.wordWrap = false; _txt.type = TextFieldType.INPUT; _txt.autoSize = TextFieldAutoSize.LEFT; _txt.width = 30 ; addChild(_txt); _txt.y = _gap; _txt.maxChars = 2; _txt.defaultTextFormat = _txtFormat; _txt.text = "没有你的日子我真的好孤单" ; _background = new Sprite(); _background.graphics.clear(); _background.graphics.lineStyle(2 , 0x0099ff); _background.graphics.beginFill(0xffffff); _background.graphics.drawRect(0,0,w,_txt.textHeight + _gap *2); _background.graphics.endFill(); addChildAt(_background,0); _txt.text = ""; } public function get txt():TextField { return _txt; } } }
package com.vini123.ui { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; /** * @author vini123 * @email lichking_lin86@qq.com * @weixin vinifly * @date 2014-4-23 下午5:41:28 * */ public class OutputTxt extends Sprite { private var _txt:TextField; private var _txtFormat:TextFormat; public function OutputTxt() { _txtFormat = new TextFormat(); _txtFormat.bold = true; _txtFormat.font = "Microsoft Yahei"; _txtFormat.size = 15 ; _txtFormat.color = 0x0099ff; _txt = new TextField(); _txt.multiline = true; _txt.wordWrap = true; _txt.type = TextFieldType.INPUT; _txt.autoSize = TextFieldAutoSize.LEFT; _txt.width = 520 ; addChild(_txt); _txt.defaultTextFormat = _txtFormat; } public function get txt():TextField { return _txt; } public function set text(value:String):void { _txt.appendText(value + "\n"); if(_txt.numLines >20) { _txt.text = ""; _txt.appendText(value + "\n"); } } } }