AS3按比例缩放外部图像

Question

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

  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;

我还没有对此进行测试，因此可能存在一些故障，但希望它能给您带来正确的想法。