AS3 Panel ---- 容器框类 扩展、优化了其它的子控件

在做这个Panel控件的时候,发现,滚动条控件还有功能还是可以优化及修复的。

Panel类:

package
{
	import controlsEvents.ScrollerEvent;
	
	import flash.display.DisplayObject;
	import flash.display.Shape;

	/**
	 * 容器框类
	 * @author Jave.Lin
	 */
	public class Panel extends Control
	{
		private var _isDrawBorder:Boolean=true;
		private var _isDrawBackground:Boolean=true;
		private var _containerMask:Shape;//容器遮罩
		private var _container:Control;//容器
		private var _isUseHs:Boolean=false;//是否使用水平滚动条
		private var _isUseVs:Boolean=false;//是否使用垂直滚动条
		
		private var _sW:Number=0;//显示区域的宽
		private var _sH:Number=0;//显示区域的高
		
		private var _hs:HorizontalScroller;
		private var _vs:VerticalScroller;
		//是否使用垂直滚动条
		public function get isUseVs():Boolean
		{
			return _isUseVs;
		}
		
		public function set isUseVs(value:Boolean):void
		{
			if(_isUseVs!=value)
			{
				_isUseVs=value;
				if(_isUseVs)super.addChild(_vs);
				else super.removeChild(_vs);
				
				onLayout();
				refreshBackground();
				updateScroller();
			}
		}
		//是否使用水平滚动条
		public function get isUseHs():Boolean
		{
			return _isUseHs;
		}
		
		public function set isUseHs(value:Boolean):void
		{
			if(_isUseHs!=value)
			{
				_isUseHs=value;
				if(_isUseHs)super.addChild(_hs);
				else super.removeChild(_hs);
				
				onLayout();
				refreshBackground();
				updateScroller();
			}
		}
		
		//是否绘制边框
		public function get isDrawBorder():Boolean
		{
			return _isDrawBorder;
		}
		
		public function set isDrawBorder(value:Boolean):void
		{
			if(_isDrawBorder!=value)
			{
				_isDrawBorder=value;
				
				refreshBackground();
			}
		}
		//是否绘制背景
		public function get isDrawBackground():Boolean
		{
			return _isDrawBackground;
		}
		
		public function set isDrawBackground(value:Boolean):void
		{
			if(_isDrawBackground!=value)
			{
				_isDrawBackground=value;
				
				refreshBackground();
			}
		}
				
		public override function get width():Number
		{
			return super.width;
		}
		
		public override function set width(value:Number):void
		{
			if(width!=value)
			{
				_w=value;
				
				onLayout();
				refreshBackground();
				updateScroller();
			}
		}
		
		public override function get height():Number
		{
			return super.height;
		}
		
		public override function set height(value:Number):void
		{
			if(_h!=value)
			{
				_h=value;
				
				onLayout();
				refreshBackground();
				updateScroller();
			}
		}
		
		public function Panel()
		{
			super();
		}
		
		public override function addChild(child:DisplayObject):DisplayObject
		{
			return _container.addChild(child);
		}
		
		public override function removeChild(child:DisplayObject):DisplayObject
		{
			return _container.removeChild(child);
		}
		
		public function draw0($isDrawBorder:Boolean,$isDrawBackground:Boolean):void
		{
			_isDrawBorder=$isDrawBorder;
			_isDrawBackground=$isDrawBackground;
			
			refreshBackground();
		}
		
		public function draw1($width:Number,$height:Number):void
		{
			_w=$width;
			_h=$height;
			
			onLayout();
			refreshBackground();
			updateScroller();
		}
		
		public function draw2($isDrawBorder:Boolean,$isDrawBackground:Boolean,$width:Number,$height:Number):void
		{
			_isDrawBorder=$isDrawBorder;
			_isDrawBackground=$isDrawBackground;
			_w=$width;
			_h=$height;
			
			onLayout();
			refreshBackground();
			updateScroller();
		}
		
		public function refreshScroller():void
		{
			updateScroller();
		}
		
		private function updateScroller():void
		{
			if(!_isUseVs)
			{
				_vs.curVisibleRate=1;
			}
			else
			{
				//值范围
				if(_sH>_container.height)
				{
					_vs.maxValue=_sH;
				}
				else
				{
					_vs.maxValue=_container.height-_sH;
				}
				//显示比率
				_vs.curVisibleRate=1-(_sH/_container.height);
			}
			if(!_isUseHs)
			{
				_hs.curVisibleRate=1;
			}
			else
			{
				//值范围
				if(_sW>_container.width)
				{
					_hs.maxValue=_sW;
				}
				else
				{
					_hs.maxValue=_container.width-_sW;
				}
				_hs.curVisibleRate=1-(_sW/_container.width);
			}
		}
		
		private function onLayout():void
		{
			//计算显示区域大小
			if(_isUseVs)_sW=width-_vs.width;
			else _sW=width;
			if(_isUseHs)_sH=height-_hs.height;
			else _sH=height;
			
			//设置滚动条位置
			if(_isUseVs)
			{
				_vs.x=_sW;
				_vs.height=_sH;
			}
			if(_isUseHs)
			{
				_hs.y=_sH;
				_hs.width=_sW;
			}			
		}
		
		protected override function initialize():void
		{
			_w=100;
			_h=100;
			
			_container=new Control();
			super.addChild(_container);
			
			_containerMask=new Shape();
			super.addChild(_containerMask);
			
			_container.mask=_containerMask;
			
			_vs=new VerticalScroller();
			_hs=new HorizontalScroller();
			
			_vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
			_hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
			
			onLayout();
			updateScroller();
		}
		
		private function onHsValueChangedHandler(e:ScrollerEvent):void
		{
			_container.x=-e.value;
		}
		
		private function onVsValueChangedHandler(e:ScrollerEvent):void
		{
			_container.y=-e.value;
		}
		
		protected override function refreshBackground():void
		{
			_containerMask.graphics.clear();
			_containerMask.graphics.beginFill(0);
			_containerMask.graphics.drawRect(0,0,_sW,_sH);
			_containerMask.graphics.endFill();
			
			this.graphics.clear();
			if(_isDrawBackground)
			{
				this.graphics.beginFill(0x00ff00,.1);
				this.graphics.drawRect(0,0,width,height);
				this.graphics.endFill();
			}
			if(_isDrawBorder)
			{
				this.graphics.lineStyle(1,0,.5);
				this.graphics.moveTo(0,0);
				this.graphics.lineTo(width,0);
				this.graphics.lineTo(width,height);
				this.graphics.lineTo(0,height);
				this.graphics.lineTo(0,0);
			}
		}
	}
}

