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 to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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:

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Marco Casario, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}