Flex ObjectHandles 构建绘图程序!

模型

主画布组件：com/components/graph/GraphContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="init(event)"
         width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import com.components.model.ShapeModel;
            import com.roguedevelopment.objecthandles.Flex4ChildManager;
            import com.roguedevelopment.objecthandles.Flex4HandleFactory;
            import com.roguedevelopment.objecthandles.HandleClickedEvent;
            import com.roguedevelopment.objecthandles.ObjectChangedEvent;
            import com.roguedevelopment.objecthandles.ObjectHandles;
            import com.roguedevelopment.objecthandles.SelectionEvent;
            import com.components.shape.BaseShape;
            import com.components.shape.IShape;
            import com.components.shape.ShapeLoad;
            import com.components.shape.SimpleRect;

            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.core.UIComponent;
            import mx.events.DragEvent;
            import mx.events.FlexEvent;
            import mx.managers.DragManager;
            [Bindable]
            public var objecthandles:ObjectHandles = null;

            override protected function initializationComplete() : void
            {
                objecthandles = new ObjectHandles( mainGroup , null, new Flex4HandleFactory() ,
                    new Flex4ChildManager() );
                super.initializationComplete();
            }

            private function init(event:FlexEvent):void
            {
                this.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{
                    if(event.target is IShape) {
                        if(objecthandles.selectionManager.currentlySelected.length > 1){
                            objecthandles.selectionManager.clearSelection();
                        }
                    }else{
                        objecthandles.selectionManager.clearSelection();
                    }
                    event.stopPropagation();
                });
            }

            protected function mainGroup_dragDropHandler(event:DragEvent):void
            {
                // TODO Auto-generated method stub

            }

            public function addShapeUI(shape:ShapeModel):void
            {
                var ishape:IShape = ShapeLoad.getShape(shape.shapeType);
                ishape.graph = this;
                ishape.model = shape;

                shape.ishape = ishape;
                if (shape.owner) {
                    var container:IShape = shape.owner.ishape

                    if (container) {
//                        Alert.show(container.model.label);//alert Test
                        var oh:ObjectHandles = new ObjectHandles(container as Sprite, objecthandles.selectionManager, new Flex4HandleFactory(), new Flex4ChildManager());
                        oh.registerComponent(shape, ishape, []);

                        container.addShape(ishape);
                    } else {
                        Alert.show("null");
                    }
                } else {

                    mainGroup.addElement(ishape);

                    objecthandles.registerComponent(shape, ishape); //shapeModel Bindable #1069
                }

                if (shape.children && shape.children.length > 0) {
                    for (var i:int=0;i<shape.children.length;i++) {
                        var child:ShapeModel = shape.children[i];
                        addShapeUI(child);
                    }
                }

                ishape.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void {
//                    ishape.objectHandles.selectionManager.setSelected(shape);
                    event.stopPropagation(); //important
                });

                ishape.addEventListener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void{
//                    ishape.objectHandles.selectionManager.setSelected(shape);
                    event.stopPropagation(); //important
                });

            }

            public function removeShapeUI(shape:ShapeModel):void
            {
                if (shape.owner) {
                    var container:IShape = shape.owner.ishape
                    container.removeChildByModel(shape);
                } else {
                    for (var i:int=0;i<mainGroup.numElements;i++) {
                        var ishape:IShape = mainGroup.getElementAt(i) as IShape;

                        if (ishape.model == shape) {
                            objecthandles.unregisterComponent(ishape);
                            mainGroup.removeElement(ishape);
                        }
                    }
                }
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <s:Scroller width="100%" height="100%" >
        <s:Group width="100%" height="100%" id="mainGroup">

        </s:Group>
    </s:Scroller>
</s:Group>

GraphModel.as: com/components/model/

package com.components.model
{

    public class GraphModel
    {
        public function GraphModel()
        {

        }
    }
}

ShapeModel.as: 图形模型类，用于设置图形宽、高、坐标等参数

package com.components.model
{
    import com.roguedevelopment.objecthandles.IMoveable;
    import com.roguedevelopment.objecthandles.IResizeable;
    import com.components.shape.IShape;

    import flash.events.EventDispatcher;
    import flash.events.MouseEvent;

    import mx.messaging.AbstractConsumer;

    public class ShapeModel extends EventDispatcher implements IResizeable, IMoveable
    {
        [Bindable]
        private var _width:Number = 0;
        [Bindable]
        private var _height:Number = 0;
        [Bindable]
        private var _x:Number = 0;
        [Bindable]
        private var _y:Number = 0;
        [Bindable]
        private var _rotation:Number = 0;
        [Bindable]
        private var _label:String = '';
        [Bindable]
        private var _isLocked:Boolean = false;
        [Bindable]
        private var _color:uint = 0xffffff;
        [Bindable]
        private var _image:String;
        [Bindable]
        private var _ishape:IShape;
        [Bindable]
        private var _owner:ShapeModel = null;
        [Bindable]
        private var _children:Array;
        [Bindable]
        private var _shapeType:int = 0;

        public function ShapeModel()
        {

        }

        public function set width(value:Number):void
        {
            this._width = value;
        }

        [Bindable]
        public function get width():Number
        {
            return this._width;
        }

        public function set height(value:Number):void
        {
            this._height = value;
        }

        [Bindable]
        public function get height():Number
        {
            return this._height;
        }

        public function set x(value:Number):void
        {
            this._x = value;
        }

        [Bindable]
        public function get x():Number
        {
            return this._x;
        }

        public function set y(value:Number):void
        {
            this._y = value;
        }

        [Bindable]
        public function get y():Number
        {
            return this._y;
        }

        public function set rotation(value:Number):void
        {
            this._rotation = value;
        }

        [Bindable]
        public function get rotation():Number
        {
            return this._rotation;
        }

        public function set label(value:String):void
        {
            this._label = value;
        }

        [Bindable]
        public function get label():String
        {
            return this._label;
        }

        public function set isLocked(value:Boolean):void
        {
            this._isLocked = value;
        }

        [Bindable]
        public function get isLocked():Boolean
        {
            return this._isLocked;
        }

        //--------------------

        [Bindable]
        public function get ishape():IShape
        {
            return this._ishape;
        }

        public function set ishape(value:IShape):void
        {
            this._ishape = value;
        }

        public function set children(childs:Array):void
        {
            this._children = childs;

            if (childs && childs.length > 0) {
                var c:* = childs[0]; //检测是不是ShapeModel类型
                if (c is ShapeModel){
                    for each(var itm:ShapeModel in childs) {
                        itm.owner = this;
                    }
                }
            }
        }

        [Bindable]
        public function get children():Array
        {
            return this._children;
        }

        public function set owner(value:ShapeModel):void
        {
            this._owner = value;
        }

        [Bindable]
        public function get owner():ShapeModel
        {
            return this._owner;
        }

        //

        public function set color(value:uint):void
        {
            this._color = value;
        }

        [Bindable]
        public function get color():uint
        {
            return this._color;
        }

        public function set image(value:String):void
        {
            this._image = value;
        }

        [Bindable]
        public function get image():String
        {
            return this._image;
        }

        public function set shapeType(value:int):void
        {
            this._shapeType = value;
        }

        [Bindable]
        public function get shapeType():int {
            return this._shapeType;
        }

        public function setSelected(flag:Boolean):void {
            if (this._ishape) {
                if (flag) {
                    this._ishape.objectHandles.selectionManager.setSelected(this);
                } else {
                    this._ishape.objectHandles.selectionManager.removeFromSelected(this);
                }
            }
        }
    }
}

图形基组件: com/components/shape/BaseShape.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         implements="com.components.shape.IShape"
         creationComplete="init(event)"
         width="{_model.width}"
         height="{_model.height}"
         x="{_model.x}"
         y="{_model.y}"
         rotation="{_model.rotation}"

         >
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <s:SolidColor id="backColor" color="0xdcdcdc" alpha="1" />
        <s:SolidColorStroke id="borderStroke" color="0x000000" weight="1" alpha="1" />
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import com.components.graph.GraphContainer;
            import com.components.model.ShapeModel;
            import com.events.ShapeEvent;
            import com.roguedevelopment.objecthandles.Flex4ChildManager;
            import com.roguedevelopment.objecthandles.Flex4HandleFactory;
            import com.roguedevelopment.objecthandles.ObjectHandles;
            import com.utils.ShapeUtils;

            import mx.controls.Alert;
            import mx.events.FlexEvent;

            [Bindable]private var _objectHandles:ObjectHandles ;
            [Bindable]private var _graph:GraphContainer;
            [Bindable]private var _model:ShapeModel;
            [Bindable]private var _showLabel:Boolean;
            [Bindable]private var _selected:Boolean;

            private var _state:int = 0;
            private var _rx:Number = 0;
            private var _ry:Number = 0;

            private function init(event:FlexEvent):void
            {
                var that:IShape = this;
                this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandle);
                this.addEventListener(MouseEvent.MOUSE_OUT, mousOutHandle);
                this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandle);
                //this.addEventListener(MouseEvent.MOUSE_WHEEL, mouWheelHandle); //从没出现
                this.addEventListener(MouseEvent.ROLL_OUT, mouRolOutHandle);
                this.addEventListener(MouseEvent.ROLL_OVER, mouRolOverHandle);
                //this.addEventListener(MouseEvent.RELEASE_OUTSIDE, mouseOutsideHandle);//从没出现
            }

            private function mouseDownHandle(event:MouseEvent):void {

                _rx = this.mouseX;
                _ry = this.mouseY;
                this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandle);
                this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandle);

            }

            //
            private function mousOutHandle(event:MouseEvent):void
            {
                var cm:ShapeModel = this.model;
                if (cm) {
                    if (cm.x < 0) {
                        cm.x = 0;
                    }

                    if (cm.y < 0) {
                        cm.y = 0
                    }
                }
                this.model.label = "MouseOut";

            }

            private function mouseOutsideHandle(event:MouseEvent):void
            {
                this.model.label = "Outside";
            }

            private function mouseOverHandle(event:MouseEvent):void
            {
                this.model.label = "MouseOver";
                ResizeContainer(this);
            }

            private function mouWheelHandle(event:MouseEvent):void
            {
                this.model.label = "MouseWheel";
            }

            private function mouRolOutHandle(event:MouseEvent):void
            {
                var cm:ShapeModel = this.model;
                if (cm) {
                    if (cm.x < 0) {
                        cm.x = 0;
                    }

                    if (cm.y < 0) {
                        cm.y = 0
                    }
                }

                this.model.label = "RollOut";
                ResizeContainer(this);

            }

            private function mouRolOverHandle(event:MouseEvent):void
            {
                this.model.label = "MouseRollOver";
            }

            private function mouseMoveHandle(event:MouseEvent):void {
                if (_state != 6) {
                    _state = 6;

                }
                this.model.label = "MouseMove";

                ResizeContainer(this, event);
            }

            private function mouseUpHandle(event:MouseEvent):void {
                if (_state != 7) {
                    _state = 7;
                }

                this.model.label = "UP";
                this.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandle);
                this.removeEventListener(MouseEvent.MOUSE_DOWN, mouseMoveHandle);
