读书人

帮忙,有哪位高手帮小弟我一下

发布时间: 2012-02-12 17:16:33 作者: rapoo

帮忙,有谁帮我一下
小弟想做一个工作流的界面,以前使用FLASH做出来了,可是不会FLEX,其主要内容是如图:
谁能使用FLEX做出来???

帮帮我!!!

我的EMAIL:apchy183@163.com


[解决办法]
简单实现一下,复杂的坐标计算,自己调吧
新做一个组件LinkImg.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" complete="checkProp()">
<mx:Metadata>
[Event(name = "beginArrow")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.utils.ColorUtil;
import mx.events.DragEvent;
private var g:Graphics;
// 宽
public var w : int;
// 高
public var h : int;
// 可以出箭头的区域
private var rect : int = 8;

private var mouseDown : Boolean = false;

// 内部坐标X和Y
public var localX : int;
public var localY : int;

private function checkProp() : void {
w = this.content.width;
h = this.content.height;
this.addEventListener(MouseEvent.MOUSE_DOWN,checkMousedown);
this.addEventListener(MouseEvent.MOUSE_UP,checkMouseup);
this.addEventListener(MouseEvent.MOUSE_MOVE, checkMousemove);
g = this.graphics;
}

private function checkDrag(event : DragEvent) : void {

}

private function checkMousedown(event : MouseEvent) : void {
// 判断是移动还是出箭头
if((event.localX > rect && event.localX < w - rect) && (event.localY > rect && event.localY < h - rect)) {
mouseDown = true;
}
else {
localX = event.stageX;
localY = event.stageY;
// 派发出箭头自定义事件
dispatchEvent(new Event("beginArrow"));
}
}

private function checkMouseup(event : MouseEvent) : void {
mouseDown = false;
}

private function checkMousemove(event : MouseEvent) : void {
if(mouseDown) {
this.x = event.stageX - w / 2;
this.y = event.stageY - h / 2;
}
}

public function grawRect() : void {
g.lineStyle(2, ColorUtil.rgbMultiply(0,0), 1 );
g.drawRect(0,0,this.width,this.height);
}
]]>
</mx:Script>
</mx:Image>

然后加入到主程序中temp.mxml :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:Widget="*" initialize="init()">
<mx:Script>
<![CDATA[
import flash.net.getClassByAlias;
import mx.controls.Image;
import mx.utils.ColorUtil;
private var gr:Graphics;

public var drawArrow : Boolean = false;
// 从哪里出来的箭头
private var t : Object;
// 箭头到了哪里
private var tempElement : Object;

private function init() : void {
gr = draw.graphics;
this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
this.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
}
private function mouseDown(event : MouseEvent) : void {

}

private function beginArrow(event : Event) : void {
drawArrow = true;
t = event.target;
}

private function mouseMove(event : MouseEvent) : void {
if(drawArrow) {
gr.clear();
gr.moveTo(t.localX, t.localY);
gr.lineStyle(2, ColorUtil.rgbMultiply(0,0), 1 );
// 判断箭头位置
if(event.localY >= t.y) {
// 在图片外
gr.lineTo(event.localX,event.localY);
gr.moveTo(event.localX,event.localY);
gr.drawRoundRect(event.localX-2,event.localY-2,4,4,4,4);
if(tempElement!=null) {


tempElement.graphics.clear();
tempElement = null;
}
}
else {
// 在源图片内,或已经到达目标图片
gr.lineTo(event.stageX,event.stageY);
var arr : Array = getObjectsUnderPoint(new Point(event.stageX,event.stageY));
if(arr.length == 4) {
if(arr[3].parent.parent != t) {
// 到达目标图片
try{
arr[3].parent.parent.grawRect();
tempElement = arr[3].parent.parent;
} catch(e) {

}
}
}
}

}
}

private function mouseUp(event : MouseEvent) : void {
drawArrow = false;
if(tempElement!=null) {
gr.clear();
gr.lineStyle(2, ColorUtil.rgbMultiply(0,0), 1 );
gr.moveTo(t.localX, t.localY);
gr.lineTo(event.localX + tempElement.x,event.localY + tempElement.y);
tempElement = null;
}
}
]]>
</mx:Script>
<mx:Canvas id="draw" width="800" height="600">
<Widget:LinkImg id="img1" x="116" y="171" source="1.gif" width="44" height="49" beginArrow="beginArrow(event)"/>
<Widget:LinkImg id="img2" x="314" y="171" source="2.gif" width="44" height="49"/>
</mx:Canvas>
</mx:Application>

读书人网 >flex

热点推荐