AS3按比例缩放外部图像
问题描述:
目前我正在使用for循环来动态加载XML图像并将它们放在网格中作为缩略图。我已经安排了设置,并且所有数据都可以顺利加载,但是现在我需要将图像缩放为小型容器影片剪辑中的100px x 100px大小。我的代码如下。AS3按比例缩放外部图像
import gs.*;
import gs.easing.*;
var bttnHeight:Number = 20;
var select:Number = 0;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, showXML);
xmlLoader.load(new URLRequest("testxml.xml"));
var list_mc:Array = new Array();
function showXML(e:Event):void {
XML.ignoreWhitespace = true;
var nodes:XML = new XML(e.target.data);
var gallcount = nodes.gallery.length();
var list_mc = new listitem();
//Generate menu to select gallery
function populateMenu():void {
var spacing:Number = 0;
for (var i=0; i<gallcount; i++) {
list_mc[i] = new listitem();
list_mc[i].name = "li" + i;
list_mc[i].y = i*bttnHeight;
list_mc[i].gallname.text = nodes.gallery[i].attributes();
menu_mc.addChild(list_mc[i]);
list_mc[i].addEventListener(MouseEvent.ROLL_OVER, rollover);
list_mc[i].addEventListener(MouseEvent.ROLL_OUT, rollout);
list_mc[i].buttonMode = true;
list_mc[i].mouseChildren = false;
}
menu_mc.mask = mask_mc;
}
//list_mc.mask(mask_mc);
var boundryWidth = mask_mc.width;
var boundryHeight = mask_mc.height;
var diff:Number = 0;
var destY:Number = 0;
var ratio:Number = 0;
var buffer:Number = bttnHeight*2;
function findDest(e:MouseEvent):void {
if (mouseX>0 && mouseX<(boundryWidth)) {
if (mouseY >0 && mouseY<(boundryHeight)) {
ratio = mouseY/boundryHeight;
diff = menu_mc.height-boundryHeight+buffer;
destY = Math.floor(-ratio*diff)+buffer/2;
}
}
}
var tween:Number = 5;
//This creats the scroll easing
function moveMenu() {
if (menu_mc.height>boundryHeight) {
menu_mc.y += (destY-menu_mc.y)/tween;
if (menu_mc.y>0) {
menu_mc.y = 0;
} else if (menu_mc.y<(boundryHeight-menu_mc.height)) {
menu_mc.y = boundryHeight-menu_mc.height;
}
}
}
function rollover(e:Event):void {
TweenLite.to(e.currentTarget.li_bg, .4, {tint:0x334499});
}
function rollout(e:Event):void {
TweenLite.to(e.currentTarget.li_bg, .4, {removeTint:true});
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, findDest);
stage.addEventListener(Event.ENTER_FRAME, moveMenu);
populateMenu();
select = 0;
//Generate thumbnails
function genThumb():void {
var photos = nodes.gallery[select].photo;
var thumbframe:Array = new Array();
var row = 0;
var column = 0;
var loaderArray:Array = new Array();
for (var i=0; i<photos.length(); i++) {
thumbframe[i] = new Sprite;
thumbframe[i].graphics.beginFill(0x0000FF);
thumbframe[i].graphics.drawRect(0,0,100,100);
thumbframe[i].graphics.endFill();
thumbframe[i].y = row;
thumbframe[i].x = column;
loaderArray[i] = new Loader();
loaderArray[i].load(new URLRequest(photos[i].text()));
trace(loaderArray[i].height);
var index = i+1;
container_mc.addChild(thumbframe[i]);
if (index%5 == 0) {
row=row+120;
column = 0;
} else {
column=column+120;
}
thumbframe[i].addChild(loaderArray[i]);
}
}
genThumb();
}
装载机和容器都在各自的阵列中。图片加载正确,但我对如何缩放它们感到不知所措(最终,我希望在可能的情况下将它们加载到动画中)。
在此先感谢您的帮助!
答
您看起来像需要将您的位图缩放到100x100平方。您需要等到加载器完成加载才能这样做,因为在此之前您不会知道该项目的尺寸。
当您创建装载机,添加事件侦听器,像这样:
loaderArray[i].contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
然后添加此功能:
function onLoadComplete(event:Event):void
{
var info:LoaderInfo = LoaderInfo(event.currentTarget);
info.removeEventListener(Event.COMPLETE);
var loader:Loader = info.loader;
var scaleWidth:Number = 100/loader.width;
var scaleHeight:Number = 100/loader.height;
if (scaleWidth < scaleHeight)
loader.scaleX = loader.scaleY = scaleWidth;
else
loader.scaleX = loader.scaleY = scaleHeight;
}
这可能有点复杂,但它确实做到了清理已添加的事件侦听器,并查找加载器的尺寸(因为它已完成加载,现在可以获取该尺寸),并适当缩放加载器。
如果你需要它是你的缩略图中居中,这增加了的onLoadComplete方法的底部:
loader.x = (100 - loader.width) * 0.5;
loader.y = (100 - loader.height) * 0.5;
,或者你需要它占据整个缩略图并切断边缘,将其更改这个(不平等是围绕另一方向)
if (scaleWidth > scaleHeight)
loader.scaleX = loader.scaleY = scaleWidth;
else
loader.scaleX = loader.scaleY = scaleHeight;
,并补充一点:
var shape:Shape = new Shape();
var g:Graphics = shape.graphics;
g.beginFill(0x00FF00);
g.drawRect(0, 0, 100, 100);
g.endFill();
loader.mask = g;
我没有测试过,所以可能会有一些小故障,但希望它能给你正确的想法。
顺便说一句,list_mc的第一位是用于动态生成的菜单来选择图库,并且与问题无关。 – DeaconDesperado 2009-11-20 17:09:24