AS3中图片无法按按钮设置尺寸缩放的问题求助

问题 #

加载图片后，图片并未按设置的按钮尺寸缩放，反而把按钮撑大。设置按钮尺寸为200x200时，最终显示的图片比100x100大3-4倍。

MyButton类代码 #

public function MyButton()
{// this is ctor
   ImageLoader = new Loader();
   addChild(ImageContainer);
}
public function SetWidthAndHeight(newWidth: Number, newHeight: Number): void
{
    width = newWidth;
    height = newHeight;
    //ImageContainer is a MovieClip inside the button
    ImageContainer.height = newHeight;
    ImageContainer.width = newWidth;
}
public function LoadImage(address: String): void
{    
    ImageLoader.load(new URLRequest(address));
}

调用代码 #

var g_newButton = new MyButton();
g_newButton.ImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, OnCompleteHandler);

g_newButton.SetWidthAndHeight(100,100);
g_newButton.LoadImage("myImage.jpg");
function OnCompleteHandler(loadEvent: Event) 
{   
     //g_newButton.ImageLoader.content is always null
    trace("button width " +g_newButton.width);
    trace("button height " +g_newButton.height);
    g_newButton.ImageContainer.addChild(loadEvent.currentTarget.content);
    addChild(g_newButton);
}

运行输出 #

button width 750
button height 385.55

疑问：为何无法得到设置的100x100尺寸？如何让图片缩放至按钮尺寸，或与按钮大小一致？

解决方案 #

问题根源 #

1. 容器自动缩放未限制：ImageContainer作为MovieClip，添加大尺寸图片时会自动调整自身尺寸适配子元素，进而撑大整个按钮，你之前设置的尺寸被覆盖。
2. 图片未做缩放处理：加载完成的图片保持原始尺寸，没有匹配ImageContainer的预设大小。
3. ImageLoader.content为空的原因：直接访问g_newButton.ImageLoader.content时机不对，需在contentLoaderInfo的COMPLETE事件触发后，通过事件对象获取内容才有效。

修复步骤 #

1. 强制缩放加载完成的图片
   修改OnCompleteHandler，先将图片缩放到容器尺寸再添加，避免容器被撑大：

function OnCompleteHandler(loadEvent: Event) 
{   
    var loadedImage:DisplayObject = loadEvent.currentTarget.content;
    // 把图片缩放到容器的预设尺寸
    loadedImage.width = g_newButton.ImageContainer.width;
    loadedImage.height = g_newButton.ImageContainer.height;
    g_newButton.ImageContainer.addChild(loadedImage);
    // 重新锁定按钮尺寸
    g_newButton.width = g_newButton.ImageContainer.width;
    g_newButton.height = g_newButton.ImageContainer.height;
    trace("button width " +g_newButton.width);
    trace("button height " +g_newButton.height);
    addChild(g_newButton);
}

2. 锁定容器尺寸，添加裁剪
   在SetWidthAndHeight方法中给ImageContainer设置scrollRect，确保超出容器的内容被裁剪，同时固定容器尺寸：

public function SetWidthAndHeight(newWidth: Number, newHeight: Number): void
{
    width = newWidth;
    height = newHeight;
    ImageContainer.width = newWidth;
    ImageContainer.height = newHeight;
    // 裁剪超出容器范围的内容
    ImageContainer.scrollRect = new Rectangle(0, 0, newWidth, newHeight);
}

3. 封装加载逻辑到MyButton内部
   把图片加载的监听逻辑放到类内部，避免外部代码混乱，同时确保尺寸锁定逻辑统一：

public function MyButton()
{
    ImageLoader = new Loader();
    // 内部监听加载完成事件
    ImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
    addChild(ImageContainer);
}

private function onImageLoaded(e:Event):void {
    var img:DisplayObject = e.currentTarget.content;
    // 缩放图片到容器尺寸
    img.width = ImageContainer.width;
    img.height = ImageContainer.height;
    ImageContainer.addChild(img);
    // 强制锁定按钮尺寸
    this.width = ImageContainer.width;
    this.height = ImageContainer.height;
}

public function LoadImage(address: String): void
{    
    ImageLoader.load(new URLRequest(address));
}

外部调用简化为：

var g_newButton = new MyButton();
g_newButton.SetWidthAndHeight(100,100);
g_newButton.LoadImage("myImage.jpg");
addChild(g_newButton);

内容的提问来源于stack exchange，提问作者ma1169