//                this.removeEventListener(MouseEvent.MOUSE_OUT, mousOutHandle);
//                this.removeEventListener(MouseEvent.ROLL_OUT, mouRolOutHandle);
//                this.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandle);
                var cm:ShapeModel = this.model;

                if (!cm || !cm.owner)
                    return;

                /*
                var xy:Object = ShapeUtils.getRealShapePosition(cm);

                var _pw:Number = cm.owner.width;
                var _ph:Number = cm.owner.height;
                var _px:Number = cm.owner.x;
                var _py:Number = cm.owner.y;

                if (cm.x<0) {
                    cm.owner.x = Number(xy.x);
                    cm.owner.width = _pw + (_px - Number(xy.x));
                    cm.x = 0;
                }

                if (cm.y <0) {
                    cm.owner.y = Number(xy.y);
                    cm.owner.height = _ph + (_py - Number(xy.y));
                    cm.y = 0;
                }*/
            }

            private function ResizeContainer(shapeui:IShape, event:MouseEvent = null):void
            {
                var cm:ShapeModel = shapeui.model;
                if (cm && cm.owner) {
                    var _x:Number = cm.x;
                    var _y:Number = cm.y;
                    var _w:Number = cm.width;
                    var _h:Number = cm.height;

                    var _pw:Number = cm.owner.width;
                    var _ph:Number = cm.owner.height;
                    var _px:Number = cm.owner.x;
                    var _py:Number = cm.owner.y;

                    var xy:Object = ShapeUtils.getRealShapePosition(cm);
                    this.model.label = "Rs";

                    /*
                    //Resize Right, Down
                    if ((_x+_w) > _pw) {
                        cm.owner.width = _x + _w;
                    }

                    if ((_y + _h) > _ph) {
                        cm.owner.height = _y + _h;
                    }

                    //Resize Left , UP
                    if (_x < 0) {
                        cm.owner.x = _px + (_x);
                        cm.owner.width = _pw + (-_x);
                    }

                    if (_y < 0) {
                        cm.owner.y = _py + (_y);
                        cm.owner.height = _ph + (-_y);
                    }

                    */

                } else {
                    this.model.label = "Where";
                }
            }

            public function get objectHandles():ObjectHandles
            {
                if (!this._objectHandles) {
                    this._objectHandles = new ObjectHandles(this, null, new Flex4HandleFactory(), new Flex4ChildManager());
                }

                return this._objectHandles;
            }

            public function set graph(value:GraphContainer):void
            {
                this._graph = value;
                if (this._graph) {
                    this._objectHandles = this._graph.objecthandles;
                }
            }

            public function get graph():GraphContainer
            {
                return this._graph;
            }

            public function set model(value:ShapeModel):void
            {
                this._model = value;
            }

            [Bindable]
            public function get model():ShapeModel
            {
                return this._model;
            }

            public function set selected(value:Boolean):void
            {
                this._selected = value;
            }

            public function get selected():Boolean
            {
                return this._selected;
            }

            public function addShape(shapeui:IShape):void
            {
                ResizeContainer(shapeui);
            }

            public function removeChildByModel(shape:ShapeModel):void {

            }

            public function set showLabel(value:Boolean):void
            {
                this._showLabel = value;
            }

            public function get showLabel():Boolean
            {
                return this._showLabel;
            }

        ]]>
    </fx:Script>

