在Flex中，如何创建，填充和显示位图？

Starting from a totally empty MXML application:

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

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

</mx:Application>

What is the script that will:

什么是脚本:

create a bitmap (should this be a BitmapData object?)

创建一个位图(这应该是一个BitmapData对象吗?)

programatically populate it with data (e.g. draw a circle) (is there any more efficient way to do this than repeatedly calling BitmapData.SetPixel?)

用数据编程填充它(例如画一个圆圈)(有没有比重复调用BitmapData.SetPixel更有效的方法?)

render it within the application (e.g. centered in the middle) (how DO I get a bitmap onto the screen? Online Flash samples show calling myBitmap=new Bitmap(myBitmapData) and then myBitmap.AddChild, but this throws an error in Flex).

在应用程序中渲染它(例如居中在中间)(我如何在屏幕上显示位图?在线Flash示例显示调用myBitmap = new Bitmap(myBitmapData)然后调用myBitmap.AddChild,但这会在Flex中引发错误)。

NOTE: The goal is not just to get a circle on the screen, it's to populate a Bitmap (or BitmapData? Or ???) object using SetPixel (or ???) and then get its contents onto the screen, as one would need to do in an image processing or visual effects application.

注意:目标不仅仅是在屏幕上显示一个圆圈,而是使用SetPixel(或???)填充Bitmap(或BitmapData?或???)对象,然后将其内容放到屏幕上,就像需要在图像处理或视觉效果应用程序中进行。

2 个解决方案

#1

You have a couple of options. The first is to examine the Degrafa framework which has some really incredible drawing tools, otherwise you need to add a script block and use the AS3 drawing api in a function (in this case probably called on creationComplete:

你有几个选择。第一个是检查Degrafa框架,它有一些非常令人难以置信的绘图工具,否则你需要添加一个脚本块并在函数中使用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);
}

This won't center the circle, but you can figure that bit out.

这不会使圆圈居中,但你可以想出这一点。

you can use this function to actually get the bitmap out of the above UIComponent:

您可以使用此函数实际从上面的UIComponent中获取位图:

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;
   }

from here.

#2

Here's a complete, working example I was able to create based on Joel Hooks' suggestions:

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

MXML FILE (ards.mxml):

MXML FILE(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>

SCRIPT FILE (ards_script.as):

脚本文件(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);    
}

#1

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);
}