Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Flex 4 Graphics: Display Bitmap Data in a Graphic Element

DZone's Guide to

Flex 4 Graphics: Display Bitmap Data in a Graphic Element

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Problem

You want to display a raster image within a graphic element.

Solution

Use the BitmapImage element or supply a BitmapFill to a FilledElement-based element and set the source property to a value of a valid representation of a bitmap. Optionally, set the fillMode of the graphic to clip, scale, or repeat the image data within the element.

Discussion

Bitmap information from an image source can be rendered within a graphic element in a FXG fragment. The BitmapImage element can be used to define a rectangular region in which to render the source bitmap data, or any FilledElement-based element can be assigned a BitmapFill to render the data within a custom filled path. fillMode is a property of both BitmapImage and BitmapFill that defines how the bitmap data should be rendered within the element. The values available for fillMode are enumerated in the BitmapFillMode class and allow for clipping, scaling, and repeating the bitmap data within the defined bounds of the element. By default, the fillMode property is set to a value of scale, which fills the display area of an element with the source bitmap data.

The following example demonstrates using both the BitmapImage element and BitmapFill within a MXML fragment to display bitmap information:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>

<![CDATA[

import mx.graphics.BitmapFillMode;

]]>

</fx:Script>

<s:Graphic>

<s:Group>

<s:layout>

<s:HorizontalLayout />

</s:layout>

<s:BitmapImage id="img" width="450" height="400"

source="@Embed('assets/icon.png')" />

<s:Ellipse id="imgEllipse" width="450" height="400">

<s:fill>

<s:BitmapFill id="imgFill"

fillMode="{BitmapFillMode.REPEAT}"

source="@Embed('assets/icon.png')" />

</s:fill>

</s:Ellipse>

</s:Group>

</s:Graphic>

</s:Application>

The source property of a BitmapImage element or the BitmapFill of an element, when declared in MXML, can point to various graphic resources. The source could be a Bitmap object, a BitmapData object, any instance or class reference of a DisplayObject-based element, or an image file specified using the @Embed directive. If a file reference is used, the image file path must be relative as it is compiled in; there is no support for runtime loading of an image when using FXG elements in MXML markup.

Figure 4.2, “Examples of rendering a raster image in a graphic” shows a few examples of effects you can achieve using the various graphic elements and fill modes. On the left, an image is loaded and resized to fill a rectangle shape. On the right, the same image is loaded into an ellipse shape and repeated at its original size to fill the shape.

Figure 4.2. Examples of rendering a raster image in a graphic

The source property value for an element rendering bitmap data in a FXG document can point either to a relative file path for an image resource, or to a URL. Bitmap information is compiled into the graphic element within the FXG document, and such runtime concepts as updating the source based on loaded graphic information are not applicable.

The following is an example of supplying a URL to the source property of a BitmapImage element within a FXG document:

<!-- MyBitmapGraphic.fxg -->

<Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">

<BitmapImage width="600" height="150" fillMode="repeat"

source="http://covers.oreilly.com/images/9780596529857/bkt.gif"

/>

</Graphic>

Supplying a URL for the bitmap fill of an element is not permitted in a FXG fragment within MXML markup. However, graphics declared in MXML take advantage of various runtime concepts, including responding to state changes, data binding, and (with regard to displaying bitmap information) loading graphic resources and updating the source of a bitmap element at runtime. The following example demonstrates setting the source property of a BitmapImage to a Bitmap instance at runtime alongside rendering the graphic element of a FXG document:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:f4cb="com.oreilly.f4cb.*"

creationComplete="handleCreationComplete();">

<fx:Script>

<![CDATA[

import mx.graphics.BitmapFillMode;

private function handleCreationComplete():void

{

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,

handleLoadComplete);

loader.load( new URLRequest(

'http://covers.oreilly.com/images/9780596529857/bkt.gif' ) );

}

private function handleLoadComplete( evt:Event ):void

{

var bmp:Bitmap = ( evt.target as LoaderInfo ).content as Bitmap;

img.source = bmp;

}

]]>

</fx:Script>

<s:layout>

<s:VerticalLayout />

</s:layout>

<s:Graphic>

<s:Group>

<s:layout>

<s:HorizontalLayout />

</s:layout>

<s:BitmapImage id="img"

width="450" height="400"

fillMode="{BitmapFillMode.SCALE}" />

<f4cb:MyBitmapGraphic />

</s:Group>

</s:Graphic>

</s:Application>


You'll find the entire Chapter 4 of Flex 4 Cookbook about Graphics published on the O'Reilly website !

You might also like:

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}