How to put an image (say, PNG) on a graphics in Flex 3?

Question

I'm new to Flex, and I'm trying to write a simple application. I have a file with an image and I want to display this image on a Graphics. How do I do this? I tried [Embed]-ding it and adding as a child to the component owning the Graphics', but I'm getting a "Type Coercion failed: cannot convert ... to mx.core.IUIComponent" error.

Answer 1

Off the top of my head I can think of two things that might help you (depending on what it is exactly that you're trying to achieve):

If you just want to display an image you've embedded, you can add an Image component to the stage and set the value of its source as the graphical asset ( Class ) that you're embedding:

[Bindable]
[Embed(source="assets/image.png")]
private var MyGfx:Class;

myImage.source = MyGfx;

If you actually want to draw a bitmap onto a Graphics object, you can do this with the beginBitmapFill() method:

[Bindable]
[Embed(source="assets/image.png")]
private var MyGfx:Class;

var myBitmap:BitmapData = new MyGfx().bitmapData;
myGraphics.beginBitmapFill(myBitmap);
myGraphics.endFill();

You might find the Flex Quick Starts articles on Adobe's site useful, especially the "Embedding Assets" section.

Answer 2

The accepted answer is incomplete because without a call to drawRect() nothing will be drawn. I have implemented it this way and it works. Notice that I added a matrix translation, otherwise images would have to be drawn either at 0,0 or would be clipped incorrectly.

[Embed(source='assets/land-field.png')] 
private var ImgField:Class; 
private var field:BitmapData = new ImgField().bitmapData;

public static function drawImage(g:Graphics, image:BitmapData, x:int, y:int):void {
  var mtx:Matrix = new Matrix();
  mtx.translate(x, y);
  g.beginBitmapFill(image, mtx, false, false);
  g.drawRect(x, y, image.width, image.height);
  g.endFill();
}

Answer 3

You can also add a regular AS3 displayobject to a Flex component by adding it to the rawChildren collection (myComponent.rawChildren.addChild(myPNG)), but that's a bit of a hack.

If you're trying to do this via myDisplayObject.graphics, please post some sample source.

Answer 4

Since you're a beginner, here's an easy way.

In your application, switch to Design View.

Drag an Image Component from the Component Panel onto the main Application Canvas.

Size the Image on the Canvas and leave it selected. On the right hand side, in the properties panel, click the Folder button on the "Source" field.

Choose your image. If you place the image in your project's folder, it will be included in your build folder.

Then take a look at the source view. You will see MXML code that reflects what you've done. You can change this by hand as well. The source="blah.png" part can also be pointed to a remote URL.

Answer 5

好的，还有另一种方法可以遵循http://livedocs.adobe.com/flex/3/langref/flash/display/Graphics.html#includeExamplesSummary并使用beginBitmapFill（）方法查看示例，非常有用！