Flex画板制作

下面为制作画板的基本思路,保存为jpg格式.(使用as3corelib,下载地址 http://code.google.com/p/as3corelib/)

Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:filters="flash.filters.*">
    <mx:Style>
        Application{
            font-size:12px;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import mx.controls.Button;
            import mx.core.UIComponent;
            import com.adobe.images.JPGEncoder;
            
            [Bindable]
            private var activationCommand:String;
            private var arrPoints:ArrayCollection;
            
            private function noteCommand(evt:MouseEvent):void
            {
                var btn:Button = evt.currentTarget as Button;
                activationCommand = btn.label;
                lblCommand.text = activationCommand;
            }
            private function downHandler(evt:MouseEvent):void
            {
                if (activationCommand=="")
                {
                    return;
                }
                if (arrPoints==null)
                {
                    arrPoints = new ArrayCollection();
                }
                var p1:Point = null;
                var p2:Point = null;
                switch (activationCommand)
                {
                    case "矩形":
                        arrPoints.addItem(new Point(evt.localX,evt.localY));
                        if (arrPoints.length==2)
                        {
                            p1 = arrPoints[0] as Point;
                            p2 = arrPoints[1] as Point;
                            var rectangle:UIComponent = new UIComponent();
                            cav.addChild(rectangle);
                            rectangle.graphics.beginFill(0xBBDB00,0.3);
                            rectangle.graphics.drawRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);
                            rectangle.graphics.endFill();
                            rectangle.addEventListener(MouseEvent.CLICK,del);
                            arrPoints = null;
                            activationCommand = "";
                        }
                        break;
                    case "圆形":
                        arrPoints.addItem(new Point(evt.localX,evt.localY));
                        if (arrPoints.length==2)
                        {
                            p1 = arrPoints[0] as Point;
                            p2 = arrPoints[1] as Point;
                            var circle:UIComponent = new UIComponent();
                            cav.addChild(circle);
                            circle.graphics.beginFill(0xBBDB00,0.3);
                            circle.graphics.drawCircle(p1.x,p1.y,Math.sqrt(Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2)));
                            circle.graphics.endFill();
                            circle.addEventListener(MouseEvent.CLICK,del);
                            arrPoints = null;
                            activationCommand = "";
                        }
                        break;
                }
            }
            
            private function del(evt:MouseEvent):void
            {
                if (activationCommand=="橡皮")
                {
                    cav.removeChildAt(cav.getChildIndex(evt.currentTarget as DisplayObject));
                }
            }
            
            public function getJPGByteArray(target:UIComponent):ByteArray {   
                var bitmapData:BitmapData = new BitmapData(target.width, target.height);
                target.mask = null;  
                bitmapData.draw(target);
                target.mask = cavMask;                  
                var jpg:JPGEncoder = new JPGEncoder();   
                var jpgByteArray:ByteArray = jpg.encode(bitmapData);   
                return jpgByteArray;   
            }   
               
            public function sendImageByte():void {
                var sendComponent:UIComponent = cav;
                var request:URLRequest = new URLRequest("http://localhost:8009/ImageSave.ashx");   
                request.contentType = 'applicatoin/octet-stream'; 
                request.data = getJPGByteArray(sendComponent);   
                request.method = URLRequestMethod.POST;
                var urlLoader:URLLoader = new URLLoader();
                urlLoader.addEventListener(Event.COMPLETE,urlLoaded);
                urlLoader.load(request);
            }
            
            public function urlLoaded(evt:Event):void
            {
                mx.controls.Alert.show("OK");
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="cavMask" x="{cav.x}" y="{cav.y}" width="{cav.width}" height="{cav.height}" backgroundColor="#000000">
    </mx:Canvas>
    <mx:HBox x="0" y="0" width="100%" height="100%">
        <mx:Canvas width="100" height="100%" backgroundColor="#FFFFFF">
            <mx:Label x="10" y="10" text="激活命令:"/>    
            <mx:Label x="10" y="38" id="lblCommand" width="88" text="{activationCommand}"/>
            <mx:Button x="10" y="70" label="圆形" click="noteCommand(event)"/>
            <mx:Button x="10" y="102" label="矩形" click="noteCommand(event)"/>
            <mx:Button x="10" y="134" label="橡皮" click="noteCommand(event)"/>
            <mx:Button x="10" y="166" label="保存" click="sendImageByte()"/>
        </mx:Canvas>
        <mx:Canvas id="cav" mask="{cavMask}" width="100%" height="100%" backgroundColor="#FFFFFF" mouseDown="downHandler(event)">
            <mx:filters>
                <filters:DropShadowFilter>
                </filters:DropShadowFilter>
            </mx:filters>
        </mx:Canvas>
    </mx:HBox>
</mx:Application>

Code
<%@ WebHandler Language="C#" Class="ImageSave" %>

using System;
using System.Web;
using System.IO;

public class ImageSave : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        Stream s = context.Request.InputStream;
        System.Drawing.Image img = System.Drawing.Image.FromStream(s);
        String type = context.Request.ContentType;
        string path = context.Server.MapPath("UploadImages");
        img.Save(path + @"\1.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}