Flex学习笔记之图片显示策略

待我称王封你为后i 2022-09-22 13:54 139阅读 0赞

一、Flex中关于图片的概念有以下几个：

Bitmap：数据类。用于表示位图的显示对象。

BitmapData：数据类。用于处理位图对象的数据（像素）。BitmapData存储像素数据的数组，可通过BitmapData对位图的像素进行直接操作。

Image：组件类。Image是一个组件，用于显示位图。

Image和Bitmap的不同：Bitmap和Image继承自DisplayObject，两者都可以在界面上显示，但Bitmap和Sprite一样，没有继承自可视化对象的基类UIComponent，所有不能直接加到容器，而Image则是继承自UIComponent的可视化组件。

private var loader:Loader=new Loader();
    			
    protected function application1_creationCompleteHandler(event:FlexEvent):void
    {
    	var img:Image=new Image();
    	img.source="resource/copy_normal.png";
    	this.addElement(img);				
    				
    	loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleteHandler);
    	loader.load(new URLRequest("resource/copy_normal.png"));
    }
    			
    private function loadCompleteHandler(evt:Event):void{
    	var bitmap:Bitmap=Bitmap(loader.content);
    	var comp:UIComponent=new UIComponent();
    	comp.addChild(bitmap);
    	comp.x=200;
    	this.addElement(comp);
    }

**二、图片的加载方式**

1、给Image指定Source

/*直接指定资源*/
    var img:Image=new Image();
    img.source="resource/copy_normal.png";
    this.addElement(img);	 			
    				
    /*使用嵌入资源*/
    var img:Image=new Image();
    img.source=texture;
    this.addElement(img);		
    				
    this.addElement(img);

<fx:Declarations>
    	
    	<s:Image id="img" source="@Embed('resource/copy_normal.png')"/>
    </fx:Declarations>

2、加载图片内容到Bitmap

Bitmap的图片数据来源有两种，一种是实例化的时候给它设置BitmapData，但很多时候是需要直接从图片文件中读取数据，而BitmapData反过来需要从Bitmap得到，所以就得用第二种方式，即使用加载器加载。

加载器主要有两个，Loader和URLLoader。

使用Loader可直接加载显示对象，图片加载完成后直接把数据转为Bitmap即可显示。

private var loader:Loader;
    protected function group1_creationCompleteHandler(event:FlexEvent):void
    {
    loader=new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
    loader.load(new URLRequest("resource/copy_normal.png"));
    }
    private function loadComplete(evt:Event):void{
    var bitmap:Bitmap=Bitmap(loader.content);
    var comp:UIComponent=new UIComponent();
    comp.addChild(bitmap);
    this.addElement(comp); 
    }

URLLoader以文本、二进制数据或URL编码的形式从URL下载数据。可设置URLDataFormat来指定加载完成后的数据格式，有TEXT,BINARYT VARIABLES三种。URLLoader加载完成后只能得到数据，不能直接添加到显示对象。要将图片显示有两种方式。

第一种是使用Loader对URLLoader得到的二进制数据进行二次加载。

private var urLoader:URLLoader;
    private var loader:Loader;
    
    protected function group1_creationCompleteHandler(event:FlexEvent):void
    {
     urLoader=new URLLoader();
     loader=new Loader();
     urLoader.dataFormat=URLLoaderDataFormat.BINARY;
     urLoader.addEventListener(Event.COMPLETE,urlLoadComplete);
     urLoader.load(new URLRequest("resource/copy_normal.png"));
    }
    
    
    private function urlLoadComplete(evt:Event):void{
     var bytes:ByteArray=urLoader.data;
     
     loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
     loader.loadBytes(bytes);
    }
    
    
    private function loadComplete(evt:Event):void{
     var bitmapData:BitmapData=new BitmapData(200,200);
     bitmapData.draw(loader.content);
     var bitmap:Bitmap=new Bitmap(bitmapData);
     var comp:UIComponent=new UIComponent();
     comp.addChild(bitmap);
     this.addElement(comp);
    }

