AS3按比例缩放外部图像

Question

目前我正在使用for循环来动态加载XML图像并将它们放在网格中作为缩略图。我已经安排了设置，并且所有数据都可以顺利加载，但是现在我需要将图像缩放为小型容器影片剪辑中的100px x 100px大小。我的代码如下。

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(); 

} 

装载机和容器都在各自的阵列中。图片加载正确，但我对如何缩放它们感到不知所措（最终，我希望在可能的情况下将它们加载到动画中）。

在此先感谢您的帮助！

Answer 1

您看起来像需要将您的位图缩放到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; 

我没有测试过，所以可能会有一些小故障，但希望它能给你正确的想法。