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; 

我沒有測試過，所以可能會有一些小故障，但希望它能給你正確的想法。