Как в Flex создать, заполнить и отобразить растровое изображение?

Начиная с полностью пустого приложения 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).

??

ПРИМЕЧАНИЕ. Цель состоит не только в том, чтобы получить круг на экране, но и в том, чтобы заполнить объект Bitmap (или BitmapData? Или ???) с помощью SetPixel (или ???), а затем вывести его содержимое на экран, как если бы нужно делать в приложении для обработки изображений или визуальных эффектов.


bitmap actionscript-3 apache-flex flex3
person Eric    schedule 23.04.2009    source источник

Ответы (2)


arrow_upward
3
arrow_downward

У вас есть несколько вариантов. Во-первых, необходимо изучить структуру Degrafa, в которой есть несколько действительно невероятных инструментов для рисования, в противном случае вам нужно добавить скрипт. block и используйте api чертежа AS3 в функции (в этом случае, вероятно, вызывается createComplete:

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

Это не будет центрировать круг, но вы можете понять это.

вы можете использовать эту функцию для фактического получения растрового изображения из вышеуказанного 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;
   }

из здесь.

person Joel Hooks    schedule 23.04.2009
comment
Это рисует круг, но не за счет явного создания растрового изображения. Отредактирую свой вопрос, чтобы быть более понятным. - person Eric; 23.04.2009
comment
Спасибо, эти лишние штуки очень помогли. - person Eric; 23.04.2009

arrow_upward
2
arrow_downward

Вот полный рабочий пример, который мне удалось создать на основе предложений Джоэла Хукса:

ФАЙЛ 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);    
}
person Eric    schedule 23.04.2009
comment
О, так что вы можете создать экземпляр универсального UIComponent и добавить Bitmap непосредственно к нему (поскольку это DisplayObject). Хороший! - person markpasc; 20.08.2009