图片框类:
package
{
import controlsEvents.ScrollerEvent;
import flash.display.Bitmap;
import flash.display.Shape;
/**
* 图片框类
* @author Jave.Lin
*/
public class PictureBox extends Control
{
private var _hs:HorizontalScroller;//水平滚动条
private var _vs:VerticalScroller;//垂直滚动条
private var _imageMask:Shape;//图片的遮罩
private var _image:Bitmap;//图片
private var _sW:Number;//显示图片区域的宽
private var _sH:Number;//显示图片区域的高
public override function set width(value:Number):void
{
if(super.width!=value)
{
super.width=value;
onLayout();
redrawMask();
updateScroller();
}
}
public override function set height(value:Number):void
{
if(super.height!=value)
{
super.height=value;
onLayout();
redrawMask();
updateScroller();
}
}
public function get image():Bitmap
{
return _image;
}
public function set image(value:Bitmap):void
{
if(_image!=value)
{
if(_image && _image.parent)
{
_image.parent.removeChild(_image);
}
_image=value;
if(_image)
{
addChild(_image);
_imageMask.visible=true;
_image.mask=_imageMask;
setChildIndex(_image,0);
}
else
{
_imageMask.visible=false;
}
updateScroller();
}
}
public function PictureBox($image:Bitmap=null)
{
super();
image=$image;
}
//提示同时设置宽、高的一个公开方法,因为每设置一下,宽、或是高,都会重绘一次
//而这个方法设置两个属性,只重绘一次
public function setWidthHeight($width:Number,$height:Number):void
{
if(super.width!=$width && super.height!=$height)
{
super.width=$width;
super.height=$height;
onLayout();
redrawMask();
updateScroller();
}
}
private function onLayout():void
{
//计算出显示区域的宽、高
_sW=width-_vs.width;
_sH=height-_hs.height;
//垂直滚动条的高,及位置
_vs.height=_sH;
_vs.x=_sW;
_vs.y=0;
//水平滚动条的宽,及位置
_hs.width=_sW;
_hs.x=0;
_hs.y=_sH;
}
private function updateScroller():void
{
if(_image==null)
{
_vs.curVisibleRate=1;
_hs.curVisibleRate=1;
}
else
{
//值范围
_vs.maxValue=_image.height-_sH;
_hs.maxValue=_image.width-_sW;
//显示比率
_vs.curVisibleRate=1-(_sH/_image.height);
_hs.curVisibleRate=1-(_sW/_image.width);
}
}
private function redrawMask():void
{
_imageMask.graphics.clear();
//背景
_imageMask.graphics.beginFill(0,.2);
_imageMask.graphics.drawRect(0,0,_sW,_sH);
_imageMask.graphics.endFill();
}
protected override function initialize():void
{
_hs=new HorizontalScroller();
addChild(_hs);
_vs=new VerticalScroller();
addChild(_vs);
_w=100;
_h=100;
_imageMask=new Shape();
_imageMask.visible=false;
addChild(_imageMask);
_vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
_hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
onLayout();
redrawMask();
}
private function onHsValueChangedHandler(e:ScrollerEvent):void
{
if(_image)
{
_image.x=-e.value;
}
}
private function onVsValueChangedHandler(e:ScrollerEvent):void
{
if(_image)
{
_image.y=-e.value;
}
}
protected override function refreshBackground():void
{
this.graphics.clear();
//背景
this.graphics.beginFill(0x008800,.2);
this.graphics.drawRect(0,0,width,height);
this.graphics.endFill();
}
}
}
测试代码:
package
{
import controlsEvents.RadioButtonEvent;
import controlsEvents.ScrollerEvent;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.system.ApplicationDomain;
import flash.system.LoaderContext;
[SWF(width="1200", height="720", frameRate="60")]
public class ControlsTest extends Sprite
{
private var rbt:RadioButton;
private var bt:Button;
private var hs:HorizontalScroller;
private var vs:VerticalScroller;
private var hsLb:Label;
private var vsLb:Label;
private var pb:PictureBox;
public function ControlsTest()
{
stage.color=0;
stage.frameRate=60;
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;
rbt=new RadioButton();
rbt.text="test";
rbt.x=50;
rbt.y=50;
rbt.checked=true;
addChild(rbt);
rbt.addEventListener(RadioButtonEvent.ON_CHECKED_CHANGED,onCheckedChangedHandler);
bt=new Button("testButton");
addChild(bt);
bt.x=100;
bt.y=100;
bt.addEventListener(MouseEvent.CLICK,onBtClickHandler);
//bt.width=50;
hs=new HorizontalScroller();
hs.curVisibleRate=.5;
addChild(hs);
hs.x=100;
hs.y=200;
hs.maxValue=1000;
hs.minValue=500;
hs.width=200;
// hs.height=20;
hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
hsLb=new Label();
addChild(hsLb);
hsLb.x=100;
hsLb.y=200+10;
hsLb.text="HorizontalScroller.value:"+hs.curValue;
vs=new VerticalScroller();
vs.curVisibleRate=.5;
addChild(vs);
vs.x=100;
vs.y=250;
vs.maxValue=1000;
vs.minValue=500;
vs.height=200;
// vs.width=20;
vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
vsLb=new Label();
addChild(vsLb);
vsLb.x=100;
vsLb.y=200+60;
vsLb.text="HorizontalScroller.value:"+vs.curValue;
pb=new PictureBox();
addChild(pb);
pb.width=400;
pb.height=200;
pb.x=300;
pb.y=50;
//下面这行代码,可以看动,在EnterFrame事件时,时刻设置pb的宽、高都是可以的。
pb.addEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
var loader:Loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onPicLoadedHandler);
loader.load(new URLRequest("res/test.jpg"),new LoaderContext(false, ApplicationDomain.currentDomain));
}
private var _dW:Number=10;
private var _dH:Number=10;
private function onPbEnterFrameHandler(e:Event):void
{
if(pb.width<=100)
{
_dW=Math.abs(_dW);
}
else if(pb.width>=400)
{
_dW=Math.abs(_dW)*-1;
}
if(pb.height<=100)
{
_dH=Math.abs(_dH);
}
else if(pb.height>=200)
{
_dH=Math.abs(_dH)*-1;
}
pb.setWidthHeight(pb.width+_dW,pb.height+_dH);
// trace("pb.width",pb.width);
// trace("pb.height",pb.height);
}
private function onPicLoadedHandler(e:Event):void
{
// trace(e);
var bmp:Bitmap=e.currentTarget.content as Bitmap;
// trace(bmp);
pb.image=bmp;
}
private function onBtClickHandler(e:MouseEvent):void
{
hs.minValue+=100;
if(hs.minValue>=hs.maxValue)
{
hs.minValue=0;
}
hs.curVisibleRate+=.1;
if(hs.curVisibleRate>=1)
{
hs.curVisibleRate=.1;
}
if(pb.hasEventListener(Event.ENTER_FRAME))
{
pb.removeEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
}
else
{
pb.addEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
}
}
private function onVsValueChangedHandler(e:ScrollerEvent):void
{
vsLb.text="VerticalScroller.value:"+e.value;
}
private function onHsValueChangedHandler(e:ScrollerEvent):void
{
hsLb.text="HorizontalScroller.value:"+e.value;
}
private function onCheckedChangedHandler(e:RadioButtonEvent):void
{
trace(rbt.checked);
}
}
}
运行图片效果:
图片框里面的图片资源:是一款日本SLG单机游戏,挺好玩的,游戏名称叫:超级魔法大战,以图是技能素材图:
也就是以上代码中:'res/test.jpg'这图片: