Simplebutton图像比实际大

Question

我正在创建一个按钮，我使用beginBitmapFill方法向其添加图像。一切都正常工作，问题是Loader ()加载的图像比实际大

创建按钮的类

​

package mode {
	import flash.display.Sprite;
	import org.osmf.net.StreamingURLResource;
	
	public class LoadButton extends Sprite 
	{
		public var Save;
		public function LoadButton(x:uint,save:String,url:String) 
		{
			var button:CustomSimpleButton = new CustomSimpleButton(url);
			button.x = x;
			Save = save;
			addChild(button);
		}
	}
}

import flash.display.*;
import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.Shape;
import flash.display.SimpleButton;
import flash.events.*;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.geom.Matrix;

class CustomSimpleButton extends SimpleButton 
{
	private var upColor:uint   = 0xFFCC00;
	private var overColor:uint = 0xCCFF00;
	private var downColor:uint = 0x00CCFF;
	private var sizew:uint      = 100;
	private var sizeh:uint      = 88;
	
	public function CustomSimpleButton(url:String) 
	{
		downState      = new ButtonDisplayState(downColor, sizew,sizeh,url);
		overState      = new ButtonDisplayState(overColor, sizew,sizeh,url);
		upState        = new ButtonDisplayState(upColor, sizew,sizeh,url);
		hitTestState   = new ButtonDisplayState(upColor, sizew * 2,sizeh,url);
		hitTestState.x = -(sizew / 4);
		hitTestState.y = hitTestState.x;
		useHandCursor  = true;
	}
}

class ButtonDisplayState extends Shape 
{
	private var bgColor:uint;
	private var size:uint;
	private var sizeh:uint;
	
	public function ButtonDisplayState(bgColor:uint, sizew:uint,sizeh:uint,url:String) 
	{
		this.bgColor = bgColor;
		this.size    = sizew;
		this.sizeh = sizeh;
		draw(url);
	}
	
	private function draw(url:String):void 
	{
		var myLoader:Loader = new Loader(); 
		var image:Bitmap;
		var uri = new URLRequest(url);
		myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event)
		{
			image = new Bitmap(e.target.content.bitmapData);

			graphics.beginBitmapFill(image.bitmapData);
			graphics.drawRect(0, 0, 100, 88);
			graphics.endFill();
		});
		myLoader.load(uri);	
	}
}

​

图像如何为100x88

​

​

按原样

​

​

Answer 1

它显示为那样裁剪的原因，是因为BitmapData比您填充的区域大。

在用加载的BitmapData填充形状之前，需要将其缩小到合适的大小。

基于answer to this question，您可以执行以下操作：

    var scaleAmount:Number;
    if(e.target.content.width >= e.target.content.height){
        scaleAmount = size / e.target.content.width;
    }else{
        scaleAmount = sizeh / e.target.content.height;
    }
    var scaledBitmapData:BitmapData = scaleBitmapData(e.target.content.bitmapData, scaleAmount);

    graphics.beginBitmapFill(scaledBitmapData);
    graphics.drawRect(0, 0, size, sizeh);
    graphics.endFill();

    function scaleBitmapData(bitmapData:BitmapData, scale:Number):BitmapData {
        scale = Math.abs(scale);
        var width:int = (bitmapData.width * scale) || 1;
        var height:int = (bitmapData.height * scale) || 1;
        var transparent:Boolean = bitmapData.transparent;
        var result:BitmapData = new BitmapData(width, height, transparent);
        var matrix:Matrix = new Matrix();
        matrix.scale(scale, scale);
        result.draw(bitmapData, matrix);
        return result;
    }

不过，将按钮状态设为Sprite并添加加载的Bitmap对象并直接缩放它可能会更简单：

class ButtonDisplayState extends Sprite
{
    private var bgColor:uint;
    private var image:Bitmap;
    private var size:uint;
    private var sizeh:uint;

    public function ButtonDisplayState(bgColor:uint, sizew:uint,sizeh:uint,url:String) 
    {
        this.bgColor = bgColor;
        this.size    = sizew;
        this.sizeh = sizeh;
        loadImage(url);
    }

    private function loadImage(url:String):void 
    {
        var myLoader:Loader = new Loader();
        var uri = new URLRequest(url);
        myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event)
        {
            image = new Bitmap(e.target.content.bitmapData);

            //scale the bitmap while retaining aspect ratio
            //scale based off which dimension (width or height) is bigger
            if(image.width >= image.height){
                image.scaleX= size / image.width; //scale it to the width specified
                image.scaleY = image.scaleX; //make the height aspect ratio match the widths
            }else{
                image.scaleY = sizeh /image.height;
                image.scaleX = image.scaleY;
            }
            addChild(image);  //add it to the display list of this object
        });
        myLoader.load(uri); 
    }
}