</s:Group>

Shape图形接口: IShape.as

package com.components.shape
{
    import com.components.graph.GraphContainer;
    import com.components.model.ShapeModel;
    import com.roguedevelopment.objecthandles.ObjectHandles;

    import mx.core.IUIComponent;
    import mx.core.IVisualElement;
    import mx.core.IVisualElementContainer;

    public interface IShape extends IUIComponent, IVisualElement, IVisualElementContainer
    {
        function set graph(value:GraphContainer):void;
        function get graph():GraphContainer;
        function set model(value:ShapeModel):void;
        function get model():ShapeModel;
        function addShape(shapeui:IShape):void;
        function removeChildByModel(shape:ShapeModel):void;
        function set showLabel(value:Boolean):void;
        function get showLabel():Boolean;
        function get objectHandles():ObjectHandles;
        //
        function set selected(value:Boolean):void;
        function get selected():Boolean;
    }
}

图形ShapeModel与具体图形如SimpleRect.mxml[IShape]转换: ShapeLoad.as

package com.components.shape
{
    public class ShapeLoad
    {
        public function ShapeLoad()
        {
        }

        public static function getShape(stype:int):IShape
        {
            var shape:BaseShape;
            switch (stype) {
                case 0:
                    shape = new SimpleRect();
                    break;
                case 1:
                    shape = new SimpleEllipse();
                    break;
                default:
                    break;
            }

            return shape;
        }
    }
}

