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;

我没有对此进行测试，因此可能会出现一些故障，但希望它能给你正确的想法。

AS3按比例缩放外部图像

1 个答案: