JavaScript

开发平台：
JavaScript

draw.js：源码内容
							/*------------------------------------------------------------------------------
+                        图形绘制  定义了状态接口DrawState，环境角色，DrawContext  +
+                        和实现状态接口的子类 SelectDrawState，BeginDrawState    +
+						 EndDrawState，ProcessDrawState，LineDrawState         +
-------------------------------------------------------------------------------*/
/*--------画图状态-----------*/
	//画图状态接口
	function DrawState () {
		//interface
		this.draw = draw;
		function draw (canvas,clickEvent) {
		}
	}
	//选择
	function SelectDrawState () {
		//inhert
    	this.base=DrawState;
       	this.base();
		//override
		this.draw = draw;
		function draw (canvas,clickEvent) {
			//是否选择的是节点
        	var nodeType = clickEvent.srcElement.ctlNodeType;
			if ( !(nodeType == "node" || nodeType == "childNode") ) {
				return;
			}
			//获得节点
			var obj;
            if (nodeType == "node") {
            	obj=clickEvent.srcElement;
            } else {
            	obj=clickEvent.srcElement.parentElement;
            }
			fSelectedObj = obj;
            //保存坐标
            fx=fSelectedObj.style.pixelLeft-event.clientX;
        	fy=fSelectedObj.style.pixelTop-event.clientY;
			//如果是线条
            if (obj.ctlType==CNST_CTLTYPE_LINES) {
				fDragApproved=false;
            } else  {
				fDragApproved=true;//允许拖动
			}
			return true;
		}
	}
	//合并
	function JoinsDrawState () {
		//inhert
    	this.base=DrawState;
       	this.base();
		//override
		this.draw = draw;
		function draw (canvas,clickEvent) {
			//计算鼠标在drawCanvas中的绝对位置
			var xx=clickEvent.x-canvas.offsetLeft-10,yy=clickEvent.y-canvas.offsetTop-5;
			xx=xx<0?0:xx;
			yy=yy<0?0:yy;
            var thisIDName = "w"+fCtlNum;
			var thisCaption = "joins"+fCtlNum;
            var gctl =  "<v:shape "+
						"	oncontextmenu="contextForThis(this)" "+
						"	path = 'm 0,150 l 0,300, 200,300, 200,150 100,150 200,0 100,150 0,0 100,150  x e'   "+
						"	id = '"+thisIDName+"' "+
						" 	ctlType='"+CNST_CTLTYPE_JOINS+"'  "+
						"	ctlNodeType="node"  "+
						"	conditionType='or'  "+
						"	line=""  "+
						"	style="position:absolute;width:80;height:40px;left:"+xx+";top:"+yy+";">"+
            			"	<v:shadow ctlNodeType="childNode" on="T" type="single" color="#b3b3b3" offset="3px,3px" style="cursor:default" />"+
                        "	<v:TextBox ctlNodeType="childNode" inset="-2px,8px,0px,0px" style="overflow:visible;font-size:10.2pt;cursor:default">"+thisCaption+"</v:TextBox>";
                        "</v:shape>";
            canvas.insertAdjacentHTML('beforeEnd',gctl);
			addToObjArray(thisIDName,true); //增加到控件列表
            return true;
		}
	}
    //分支
	function SplitsDrawState () {
		//inhert
    	this.base=DrawState;
       	this.base();
		//override
		this.draw = draw;
		function draw (canvas,clickEvent) {
			//计算鼠标在drawCanvas中的绝对位置
			var xx=clickEvent.x-canvas.offsetLeft-10,yy=clickEvent.y-canvas.offsetTop-5;
			xx=xx<0?0:xx;
			yy=yy<0?0:yy;
            var thisIDName = "w"+fCtlNum;
			var thisCaption = "splits"+fCtlNum;
            var gctl =  "<v:shape oncontextmenu="contextForThis(this)" path = 'm 0,0 l 0,150, 100,150 0,300 100,150 200,300 100,150 200,150 200,0    x e' id = '"+thisIDName+"' ctlType='"+CNST_CTLTYPE_SPLITS+"' ctlNodeType="node" line=""  style="position:absolute;width:80;height:40px;left:"+xx+";top:"+yy+";">"+
            			"	<v:shadow ctlNodeType="childNode" on="T" type="single" color="#b3b3b3" offset="3px,3px" style="cursor:default" />"+
                        "	<v:TextBox ctlNodeType="childNode" inset="-2px,8px,0px,0px" style="overflow:visible;font-size:10.2pt;cursor:default">"+thisCaption+"</v:TextBox>";
                        "</v:shape>";
            canvas.insertAdjacentHTML('beforeEnd',gctl);
			addToObjArray(thisIDName,true); //增加到控件列表
            return true;
		}
	}
	//步骤
	function StepsDrawState () {
		//inhert
    	this.base=DrawState;
       	this.base();
		//override
		this.draw = draw;
		function draw (canvas,clickEvent) {
			//计算鼠标在drawCanvas中的绝对位置
			var xx=clickEvent.x-canvas.offsetLeft-10,yy=clickEvent.y-canvas.offsetTop-5;
			xx=xx<0?0:xx;
			yy=yy<0?0:yy;
			var thisIDName = "w"+fCtlNum;
			var thisCaption = "步骤"+fCtlNum;
            var gctl =  "<v:shape "+
						"	oncontextmenu="contextForThis(this)" "+
						"	path = 'm 0,0 l 0,150, 200,150, 200,0   x e' "+
						" 	id = '"+thisIDName+"' "+
						" 	ctlName = '"+thisCaption+"' "+
						" 	view = '' "+
						" 	auto = 'no' "+
						" 	ctlType='"+CNST_CTLTYPE_STEPS+"' "+
						"	ctlNodeType="node" "+
						"	line=""  "+
						"	style="position:absolute;width:80px;height:40px;left:"+xx+";top:"+yy+";">"+
            			"	<v:shadow ctlNodeType="childNode" on="T" type="single" color="#b3b3b3" offset="3px,3px" style="cursor:default" />"+
                        "	<v:TextBox ctlNodeType="childNode" inset="-2px,8px,0px,0px" style="overflow:visible;font-size:10.2pt;cursor:default">"+thisCaption+"</v:TextBox>";
                        "</v:shape>";
        	canvas.insertAdjacentHTML('beforeEnd',gctl);
			addToObjArray(thisIDName,true); //增加到控件列表
			return true;
		}
	}
	//线条
	function LineDrawState () {
		//inhert
    	this.base=DrawState;
       	this.base();
		//override
		this.draw = draw;
		function draw (canvas,clickEvent) {
			//是否选择的是节点
        	var nodeType = clickEvent.srcElement.ctlNodeType;
			if ( !(nodeType == "node" || nodeType == "childNode") ) {
				return;
			}
			//获得节点
			var obj;
            if (nodeType == "node") {
            	obj=clickEvent.srcElement;
            } else {
            	obj=clickEvent.srcElement.parentElement;
            }
			if (fAddLineFlag==1) {
            	fLineStartObj = obj;
                fLineStartObj.StrokeColor='red';// 并标记为红色
                fLineStartObj.strokeweight=2;
                alert("请选择线条的终点"); //提示选择终点
                fAddLineFlag++; //进入下一步
            } else if (fAddLineFlag==2) {
            	//如果选择的节点不是起点的话
                if ( obj!=fLineStartObj ) {
                	fLineEndObj=obj;
					var thisLineID = fLineStartObj.id + "TO" + fLineEndObj.id;
                    var thisIDName = "w"+fCtlNum;
                    var thisCaption = "线条"+fCtlNum;
					thisLineID = thisIDName+":"+thisLineID;
					//看看是否已存在这条线段
                    if(!document.all[thisLineID]) {
						var  posArray = cf_CalculateLinePos(fLineStartObj,fLineEndObj);
						var gctl  = '<v:PolyLine oncontextmenu="contextForThis(this)" ctlType="'+CNST_CTLTYPE_LINES+'"  filled="false" '+
									'			style="position:absolute;width:50px;height:50px;z-index:-99;"'+
									'           ctlNodeType="node" '+
									'			id="' + thisIDName + '" '+
									' 			ctlName = "'+thisCaption+'" '+
									'			owner="" '+
									'			status="Queued" '+
									'			oldStatus="Finished" '+
									'			Points="'+posArray["x1"]+','+posArray["y1"]+' '+posArray["x2"]+','+posArray["y2"]+' '+posArray["x3"]+','+posArray["y3"]+' '+posArray["x4"]+','+posArray["y4"]+'"> '+
									'	<v:stroke  EndArrow="Classic"  /> '+
									'</v:PolyLine>';
						canvas.insertAdjacentHTML('beforeEnd',gctl);
                        fLineStartObj.line += (thisLineID + ";");
                        fLineEndObj.line += (thisLineID + ";");
						addToObjArray(thisIDName,false); //增加到控件列表
                    	fAddLineFlag = 0; //恢复初始值
                    	return true;
                    } else {
                		alert("该条线段已经存在，请重新选择"); //提示选择终点
					}
                }
            }//end if
		}//end func
	}
/*-----------end-画图状态--------*/
/*-----------画图环境角色--------*/
	function DrawContext () {
		//property
		this.drawState = new SelectDrawState(); //默认为选择状态
		//method
		this.setDrawState = setDrawState;
		this.draw = draw;
		function setDrawState (aDrawState) {
			this.drawState = aDrawState;
		}
		function draw (canvas,clickEvent) {
			return this.drawState.draw(canvas,clickEvent);
		}
	}
/*---end--画图环境角色--------*/

						