一个矩形图组件: com/components/shape/SimpleRect.mxml

<?xml version="1.0" encoding="utf-8"?>
<shape:BaseShape
    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:shape="com.components.shape.*"
    width="{model.width}"
    height="{model.height}"
    x="{model.x}"
    y="{model.y}"
    rotation="{model.rotation}" >
    <fx:Script>
        <![CDATA[
            import com.components.model.ShapeModel;

            import mx.controls.Alert;
            import mx.core.IVisualElement;
            import mx.core.UIComponent;
            import mx.events.FlexEvent;

            override public function addShape(shapeui:IShape):void
            {
                container.addElement(shapeui);
                super.addShape(shapeui);
            }

            override public function removeChildByModel(shape:ShapeModel):void
            {
                for (var i:int = 0; i<container.numElements;i++) {
                    var ishape:IShape = container.getElementAt(i) as IShape;
                    if (ishape && ishape.model == shape) {
                        objectHandles.unregisterComponent(ishape);
                        container.removeElement(ishape);
                    }
                }
            }

            override public function set showLabel(value:Boolean):void
            {
                super.showLabel = value;
            }

            [Bindable]
            override public function get showLabel():Boolean
            {
                return true;
            }

            protected function scrollDown_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                var itm:Object = event.target as DisplayObject;

                var tyName:String = itm.name;
                if (tyName && tyName.indexOf('Button') >= 0) {
                    event.stopPropagation();
                    objectHandles.selectionManager.clearSelection();
                }

            }

            protected function scrollUp_clickHandler(event:MouseEvent):void
            {

            }

        ]]>
    </fx:Script>

    <s:Rect width="100%" height="100%" stroke="{borderStroke}" fill="{backColor}" />
    <s:Scroller width="100%" height="100%" mouseDown="scrollDown_clickHandler(event)" mouseUp="scrollUp_clickHandler(event)">
        <s:Group id="container" width="100%" height="100%" horizontalCenter="0" verticalCenter="0" />
    </s:Scroller>
    <s:Label text="{model.label}" horizontalCenter="0" verticalCenter="0" color="#000000" />
