设为首页 收藏本站
查看: 772|回复: 0

[经验分享] 仿IBM-BPM Monitor实现的demo

[复制链接]

尚未签到

发表于 2017-5-25 12:24:12 | 显示全部楼层 |阅读模式
前段时间根据公司要求做一个工作流方面的demo,遂模仿IBM的BPM Monitor做了一个demo。因Company Secret原因,不能公开全部源码,现将部分代码贴于此,供各位大虾点评。
画线代码:
package com
{
import flash.geom.Point;
import mx.controls.Text;
import mx.core.UIComponent;
/**
*
* 控制流程图的画线
*
* */
public class Line extends UIComponent
{
/** 线段的显示文本 **/
public var label:String;
/** 箭头大小 **/
public var arrowSize:uint = 3;
/** 线的颜色 **/
public var lineColor:uint = 0xffffff;
/** 箭头方向 **/
private var aspect:int=1;
/** 开始的一段直线长度 **/
private var startLine:int=10;
/** 线的名称 **/
private var _label:Text;
/** 开始节点 **/
private var startPoint:Point;
/** 结束节点 **/
private var endPoint:Point;
/** 线段连接的开始节点名称 **/
public var fromNode:String;
/** 线段连接的结束节点名称 **/
public var toNode:String;
/** 初始化文本样式 **/
private static var classConstructed:Boolean = Nodes.initStyles();
public function Line()
{
super();
}
/** 创建组建的子组件 **/
override protected function createChildren():void{
super.createChildren();
if(!_label){
_label=new Text();
var textStyleName:*=getStyle("textStyleName");
_label.styleName=textStyleName?textStyleName:this;
addChild(_label);
}
}
/** 更改属性 **/
override protected function commitProperties():void{
super.commitProperties();
if(_label){
_label.text=label;
}
}
/** 在组建中画出子组件,并确定子组件在组件中的位置和大小 **/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(!_label)
return;
//endPoint.x-startPoint.x,endPoint.y-startPoint.y
_label.move(0,0);
_label.setActualSize(width,30);
}
/** 带箭头的线 **/
private function drawLine(startPoint:Point,endPoint:Point,startL:int):void{
getLine(startPoint,endPoint,startL);
drawArrowHead(startPoint,endPoint);
}
/** 自定义画线 **/
public function cusLine(arr:Array):void{
var len:int=arr.length;
if(len==0)return;
if(len==1){
var p:Object=arr[0] as Object;
this.graphics.clear();//清除之前的画线痕迹
drawLine(p.sPoint as Point,p.ePoint as Point,p.sLine as int);
return;
}
for(var i:int=0;i<arr.length;i++){
var points:Object=arr as Object;
getLine(points.sPoint as Point,points.ePoint as Point,points.sLine as int);
}
drawArrowHead(Object(arr[len-1]).sPoint as Point,Object(arr[len-1]).ePoint as Point);
}
/** 画线 **/
private function getLine(startPoint:Point,endPoint:Point,startL:int):void{
this.startPoint=startPoint;
this.endPoint=endPoint;
if(startL>0)
startLine=startL;
this.graphics.moveTo(startPoint.x,startPoint.y);
this.graphics.lineStyle(2,lineColor,0.7);
//用于确定根据开始节点和结束节点画出的线是否是直线
if(startPoint.x==endPoint.x||startPoint.y==endPoint.y){
this.graphics.lineTo(endPoint.x,endPoint.y);
//确定箭头的方向
if(startPoint.y==endPoint.y&&startPoint.x<endPoint.x)
aspect=1;//箭头向右
else if(startPoint.y==endPoint.y&&startPoint.x>endPoint.x)
aspect=2;//箭头向左
else if(startPoint.y>endPoint.y&&startPoint.x==endPoint.x)
aspect=3;//箭头向上
else
aspect=4;//箭头向下
}else{
//开始节点横坐标小于结束节点时
if(startPoint.x<endPoint.x){
aspect=1;
this.graphics.lineTo(startPoint.x+startLine,startPoint.y);
//开始节点纵坐标小于结束节点时,改变弧线的方向
if(startPoint.y<endPoint.y){
this.graphics.curveTo(startPoint.x+startLine+10,startPoint.y,startPoint.x+startLine+10,startPoint.y+10);
this.graphics.lineTo(startPoint.x+startLine+10,endPoint.y-10);
this.graphics.curveTo(startPoint.x+startLine+10,endPoint.y,startPoint.x+startLine+20,endPoint.y);
}else{
this.graphics.curveTo(startPoint.x+startLine+10,startPoint.y,startPoint.x+startLine+10,startPoint.y-10);
this.graphics.lineTo(startPoint.x+startLine+10,endPoint.y+10);
this.graphics.curveTo(startPoint.x+startLine+10,endPoint.y,startPoint.x+startLine+20,endPoint.y);
}
this.graphics.lineTo(endPoint.x,endPoint.y);
}else{//开始节点横坐标大于结束节点时
aspect=2;
this.graphics.lineTo(startPoint.x-startLine,startPoint.y);
if(startPoint.y<endPoint.y){
this.graphics.curveTo(startPoint.x-startLine-10,startPoint.y,startPoint.x-startLine-10,startPoint.y+10);
this.graphics.lineTo(startPoint.x-startLine-10,endPoint.y-10);
this.graphics.curveTo(startPoint.x-startLine-10,endPoint.y,startPoint.x-startLine-20,endPoint.y);
}else{
this.graphics.curveTo(startPoint.x-startLine-10,startPoint.y,startPoint.x-startLine-10,startPoint.y-10);
this.graphics.lineTo(startPoint.x-startLine-10,endPoint.y+10);
this.graphics.curveTo(startPoint.x-startLine-10,endPoint.y,startPoint.x-startLine-20,endPoint.y);
}
this.graphics.lineTo(endPoint.x,endPoint.y);
}
}
startLine=10;//还原初始值
}
/** 画箭头 **/
private function drawArrowHead(startPoint:Point,endPoint:Point):void{
//得到箭头的角度
var angle:Number  = this.getAngle(startPoint,endPoint);
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);
}
/** 得到箭头的角度 **/
private function getAngle(startPoint:Point,endPoint:Point):Number{
var temX:Number = 0;
var temY:Number = 0;
//调整箭头方向
switch(aspect){
case 1:
//箭头向右
temX= endPoint.x - (endPoint.x-10);
temY= endPoint.y - endPoint.y;
break;
case 2:
//箭头向左
temX= endPoint.x - (endPoint.x+10);
temY= endPoint.y - endPoint.y;
break;
case 3:
//箭头向上
temX= endPoint.x - endPoint.x;
temY= endPoint.y - (endPoint.y-10);
break;
case 4:
//箭头向下
temX= endPoint.x - endPoint.x;
temY= endPoint.y - (endPoint.y+10);
break;
}
var angle:Number = Math.atan2(temY,temX)*(180/Math.PI)
return angle;
}
/** 删除 **/
public function removeLine():void{
this.graphics.clear();
}
}
}

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-380984-1-1.html 上篇帖子: 我和ibm workflow不得不说的故事 下篇帖子: IBM-AIX培训总结 -------- 第一天
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表