Archive for category Flex

Duplicating images using the Bitmap and BitmapData classes

Ref: http://blog.flexexamples.com/2007/08/03/duplicating-images-using-the-bitmap-and-bitmapdata-classes/

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/03/duplicating-images-using-the-bitmap-and-bitmapdata-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();

            private function dupeImage(source:Image):void {
                var data:BitmapData = Bitmap(source.content).bitmapData;
                var bitmap:Bitmap = new Bitmap(data);

                arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:Panel title="Source image">
            <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
                <mx:Image id="img1" source="assets/logo.png" />
            </mx:HBox>

            <mx:ControlBar>
                <mx:Button label="Copy image" click="dupeImage(img1)" />
            </mx:ControlBar>
        </mx:Panel>

        <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                        <mx:Image source="{data.image}" />
                        <mx:Label text="{data.label}" />
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
    </mx:HBox>

</mx:Application>

No Comments

Crop image in Flex

Crop image in Flex using BitmapData

Ref: http://www.flexer.info/2008/10/16/how-to-crop-and-resize-an-image-used-as-background-for-canvas/

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" initialize="initNew()"
    width="320" height="370">
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;

            private const image_path:String = "fxr.png";
            private var loader:Loader;
            private var request:URLRequest;  

            private var loadBD:BitmapData;
            private var cropBD:BitmapData;  

            private var startPoint:Point;
            private var posPoint:Point;
            private var square: int;
            private var mtrx: Matrix;

            private function initNew():void
            {
                loader=new Loader();
                request=new URLRequest(image_path);
                loader.contentLoaderInfo.addEventListener(
                    Event.COMPLETE,onComplete);
                loader.load(request);
            }

            private function onComplete(event:Event):void {
                loadBD = Bitmap(event.currentTarget.content).bitmapData;

                imageHolder.graphics.beginBitmapFill(loadBD);
                imageHolder.graphics.drawRect(0, 0,
                    loadBD.width, loadBD.height);
                imageHolder.graphics.endFill(); 

                //make initial image
                drawImage();

            }

             private function drawImage():void
             {
                 //crop square
                startPoint = new Point(xSelector.value,    ySelector.value);
                square = sizeSelector.value;
                cropImage(startPoint,square);

                //resize image and show it
                resizeImage();
             }

             private function cropImage(startPoint:Point, squareSize:int):void
             {
                 // Make a new bitmap data using square size
                cropBD = new BitmapData(squareSize, squareSize, true, 0x00000000);
                // Position where will be dispayed in the new object, in our case (0,0)
                posPoint = new Point(0,0);
                // copy pixels from loaded bitmap data to our new object
                cropBD.copyPixels(loadBD,
                    new Rectangle(startPoint.x, startPoint.y, squareSize, squareSize),
                    posPoint); 

                //draw crop area selected
                imageCrop.graphics.clear();
                imageCrop.graphics.lineStyle(1, 0xFFFFFF,0.5);
                imageCrop.graphics.drawRect(0, 0, cropBD.width, cropBD.height);
                imageCrop.move(imageHolder.x+startPoint.x,imageHolder.y+startPoint.y);

             }

             private function resizeImage():void
             {
                // make scale matrix
                mtrx = new Matrix();
                mtrx.scale(imageView.width/cropBD.width,imageView.height/cropBD.height);

                // Fill in image
                imageView.graphics.clear();
                imageView.graphics.beginBitmapFill(cropBD,mtrx,false);
                imageView.graphics.drawRect(0, 0, imageView.width, imageView.height);
                imageView.graphics.endFill();
             }

        ]]>
    </mx:Script>

    <mx:Canvas id="imageView"   x="210" y="10" width="100" height="100" />
    <mx:Canvas id="imageHolder" x="10" y="120" width="300" height="240" />
    <mx:Canvas id="imageCrop"   x="0" y="0" width="0" height="0" /> 

    <mx:Label x="10" y="15" width="60" text="X position"/>
    <mx:HSlider id="xSelector" x="80" y="10" width="120"
            minimum="0" maximum="290" snapInterval="10" enabled="true"
            value="170" change="drawImage()" />

    <mx:Label x="10" y="55" width="60" text="Y position"/>
    <mx:HSlider id="ySelector" x="80" y="50" width="120"
            minimum="0" maximum="230" snapInterval="10" enabled="true"
            value="20" change="drawImage()" />

    <mx:Label x="10" y="95" width="60" text="Area size"/>
    <mx:HSlider id="sizeSelector" x="80" y="90" width="120"
            minimum="10" maximum="240" snapInterval="10" enabled="true"
            value="100" change="drawImage()" />

</mx:Application>

No Comments

Flex Atom Reader

Flex 用parse XML 太方便了

以下係一個parse 一個from HTTP Server 既atom file 既example

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” creationComplete=”feedRequest.send();” backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#333333, #5B5A5A]”>

<mx:HTTPService id=”feedRequest” url=”data/photo.xml” useProxy=”false” />

<mx:Panel title=”Atom Reader” height=”75%” width=”75%” paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ color=”#FFFFFF”>
<mx:DataGrid id=”dgPosts” height=”50%” width=”75%” dataProvider=”{feedRequest.lastResult.feed.entry}” color=”#427F95″>
<mx:columns>
<mx:DataGridColumn headerText=”Posts” dataField=”title”/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea id=”txtarea” height=”50%” width=”75%” htmlText=”{dgPosts.selectedItem.content}” color=”#4B80D8″/>
</mx:Panel>
</mx:Application>

,

No Comments