Flex 4 Graphics: Display Bitmap Data in a Graphic Element (excerpt from Flex 4 Cookbook)

This excerpt is from Flex 4 Cookbook.  If you'll enjoy this excerpt, buy a copy of Flex 4 Cookbook.

Display Bitmap Data in a Graphic Element

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.

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 !

Comments

[艳虹]

Our company is specilized in Nike football jerseys, and now, it's the choice and the best time to buy from us, because there are many cheap football jerseys for sale.www.f-footballjerseys.com

[Elaine Al]

http://www.lincogo.com
http://www.modern-apparel.com

[Xie Rsky]

Good post! Do you want to another see other blog? Hope you will share my blog, Thanks very much!
http://www.uknorthface.co.uk/
http://www.northfaceoutletberkeleys.com/
http://www.canadaoakley.com/