mainview
<?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"
xmlns:models="com.resource.objectHandle.diagrame.models.*"
xmlns:example="com.roguedevelopment.objecthandles.example.*"
minWidth="955" minHeight="600" currentState="select"
initialize="init()"
xmlns:ui="com.diagrame.objectHandle.ui.*"
creationComplete="fillGrid()">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:states>
<s:State name="select"/>
<s:State name="line"/>
<s:State name="rect"/>
</s:states>
<fx:Script>
<![CDATA[
import adobe.utils.CustomActions;
import com.diagrame.objectHandle.tool.LineAngle;
import com.diagrame.objectHandle.tool.RectAngle;
import com.roguedevelopment.objecthandles.Flex4ChildManager;
import com.roguedevelopment.objecthandles.Flex4HandleFactory;
import com.roguedevelopment.objecthandles.ObjectHandles;
import com.roguedevelopment.objecthandles.VisualElementHandle;
import com.roguedevelopment.objecthandles.example.MoveableTextArea;
import com.roguedevelopment.objecthandles.example.SimpleDataModel;
import com.roguedevelopment.objecthandles.example.SimpleSpriteShape;
import com.roguedevelopment.objecthandles.example.TextDataModel;
import mx.core.UIComponent;
import mx.managers.CursorManager;
[Bindable]public var simpleData1:SimpleDataModel = new SimpleDataModel();
[Bindable]public var simpleData2:SimpleDataModel = new SimpleDataModel();
public var objectHandles:ObjectHandles;
public var firstPoint:Point = new Point();
public var savePoint:Array = new Array(); //存储点的数组
public var selected:String = "select"; //判断选择工具类型
public var rectAngle:RectAngle;
public var lineAngle:LineAngle;
public var startP:Point; //画矩形的时候存的点的坐标
public var endP:Point;
[Embed(source="com/diagrame/objectHandle/cursor/mouseMove.gif")]
public var mouseMove:Class;
[Embed(source="com/diagrame/objectHandle/cursor/horizontalSize.gif")]
public var horizontalSize:Class;
[Embed(source="com/diagrame/objectHandle/cursor/verticalSize.gif")]
public var verticalSize:Class;
[Embed(source="com/diagrame/objectHandle/cursor/leftObliqueSize.gif")]
public var leftObliqueSize:Class;
[Embed(source="com/diagrame/objectHandle/cursor/rightObliqueSize.gif")]
public var rightObliqueSize:Class;
override protected function initializationComplete():void
{
objectHandles = new ObjectHandles( content, null, new Flex4HandleFactory(), new Flex4ChildManager());
simpleData1.x = 10;
simpleData1.y = 10;
simpleData1.width = 100;
simpleData1.height = 100;
var simpleSprite1:SimpleSpriteShape = new SimpleSpriteShape(simpleData1);
content.addChild(simpleSprite1); //sprite只能加到uicomponent中来
objectHandles.registerComponent(simpleData1, simpleSprite1);
simpleData2.x = 40;
simpleData2.y = 40;
simpleData2.width = 100;
simpleData2.height = 100;
var simpleSprite2:SimpleSpriteShape = new SimpleSpriteShape(simpleData2);
content.addChild(simpleSprite2);
objectHandles.registerComponent(simpleData2, simpleSprite2);
bc.addElement(content);
super.initializationComplete();
}
public function init():void
{
bc.addEventListener(MouseEvent.MOUSE_DOWN, contentDownHandle);
bc.addEventListener(MouseEvent.MOUSE_OVER, contentOverHandle);
bc.addEventListener(MouseEvent.MOUSE_OUT, contentOutHandle);
}
protected function contentDownHandle(event:MouseEvent):void
{
if(selected == 'line') //连接线
{
if(event.target is SimpleSpriteShape)
{
var simpleSprite:SimpleSpriteShape = event.target as SimpleSpriteShape;
}else
{
lineAngle = new LineAngle();
content.addChild(lineAngle);
lineAngle.startPoint = new Point(event.localX, event.localY);
lineAngle.endPoint = new Point(event.localX, event.localY);
this.addEventListener(MouseEvent.MOUSE_MOVE, rightAngleMouseMove);
this.addEventListener(MouseEvent.MOUSE_UP, rightAngleMouseUp);
}
}else if(selected == 'rect') // 画矩阵
{
trace("rect down"+" "+event.target);
if(event.target is SimpleSpriteShape)
{
}else if(event.target is VisualElementHandle)
{
hitArea
}else
{
trace("空白处");
startP = new Point(event.stageX, event.stageY);
startP = bc.globalToLocal(startP);
rectAngle = new RectAngle();
content.addChild(rectAngle);
rectAngle.startP = new Point(mouseX, mouseY);
rectAngle.startP = bc.globalToLocal(rectAngle.startP);
this.addEventListener(MouseEvent.MOUSE_MOVE, rectMoveHandle);
this.addEventListener(MouseEvent.MOUSE_UP, rectUpHandle);
}
}else if(selected == 'select') //选择物体
{
trace("select down"+event.target);
if(event.target is SimpleSpriteShape)
{
this.addEventListener(MouseEvent.DOUBLE_CLICK, rectDoubleHandle);
}else if(event.target is VisualElementHandle)
{
}else if(event.target is LineAngle)
{
trace("this lineAngle" + this);
lineAngle = event.target as LineAngle;
lineAngle.addEventListener(MouseEvent.MOUSE_MOVE, LineAngleMove);
lineAngle.addEventListener(MouseEvent.MOUSE_UP, LineAngleUp);
}
else
{
objectHandles.selectionManager.clearSelection();
//画出一个状态标记框来，框住东西则显示高亮，而且还可以拖动所选的，放下时完成
startP = new Point(event.localX, event.localY) //这是如果有多个，则出现一个虚的缩放框
rectAngle = new RectAngle();
content.addChild(rectAngle);
rectAngle.startP = new Point(mouseX, mouseY);
rectAngle.startP = bc.globalToLocal(rectAngle.startP);
this.addEventListener(MouseEvent.MOUSE_MOVE, multiSelectMoveHandle);
this.addEventListener(MouseEvent.MOUSE_UP, multiSelectUpHandle);
}
}
}
public function LineAngleMove(event:MouseEvent):void
{
cursorManager.setCursor(mouseMove);
lineAngle.startDrag();
}
public function LineAngleUp(event:MouseEvent):void
{
lineAngle.stopDrag();
lineAngle.removeEventListener(MouseEvent.MOUSE_MOVE, LineAngleMove);
lineAngle.removeEventListener(MouseEvent.MOUSE_UP,LineAngleUp);
}
public function rightAngleMouseMove(event:MouseEvent):void
{
//-------------------------------------------------------------------------------------------
if(event.localX >= lineAngle.startPoint.x && event.localY < lineAngle.startPoint.y)
{
//一象限，此时箭头就不是两点时的箭头了，方向是水平或者垂直
trace('x增加,y轴减少');
if(lineAngle.getAngle() >= 45 && lineAngle.getAngle() <= 90)
{
firstPoint.x = lineAngle.startPoint.x;
firstPoint.y = event.localY;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}
if(lineAngle.getAngle() >= 0 && lineAngle.getAngle() <= 45)
{
firstPoint.x = event.localX;
firstPoint.y = lineAngle.startPoint.y;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}
}else if(event.localX >= lineAngle.startPoint.x && event.localY>lineAngle.startPoint.y)
{ //四象限
trace('x增加,y轴增加');
if(lineAngle.getAngle() >= -90 && lineAngle.getAngle() <= -45)
{
firstPoint.x = lineAngle.startPoint.x;
firstPoint.y = event.localY;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}else if(lineAngle.getAngle() >= -45 && lineAngle.getAngle() <= 0)
{
firstPoint.x = event.localX;
firstPoint.y = lineAngle.startPoint.y;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}
}
else if(event.localX <= lineAngle.startPoint.x && event.localY < lineAngle.startPoint.y)
{ //二象限
trace('x减少,y轴减少');
if(lineAngle.getAngle() >= 90 && lineAngle.getAngle() <= 135)
{
firstPoint.x = lineAngle.startPoint.x;
firstPoint.y = event.localY;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}else if(lineAngle.getAngle() >= 135 && lineAngle.getAngle() <= 180)
{
firstPoint.x = event.localX;
firstPoint.y = lineAngle.startPoint.y;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}
}
else if(event.localX <= lineAngle.startPoint.x && event.localY>lineAngle.startPoint.y)
{ //三象限
trace('x减少,y轴增加');
if(lineAngle.getAngle() >= -135 && lineAngle.getAngle() <= -90)
{
firstPoint.x=lineAngle.startPoint.x;
firstPoint.y=event.localY;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}
if(lineAngle.getAngle() >= -180 && lineAngle.getAngle() <= -135)
{
firstPoint.x = event.localX;
firstPoint.y = lineAngle.startPoint.y;
savePoint.push(firstPoint); //折点放到数组里面去(30,20)
}
}else
{
//没有移动的时候
}
lineAngle.endPoint = new Point(event.localX, event.localY);
lineAngle.draw2Line(firstPoint.x,firstPoint.y);
}
public function rightAngleMouseUp(event:MouseEvent):void
{
// createHandles(event);
this.removeEventListener(MouseEvent.MOUSE_MOVE, rightAngleMouseMove);
this.removeEventListener(MouseEvent.MOUSE_UP, rightAngleMouseUp);
}
protected function rectMoveHandle(event:MouseEvent):void
{
rectAngle.endP = new Point(mouseX, mouseY);
rectAngle.endP = bc.globalToLocal(rectAngle.endP);
var second:Point = new Point(rectAngle.endP.x, rectAngle.startP.y);
var forth:Point = new Point(rectAngle.startP.x, rectAngle.endP.y);
rectAngle.drawRect(second,forth);
}
protected function rectUpHandle(event:MouseEvent):void
{
rectAngle.removeRect();
endP = new Point(mouseX, mouseY);
endP = bc.globalToLocal(endP);
var simpleDataRect:SimpleDataModel = new SimpleDataModel();
simpleDataRect.x = startP.x;
simpleDataRect.y = startP.y;
simpleDataRect.width = endP.x - startP.x;
simpleDataRect.height = endP.y - startP.y;
var simpleSprite3:SimpleSpriteShape = new SimpleSpriteShape(simpleDataRect);
content.addChild(simpleSprite3);
objectHandles.registerComponent(simpleDataRect, simpleSprite3);
this.removeEventListener(MouseEvent.MOUSE_MOVE, rectMoveHandle);
this.removeEventListener(MouseEvent.MOUSE_UP, rectUpHandle);
}
protected function rectDoubleHandle(event:MouseEvent):void
{
trace("double simple");
objectHandles.selectionManager.clearSelection();
var rectSimpleSprite:SimpleSpriteShape = event.target as SimpleSpriteShape;
}
protected function multiSelectMoveHandle(event:MouseEvent):void
{
rectAngle.endP = new Point(event.localX, event.localY);
var second:Point = new Point(rectAngle.endP.x, rectAngle.startP.y);
var forth:Point = new Point(rectAngle.startP.x, rectAngle.endP.y);
rectAngle.drawRect(second,forth);
}
protected function multiSelectUpHandle(event:MouseEvent):void
{
//一个都没框住，框住一个，框住两个
// var rectAngle:RectAngle = event.target as RectAngle;
trace("rectAngle"+event.target+".."+event.currentTarget);
// trace("..."+rectAngle.numChildren);
rectAngle.removeRect();
this.removeEventListener(MouseEvent.MOUSE_MOVE, multiSelectMoveHandle);
this.removeEventListener(MouseEvent.MOUSE_UP, multiSelectUpHandle);
}
protected function contentOverHandle(event:MouseEvent):void
{
if(selected == "select")
{
if(event.target is SimpleSpriteShape || event.target is LineAngle)
{
CursorManager.setCursor(mouseMove, 2, -8, -8);
}else{
CursorManager.removeAllCursors();
}
}else if(selected == "line")
{
if(event.target is SimpleSpriteShape)
{
//over的时候出现中心四个手柄接受拉线（样式）
}
}else if(selected == "rect")
{
}
}
protected function contentOutHandle(event:MouseEvent):void
{
}
/**
* 给容器的背景添加网格来实现的代码如下所示
* */
public var lineColor:uint = 0xCDC9C9; //网格线颜色
public var gridFillColor:uint = 0xFFFAF0; //网格背景色
public var lineThickness:Number = 1; //网格线粗细
public var gridItemSize:Number = 20; //网格大小
protected function fillGrid():void
{
bc.graphics.clear();
bc.graphics.beginFill(gridFillColor, 1);
bc.graphics.drawRect(0, 0, bc.width, bc.height);
bc.graphics.endFill();
bc.graphics.lineStyle(lineThickness,lineColor,1);
var totalWidth:Number = 0;
this.drawHorizontalLine(gridItemSize,totalWidth);
this.drawVerticalLine(gridItemSize,totalWidth);
}
// 画横线
public function drawHorizontalLine(size:Number,totalSize:Number):void
{
for(var i:int;totalSize<bc.width;i++)
{
bc.graphics.moveTo(0,size*i);
bc.graphics.lineTo(bc.width,size*i);
totalSize = size*i;
}
}
// 画竖线
public function drawVerticalLine(size:Number,totalSize:Number):void
{
for(var i:int;totalSize<bc.width;i++)
{
bc.graphics.moveTo(size*i,0);
bc.graphics.lineTo(size*i,bc.height);
totalSize = size*i;
}
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="20"/>
</s:layout>
<s:BorderContainer id="menu" width="400" height="62">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Image id="select" click="{selected = 'select';}" mouseOut="select.alpha=1"
mouseOver="select.alpha=0.4" source="com/diagrame/objectHandle/images/select.jpg"/>
<s:Image id="line" click="{selected = 'line'}" mouseOut="line.alpha=1"
mouseOver="line.alpha=0.4" source="com/diagrame/objectHandle/images/connect.jpg"/>
<s:Image id="rect" top="10" width="47" height="53" click="{selected = 'rect'}"
mouseOut="rect.alpha=1" mouseOver="rect.alpha=0.4"
source="com/diagrame/objectHandle/images/rect.jpg"/>
</s:BorderContainer>
<mx:UIComponent id="content"/>
<s:Group id="bc" width="400" height="400"/>
</s:Application>
package com.diagrame.objectHandle.tool
{
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.UIComponent;
import mx.managers.ToolTipManager;
public class LineAngle extends UIComponent
{
public var startPoint:Point; //起启节点
public var endPoint:Point; //结束节点、
public var isArrow:Boolean = true; //是否有箭头
public var arrowSize:uint = 6; //箭头大小
public var lineColor:uint = 0x000000; //颜色
public var tip:String = "线条"; //提示语
public function LineAngle()
{
super();
}
public function drawLine():void
{
//************还要扩展，扩展成能够拉的折线的，参考UXine**********
this.graphics.clear();
this.graphics.lineStyle(2,lineColor);
this.graphics.moveTo(startPoint.x,startPoint.y);
this.graphics.lineTo(endPoint.x,endPoint.y);
this.toolTip = tip;
//--------------------------------------------------------------------------------------------------------
//画箭头
if(isArrow){
var angle:Number = this.getAngle();
var centerX:Number = endPoint.x - arrowSize * Math.cos(angle*(Math.PI/180));
var centerY:Number = endPoint.y + arrowSize * Math.sin(angle*(Math.PI/180));
var leftX:Number = centerX + arrowSize * Math.cos((angle+120)*(Math.PI/180));
var leftY:Number = centerY - arrowSize * Math.sin((angle+120)*(Math.PI/180));
var rightX:Number = centerX + arrowSize * Math.cos((angle+240)*(Math.PI/180));
var rightY:Number = centerY - arrowSize * Math.sin((angle+240)*(Math.PI/180));
this.graphics.lineStyle(2,lineColor,1);
this.graphics.moveTo(endPoint.x,endPoint.y);
this.graphics.lineTo(leftX,leftY);
this.graphics.lineTo(centerX,centerY);
this.graphics.lineTo(rightX,rightY);
this.graphics.lineTo(endPoint.x,endPoint.y);
//this.graphics.endFill();
}
}
//得到线的角度
public function getAngle():Number
{
var temX:Number = endPoint.x - startPoint.x;
var temY:Number = startPoint.y - endPoint.y;
var angle:Number = Math.atan2(temY,temX)*(180/Math.PI)
return angle;
}
//删除
public function removeLine():void
{
this.graphics.clear();
}
// 直角线的画出来
public var XPoint:Point = new Point();
//-------------------------------------------------------------------------------------------
public function draw2Line(pointX:int, pointY:int):void
{ //还应该判断起始点，确定线段和箭头的
XPoint.x = pointX;
XPoint.y = pointY;
this.graphics.clear();
// this.graphics.lineStyle(_lineStyle,_lineColor,1);
this.graphics.lineStyle(2,lineColor);
this.graphics.moveTo(startPoint.x, startPoint.y);
this.graphics.lineTo(pointX, pointY);
this.graphics.moveTo(pointX, pointY);
this.graphics.lineTo(endPoint.x, endPoint.y);
this.toolTip = tip;
if(isArrow){
var angle:Number = this.get2Angle(pointX,pointY);
var centerX:Number = endPoint.x - arrowSize * Math.cos(angle * (Math.PI/180));
var centerY:Number = endPoint.y + arrowSize * Math.sin(angle * (Math.PI/180));
var leftX:Number = centerX + arrowSize * Math.cos((angle+120) * (Math.PI/180));
var leftY:Number = centerY - arrowSize * Math.sin((angle+120) * (Math.PI/180));
var rightX:Number = centerX + arrowSize * Math.cos((angle+240) * (Math.PI/180));
var rightY:Number = centerY - arrowSize * Math.sin((angle+240) * (Math.PI/180));
this.graphics.lineStyle(2,lineColor,1);
this.graphics.moveTo(endPoint.x,endPoint.y);
this.graphics.lineTo(leftX,leftY);
this.graphics.lineTo(centerX,centerY);
this.graphics.lineTo(rightX,rightY);
this.graphics.lineTo(endPoint.x,endPoint.y);
}
}
//控制中间点与终点的角度来计算角度
public function get2Angle(pointX:Number,pointY:Number):Number
{
var temX:Number = endPoint.x - pointX;
var temY:Number = pointY - endPoint.y;
var angle:Number = Math.atan2(temY,temX) * (180/Math.PI);
return angle;
}
}
}
package com.roguedevelopment.objecthandles.example
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.FocusEvent;
import flash.events.MouseEvent;
import flash.events.TextEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import mx.events.PropertyChangeEvent;
/**
* This is an example and not part of the core ObjectHandles library.
**/
public class SimpleSpriteShape extends Sprite
{
protected var model:SimpleDataModel;
private var textField:TextField;
private var textFormat:TextFormat
[Bindable]
public var labelText:String = "rect,rect";
public function SimpleSpriteShape(model:SimpleDataModel)
{
super();
this.model = model;
model.addEventListener( PropertyChangeEvent.PROPERTY_CHANGE, onModelChange );
x = model.x;
y = model.y;
redraw();
this.doubleClickEnabled = true;
this.addEventListener(MouseEvent.DOUBLE_CLICK, rectDoubleHandle);
}
protected function onModelChange( event:PropertyChangeEvent):void
{
switch( event.property )
{
case "x": x = event.newValue as Number; break;
case "y": y = event.newValue as Number; break;
case "rotation": rotation = event.newValue as Number; break;
case "width":
case "height": break;
default: return;
}
redraw();
}
protected function redraw() : void
{
graphics.clear();
graphics.lineStyle(1,0);
graphics.beginFill(0xB3EAFF,1);
graphics.drawRoundRect(0,0,model.width,model.height,0,0);
graphics.endFill();
}
//-----------------------------------------------------------------------------------------------
protected function rectDoubleHandle(event:MouseEvent):void
{
createRectText();
}
protected function createRectText():void
{
if(!textField)
{
textField = new TextField();
this.addChild(textField);
}
textField.x = model.width/4;
textField.y = model.height/4;
textField.width = model.width/2;
textField.height = model.height/2;
textField.background = true;
textField.wordWrap = true;
textField.htmlText = labelText;
textField.autoSize = TextFieldAutoSize.CENTER;
textField.type = TextFieldType.INPUT;
textFormat= new TextFormat();
textFormat.size = 18;
textFormat.color = 0xFF0000;
textField.defaultTextFormat = textFormat;
// onSetFocus onKillFocus ,onChange
textField.addEventListener(FocusEvent.FOCUS_IN, textFocInHandle);
textField.addEventListener(FocusEvent.FOCUS_OUT, textFocOutHandle);
textField.addEventListener(TextEvent.TEXT_INPUT, textInputHandle);
}
protected function textFocInHandle(event:FocusEvent):void
{
trace("focus in");
}
protected function textFocOutHandle(event:FocusEvent):void
{
trace("focus out");
}
protected function textInputHandle(event:TextEvent):void
{
labelText = textField.text; //将数据存储起来如果
}
}
}
RECT
package com.diagrame.objectHandle.tool
{
import flash.geom.Point;
import mx.core.UIComponent;
public class RectAngle extends UIComponent
{
public var startP:Point; //起启节点
public var endP:Point; //结束节点、
public var lineColor:uint = 0x000000; //颜色
public var fillColor:uint = 0xB3EAFF;
public var tip:String = "矩形"; //提示语
public var dash:Boolean = false; //画的是否是虚线
public function RectAngle() //这是一个绘制的矩形
{
super();
}
public function drawRect(second:Point, forth:Point):void
{
this.graphics.clear();
this.graphics.lineStyle(1, lineColor);
this.graphics.drawRect(startP.x, startP.y, (second.x - startP.x), (forth.y - startP.y));
this.graphics.endFill();
this.toolTip = tip;
if(dash)
{ //如果是虚线true，就画出虚线来
}
}
//删除
public function removeRect():void
{
this.graphics.clear();
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