第二种是根据得到的二进制数据ByteArray生成BitmapData。但这种方式其实并不实用，URLLoader加载得到的数据并不能直接通过setPixes赋给BitmapData。

总结：加载图片用Loader会比URLLoader更加省时省力，因为URLLoader得到的数据不能直接显示，还必须得通过Loader再加载一次才能显示。但URLLoader能够加载的东西更多，功能也更强大。

3、BitmapData与ByteArray之间的转换

BitmapData与ByteArray之间的转换类似于序列化与反序列化。

var bmData:BitmapData=new BitmapData(img.width,img.height);
    bmData.draw(img)
    
    var bitmap:Bitmap=new Bitmap(bmData);
    var comp:UIComponent=new UIComponent();
    comp.addChild(bitmap)
    bitmap.x = 200
    this.addElement(comp)
    
    var bmData2:BitmapData=new BitmapData(bmData.width,bmData.height);
    var pixels:ByteArray=bmData.getPixels(bmData.rect);
    pixels.position = 0
    //外层循环为高，内层循环为宽
    for(var i:uint=0;i<bmData.height;i++){
    	for(var j:uint=0;j<bmData.width;j++){
    		bmData2.setPixel(j,i,pixels.readUnsignedInt());
    	}
    }
    
    var bitmap2:Bitmap=new Bitmap(bmData2);
    comp.addChild(bitmap2)
    bitmap2.y = 200

4、序列化与反序列化

var bmData:BitmapData=new BitmapData(img.width,img.height);
    bmData.draw(img)
    
    var comp:UIComponent=new UIComponent();
    comp.y = 200
    this.addElement(comp)
    
    //序列化
    var pixels:ByteArray=bmData.getPixels(bmData.rect);
    var jpgEncoder:JPEGEncoder=new JPEGEncoder();
    var picBytes:ByteArray=jpgEncoder.encode(bmData);
    var srcBytes:ByteArray=jpgEncoder.encodeByteArray(pixels,bmData.width,bmData.height);
    
    //反序列化
    var loader:Loader=new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(evt:Event){
    	var bitmap:Bitmap=Bitmap(loader.content);
    	comp.addChild(bitmap);
    });
    loader.loadBytes(picBytes);
    
    var loader2:Loader=new Loader();
    loader2.contentLoaderInfo.addEventListener(Event.COMPLETE,function(evt:Event){
    	var bitmap:Bitmap=Bitmap(loader2.content);
    	bitmap.x=200;
    	comp.addChild(bitmap);
    });
    loader2.loadBytes(srcBytes)

**三、图片局部显示技术**

1、使用遮罩

mask是显示对象基类DisplayObject的一个属性，被mask蒙版的部分将显示，其它部分将被隐藏。遮罩源mask同样是一个DisplayObject，但如果mask是Sprite或Shape等绘制对象的话，必须使用填充才能使遮罩出现，如果使用线条的话将看不到被遮罩对象。

var sp:Sprite=new Sprite();
    img.mask = sp
    sp.graphics.beginFill(1, 0xffffff)
    sp.graphics.drawCircle(30, 30, 30)
    sp.graphics.endFill()

如果要对遮罩源进行变换，则必须加到显示列表中。

protected function group1_creationCompleteHandler(event : FlexEvent) : void
    {
        img.mask = sp;
        sp.graphics.beginFill(1, 0xffffff);
        sp.graphics.drawCircle(30, 30, 30);
        sp.graphics.endFill();
    
        //这三行代码是必须的
        var comp : UIComponent = new UIComponent();
        comp.addChild(sp);
        this.addElement(comp);
    
        this.addEventListener(MouseEvent.CLICK, mouseClickHandler);
    }
    
    private function mouseClickHandler(evt : MouseEvent) : void
    {
        sp.x += 5;
        if (sp.x > img.width)
        {
            sp.x = 0;
        }
    }

2、使用UV贴图

UV贴图的功能十分强大，不仅能够实现图片部分显示，而且可以减轻组件和重量，提高系统效率。UV贴图是画在显示对象的Graphics上面的，和画线、填充一样。所以，无论界面上需要同时显示多少图片，界面上只需要一个显示对象。