测试类:

package test
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class PanelTest extends Sprite
	{
		private var p:Panel;
		
		public function PanelTest()
		{
			super();
			
			stage.color=0xccccbb;
			stage.frameRate=60;
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.NO_SCALE;
			
			p=new Panel();
			addChild(p);
			p.width=300;
			p.isDrawBackground=false;
			p.x=100;
			p.y=100;
			
			var textbox:TextBox=new TextBox("testasdfasdfasdfasfd",0,0,500,500);
			p.addChild(textbox);
			
			textbox.isWordWrap=true;
			textbox.height=500;
			textbox.x=50;
			textbox.y=60;
			
			var bt:Button=new Button("button");
			p.addChild(bt);
			p.isUseHs=true;
			p.isUseVs=true;
			bt.x=50;
			bt.y=10;
			
			bt.addEventListener(MouseEvent.CLICK,onClick);
		}
		
		private function onClick(e:MouseEvent):void
		{
			if(!p.hasEventListener(Event.ENTER_FRAME))
			{
				p.addEventListener(Event.ENTER_FRAME,onEnterFrame);
			}
			else
			{
				p.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
			}
		}
		
		private var dW:Number=10;
		private var dH:Number=10;
		
		private function onEnterFrame(e:Event):void
		{
			if(p.width<50)
			{
				dW=10;
			}
			else if(p.width>200)
			{
				dW=-10;
			}
			
			if(p.height<50)
			{
				dH=10;
			}
			else if(p.height>200)
			{
				dH=-10;
			}
			
			p.draw1(p.width+dW,p.height+dH);
		}
	}
}

运行图片效果:


评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值