</shape:BaseShape>

使用方法Application: Flex4objectHandles.mxml

<?xml version="1.0" encoding="utf-8"?>
<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"
               width="100%" height="100%"
               xmlns:graph="com.components.graph.*"
               creationComplete="init(event)" >
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import com.components.model.ShapeModel;

            import mx.controls.Alert;
            import mx.events.FlexEvent;

            private function init(event:FlexEvent):void
            {
                var shape:ShapeModel = new ShapeModel();
                shape.shapeType = 1;
                shape.width = 400;
                shape.height = 300;
                shape.x = 15;
                shape.y = 30;
                shape.label = "Test";
                shape.rotation = 0;

                var childs:Array = [];
                var child:ShapeModel = new ShapeModel();
                child.shapeType = 0;
                child.width = 100;
                child.height = 100;
                child.x = 60;
                child.y = 90;
                child.label = "child1";
                child.rotation = 0;
                childs.push(child);

                var _child:ShapeModel = new ShapeModel();
                _child.shapeType = 0;
                _child.width = 50;
                _child.height = 50;
                _child.x = 60;
                _child.y = 90;
                _child.label = "child1";
                _child.rotation = 0;
                child.children = [_child];

                child = new ShapeModel();
                child.shapeType = 1;
                child.width = 50;
                child.height = 50;
                child.x = 70;
                child.y = 10;
                child.label = "child2";
                child.rotation = 0;
                childs.push(child);

                shape.children = childs;

                graph.addShapeUI(shape);
            }
        ]]>
    </fx:Script>
    <s:SpriteVisualElement width="100%" height="100%" id="drawingLayer" />
    <s:Group width="100%" height="100%">
        <graph:GraphContainer id="graph" width="100%" height="100%"></graph:GraphContainer>
    </s:Group>
</s:Application>

资源源码下载

Flex4objectHandles.rar