代码之家 › 专栏 › 技术社区 › Eric

在flex中,如何创建、填充和显示位图?

flex3 bitmap flex actionscript-3

Eric · 技术社区 · 16 年前

从完全空的MXML应用程序开始:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" >

</mx:Application>

脚本将:

创建位图(如果这是 BitmapData 对象?)
以编程方式向其填充数据(例如绘制一个圆)(有没有比重复调用更有效的方法 BitmapData.SetPixel ?)
在应用程序中渲染它(例如居中)(如何在屏幕上获取位图?在线Flash示例显示呼叫 myBitmap=new Bitmap(myBitmapData) 然后 myBitmap.AddChild ,但这会在flex中引发错误)。

注意:目标不仅仅是在屏幕上生成一个圆,而是填充位图(或位图数据)?还是???)使用setpixel的对象(还是???)然后把它的内容放到屏幕上,就像在图像处理或视觉效果应用程序中需要做的那样。

2 回复 | 直到 10 年前

Joel Hooks 16 年前

你有几个选择。首先是检查 Degrafa framework 它有一些非常令人难以置信的绘图工具,否则您需要添加一个脚本块并在函数中使用AS3绘图API(在本例中,可能在CreationComplete上调用:

private function handleCreationComplete():void
{
    var component:UIComponent = new UIComponent(); //needed to add to the flex display list
    var myCircle:Sprite = new Sprite();
    myCircle.graphics.beginFill(0xFFFFFF,1)
    myCircle.graphics.drawCircle(100,100,50);
    component.addChild(myCircle);
    this.addChild(component);
}

这不会使圆居中,但你可以把它弄清楚。

您可以使用此函数从上述ui组件中实际获取位图:

private function getBitmapData( target : UIComponent ) : BitmapData
   {
    var bd : BitmapData = new BitmapData( target.width, target.height );
    var m : Matrix = new Matrix();
    bd.draw( target, m );
    return bd;
   }

从 here .

Eric 16 年前

下面是一个完整的工作示例,我可以根据Joel Hooks的建议创建:

MXML文件(ards.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
       creationComplete="onCreationComplete()">

<mx:Script source="ards_script.as" />

</mx:Application>

脚本文件(ards-script.as):

import mx.core.UIComponent;

private function onCreationComplete():void
{
    // create a UIComponent and add it to the Flex display list
    var component:UIComponent = new UIComponent();
    component.width = this.width;
    component.height = this.height;
    component.x = 0;
    component.y = 0;
    this.addChild(component);

    // create a BitmapData object (basically an array of pixels) the same size as the screen    
    var bd : BitmapData = new BitmapData( component.width, component.height );

    // draw a green circle in the bitmap data
    var xCenter:int = component.width/2;
    var yCenter:int = component.height/2;
    var r:int = Math.min(xCenter,yCenter);
    var rSquare:int = r*r;
    var color:Number = 0x00ff00;
    for( var i:int=0; i<component.width; i++ )
    {
        for( var j:int=0; j<component.width; j++ )
        {
            var dX:int = i - xCenter;
            var dY:int = j - yCenter;
            var q:int = dX*dX + dY*dY;
            if( q < rSquare )
            {
                    bd.setPixel( i, j, color );
            }       
        }
    }

    // create a bitmap based on the data, and add it as a child to the UIComponent to be displayed
    // (if you try to add it directly to the Application, you get a runtime error)
    var bt:Bitmap = new Bitmap(bd);
    component.addChild(bt);    
}