读书人

flash 加载一个较大图片并拖动显示有关

发布时间: 2012-03-07 09:13:51 作者: rapoo

flash 加载一个较大图片并拖动显示问题
想做一个flash显示清明上河图,但因为图片宽度太大,到达2W多像素,将图片切割成小图片后,想在flash内显示,
并在窗口下做一个拖动条来控制屏幕显示部分。请问有什么好的方法吗?谢谢大家了。
初学flash,谢谢了。


[解决办法]
可以这样的思路
1,把图切成N个小块,并按坐标保存在文件里
2,设置一个长宽分别为x,y的sprite,拿它来当显示区域,到时,能见的地方就只有这么大
3,在sprite旁边再放置水平与竖直两个滚动条
4,当滚动条滚动时,计算一下,大概需要多少比例,需要多少宽长,然后把图片一张一张载入再拼起来放在sprite里面
[解决办法]
测试了一下:当图像尺寸过大时,加载进去后,根本显示不出来(纯黑色~~~~~~~~~~~)
查了一下,可能是这个影响的:BitmapData 对象的最大宽度和高度为 2880 像素
于是将你那个宽20000像素的图切开了,切成宽2500的八张图,命名为:"qmsht_1.jpg","qmsht_2.jpg","qmsht_3.jpg","qmsht_4.jpg","qmsht_5.jpg","qmsht_6.jpg","qmsht_7.jpg","qmsht_8.jpg"
然后在程序中把他们依次加载进来,我没有使用滚动条,而是根据鼠标所在位置进行自动滚动了。所有代码如下,希望对你有点帮助吧。

JScript code
package {    import flash.display.Loader;    import flash.display.LoaderInfo;    import flash.display.Sprite;    import flash.events.Event;    import flash.events.IOErrorEvent;    import flash.events.MouseEvent;    import flash.geom.Point;    import flash.net.URLRequest;    import flash.text.TextField;    import flash.text.TextFormat;    import flash.ui.Mouse;    public class ScrollPic extends Sprite {        private var smain:Sprite;        private var smask:Sprite;        private var container:Sprite;        private var marrow:Sprite;        //BitmapData 对象的最大宽度和高度为 2880 像素        //将原宽20000的图片切割成宽2500的8张分图        public function ScrollPic() {            container=new Sprite();            addChild(container);            var sbg:Sprite=new Sprite();            sbg.graphics.beginFill(0xffffff,0.25);            sbg.graphics.drawRect(-5,-5,410,310);            sbg.graphics.endFill();            smask=new Sprite();            smask.graphics.beginFill(0x000000);            smask.graphics.drawRect(0,0,400,300);            smask.graphics.endFill();            smain=new Sprite();            container.addChild(sbg);            container.addChild(smain);            container.addChild(smask);            smain.mask=smask;            marrow=new Sprite();            marrow.graphics.lineStyle(3,0xffffff);            marrow.graphics.beginFill(0x000000,0.75);            marrow.graphics.moveTo(-15,0);            marrow.graphics.lineTo(-15,8);            marrow.graphics.lineTo(-3,8);            marrow.graphics.lineTo(-3,15);            marrow.graphics.lineTo(15,0);            marrow.graphics.lineTo(-3,-15);            marrow.graphics.lineTo(-3,-8);            marrow.graphics.lineTo(-15,-8);            marrow.graphics.lineTo(-15,0);            marrow.graphics.endFill();            marrow.name="marrow";            container.addChild(marrow);            container.x=40;            container.y=10;            var pics:Array=["qmsht_1.jpg","qmsht_2.jpg","qmsht_3.jpg","qmsht_4.jpg","qmsht_5.jpg","qmsht_6.jpg","qmsht_7.jpg","qmsht_8.jpg"];            for (var i:int=0; i<pics.length; i++) {                var picurl:URLRequest=new URLRequest(pics[i]);                var loader:Loader=new Loader();                loader.load(picurl);                loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loader_completeHandler);                loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loader_ioerrorHandler);            }            container.addEventListener(MouseEvent.ROLL_OVER,container_rollover);            container.addEventListener(MouseEvent.ROLL_OUT,container_rollout);            addEventListener(Event.ENTER_FRAME,enterframe);        }        private function container_rollover(e:MouseEvent):void{            Mouse.hide();        }        private function container_rollout(e:MouseEvent):void{            Mouse.show();        }        private function enterframe(e:Event):void{            if(smask.hitTestPoint(mouseX,mouseY)){                var p:Point=new Point(mouseX,mouseY);                p=smask.globalToLocal(p);                marrow.x=p.x;                marrow.y=p.y;                var p0:Point=smask.globalToLocal(new Point(240,160));                var px:Number=p.x-p0.x;                var py:Number=p.y-p0.y;                marrow.rotation=Math.atan2(py,px)*180/Math.PI;                py=Math.round(py/5);                px=Math.round(px/5);                if(smain.x>=smask.width-smain.width+px && smain.x<=px)smain.x-=px;                if(smain.y>=smask.height-smain.height+py && smain.y<=py)smain.y-=py;            }        }        private function loader_completeHandler(e:Event):void {            var loaderinfo:LoaderInfo=LoaderInfo(e.target);            //根据图片名称调整图片位置            var re:RegExp=/qmsht_(?P<picindex>\d+)\.jpg$/;            if(re.test(loaderinfo.url)){                var picindex:Number=Number(loaderinfo.url.match(re).picindex);                var pic:Loader=loaderinfo.loader;                pic.x=(picindex-1)*2500;                smain.addChildAt(pic,0);            }        }        private function loader_ioerrorHandler(e:IOErrorEvent):void {            var tf:TextField=new TextField();            var tfmt:TextFormat=new TextFormat();            tfmt.color=0x00ffff;            tf.defaultTextFormat=tfmt;            tf.wordWrap=true;            tf.width=stage.stageWidth-20;            tf.multiline=true;            tf.text=e.text;            tf.autoSize="left";            tf.x=10;            addChild(tf);        }    }} 

读书人网 >Flash

热点推荐