首页 > 代码库 > Flex ObjectHandles 构建绘图程序!
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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。