Java开发网 - 怎样结合以下代码完成一个简单的过程模型的工具

Java开发网

您没有登录

» Java开发网 » WebService/XML/JSON/SOAP/SOA » Web Services

打印话题 寄给朋友 订阅主题

作者

怎样结合以下代码完成一个简单的过程模型的工具 [Re:shunyat]

shunyat

发贴: 2
积分: 0

于 2005-05-18 20:31

怎样结合以下代码　完成一个简单的基于Web浏览器的，嵌入Java脚本页面的软件过程模型的工具设计。由节点和节点之间的连线组成的可供用户使用的软件建模工具，其中包括：
i.工具栏包括：保存、删除、选择、新建活动、连线五类可供选择的工具；
ii.用户工作区：可供用户新建的灰色区域。
iii.文本框：可供用户输入

点击Object1按钮，鼠标将变成一个小的十字，再将该十字移动到灰色区域并按下鼠标，将对象节点放置在指定位置，新的节点就加入到过程图中。

点击过程工具栏上的Line1按钮，将鼠标移动到灰色区域，在起点上按下，移动鼠标，从起点向外会有条连到鼠标位置的线拉出，到终点上放下鼠标，在起、终节点之间就会有一条线将这两个节点连接起来。假如对已建立的对象的位置或大小不满意，则可以将鼠标点击该对象图标，并拖到你需要到达的位置，即可调整位置；将鼠标单击该对象图标，该图标四周会出现四个黑色的小正方形（如图17），点住任意一个小正方形，即可调整对象的大小。

如果要删除某个对象，只需先单击该对象，在单击Delete按钮即可。

单击Save按钮，将用户建立的过程模型以*.xml格式保存。
要放大整个过程模型，则可以按住[Ctrl]，此时，鼠标就变成一个放大镜的图标，再单击灰色区域，即可放大过程模型。
要缩小整个过程模型，则可以按住[Ctrl]+[Shift]，此时，鼠标就变成一个缩小镜的图标，再单击灰色区域，即可缩小过程模型。

嵌入SVG文档的HTML网页源代码
//--------------对象类管理--------------------
function zoomObj(theScalex, theScaley)
{//将当前对象放大
  scalex=theScalex;
  scaley=theScaley;
  currentObj.setAttribute("transform","scale("+theScalex+" "+theScaley+")");

//需要将对象内的text位置调整,但字体大小不变
  var svg=currentObj.parentNode;
  var texts = svg.getElementsByTagName("text");
  for (var i=0;i<texts.length;i++) //>
  {
    var theText=texts.item Light Bulb

;
    theText.setAttribute("x",theText.getAttribute("dx")*theScalex);
    theText.setAttribute("y",theText.getAttribute("dy")*theScaley);
  }

}
function moveObj(x, y)
{//将当前对象移动到指定位置
  currentObj.getParentNode.setAttribute("x",x);
  currentObj.getParentNode.setAttribute("y",y);
  var cx=x+currentObjW*scalex/2;
  var cy=y+currentObjH*scaley/2;
  var lines = getLinesAssociated(currentObj,"start");
  for (var i=0;i<lines.length;i++) //>
  {
    var d=lines[i].getAttribute("d");
    var points=d.substr(1).split(",");
    var startPoint = crossPoint(currentOutline, x+" "+y, scalex+" "+scaley, cx+" "+cy,points[1])
    lines[i].setAttribute("d",d.replace(/^M-?\d+\.?\d+ -?\d+\.?\d+,/, "M"+startPoint+","));
    //lines[i].setAttribute("d",d.replace(/^M-?\d+\.?\d+ -?\d+\.?\d+,/, "M"+cx+" "+cy+","));
    //将第1个坐标替换为新值
    //匹配符/^M\d+\.?\d+ \d+\.?\d+,/表示：字符串中以"M坐标坐标,"开头的部分,坐标用"数字.数字"表示
  }
  lines = getLinesAssociated(currentObj,"end");
  for (var i=0;i<lines.length;i++) //>
  {
    var d=lines[i].getAttribute("d");
    var points=d.substr(1).split(",");
    var endPoint = crossPoint(currentOutline, x+" "+y, scalex+" "+scaley, cx+" "+cy,points[points.length-2])
    lines[i].setAttribute("d",d.replace(/,-?\d+\.?\d+ -?\d+\.?\d+$/, ","+endPoint));
    //将最后一个坐标替换为新值
  }
}
function addAObject(type,x,y)
{
  var svg=svgdoc.createElement("svg");
  var id=getMaxID();
  svg.setAttribute("id","svg_"+id);
  svg.setAttribute("x",x);
  svg.setAttribute("y",y);
  var use=svgdoc.getElementById("SVGMUseSample").cloneNode(true);
  use.setAttribute("id","use_"+id);
  use.setAttribute("xlink:href","#"+type);
  svg.appendChild(use);
  //由于Adobe SVG Viewer不能处理use对象的内部元素,只好将文本内容单独加上
  var symbol=svgdoc.getElementById(type);
  var texts = symbol.getElementsByTagName("text");
  for (var i=0;i<texts.length;i++)   //>
  {
    var theText=texts.item Light Bulb

.cloneNode(true);
    theText.setAttribute("dx", theText.getAttribute("x"));
    theText.setAttribute("dy", theText.getAttribute("y"));
    svg.appendChild(theText);
  }
  var g=svgdoc.getElementById("SVGMObjects");
  g.appendChild(svg);
  return use;
}
function setAttribute(objID, attributeName, attributeValue)
{
  var svg=svgdoc.getElementById("svg_"+objID);
  var texts = svg.getElementsByTagName("text");
  for (var i=0;i<texts.length;i++) //>
  {
    var theText=texts.item Light Bulb

;
    if (theText.getAttribute("class")==attributeName)
    {
      if (!theText.firstChild)
        theText.appendChild(svgdoc.createTextNode(attributeValue));
      else
        theText.firstChild.data=attributeValue;
      return;
    }
  }
}
function objectDrag(evt)
{//拖动当前对象,该事件发生前先处理按下事件，将要拖动的对象设置为当前对象
  if (leftButtonPressed) moveObj(evt.screenX+dx,evt.screenY+dy);
}
function setCurrentObject(object,ctrlKey)
{
var obj;
    //设置当前对象，并用尺寸调节框标识该对象
    currentObj=object;
    extendSelection(object,ctrlKey);
    var symbol=svgdoc.getElementById(currentObj.getAttribute("xlink:href").substr(1));
    var rect=symbol.getElementsByTagName("rect").item(0);
    currentObjW = rect.getAttribute("width")*1;
    currentObjH = rect.getAttribute("height")*1;
    currentOutline=symbol.getElementsByTagName("path").item(0);
    //获得大小比例
    var scale = currentObj.getAttribute("transform").split(" ");
    scalex=scale[0].substr Devil

;
    scaley=scale[1].substr(0,scale[1].length-1);
    //获得位置    obj=svgdoc.getElementById("svg_"+currentObj.getAttribute("id").substr(4));
    var x=obj.getAttribute("x");
    var y=obj.getAttribute("y");
    //根据当前对象的位置和大小，设置尺寸调节框
    var objectMark = svgdoc.getElementById("SVGMObjectMark").cloneNode(true);
    objectMark.setAttribute("id", "mark_"+currentObj.getAttribute("id").substr(4));
    objectMark.setAttribute("visibility", "visible")    svgdoc.getElementById("SVGMObjectMarks").appendChild(objectMark);
    var marks = objectMark.getElementsByTagName("rect");
    //SVGMObjectMark_lu
    marks.item(0).setAttribute("x",x-5);
    marks.item(0).setAttribute("y",y-5);
    //SVGMObjectMark_ru
    marks.item(1).setAttribute("x",x*1+currentObjW*scalex);
    marks.item(1).setAttribute("y",y-5);
    //SVGMObjectMark_ld
    marks.item(2).setAttribute("x",x-5);
    marks.item(2).setAttribute("y",y*1+currentObjH*scaley);
    //SVGMObjectMark_rd
    marks.item(3).setAttribute("x",x*1+currentObjW*scalex);
    marks.item(3).setAttribute("y",y*1+currentObjH*scaley );

}
function objectSelected(evt)
{
  var obj;
  setCurrentObject(evt.target,evt.ctrlKey && theStatus==1);
  if (evt.type=="mousedown" )
  {
    leftButtonPressed=true;
    unSelection();
    obj=evt.target.parentNode; //按规则，事件应发生在use对象上，而父节点应是svg对象。
    dx=obj.getAttribute("x")-evt.screenX; // 计算鼠标与对象坐标的偏移量
    dy=obj.getAttribute("y")-evt.screenY;
  }
  if (evt.type=="mouseup" )
  {
    leftButtonPressed=false;
    switch (theStatus)
    {
    case 1:
      //此时表示要选中该对象
      //obj=svgdoc.getElementById("SVGMObjectMarks");
      //obj.setAttribute("visibility","visible");//显示尺寸调节框
      break;
    case 3:
      //此时表示该对象的中心点作为连线的起点
      obj = currentObj.parentNode;
      var x=obj.getAttribute("x")*1+currentObjW*scalex/2;
      var y=obj.getAttribute("y")*1+currentObjH*scaley/2;
      currentLine = svgdoc.getElementById(currentClass).cloneNode(true);
      currentLine.setAttribute("id",getMaxID());
      obj=svgdoc.getElementById("SVGMLinkLines");
      obj.appendChild(currentLine );
      lastSegment.setAttribute("x1", x);
      lastSegment.setAttribute("y1", y);
      lastSegment.setAttribute("x2", x);
      lastSegment.setAttribute("y2", y);
      lastSegment.setAttribute("visibility","visible");
      currentLine.setAttribute("d","M"); //由于在onClick中也要处理此点击，此处不加坐标
      theStatus=31;
      associateObject(currentObj, currentLine,"start");
      break;
    case 31:
      //表示该对象的中心点作为连线的终点
      obj = currentObj.parentNode;
      var x=obj.getAttribute("x")*1+currentObjW*scalex/2;
      var y=obj.getAttribute("y")*1+currentObjH*scaley/2;      currentLine.setAttribute("d",currentLine.getAttribute("d")+","+x+" "+y);
      lastSegment.setAttribute("visibility","hidden");
      theStatus=1;
      currentClass='selection';      svgdoc.getElementById(cursor).setAttribute("visibility","hidden");
      cursor='auto';
      associateObject(currentObj, currentLine,"end");
      break;
    }
  }
}
function objectMarkDrag(evt)
{
  var obj=evt.target;
  var newx, newy;
  var marks=obj.parentNode.getElementsByTagName("rect");
  if (leftButtonPressed)
  {
    newx=evt.screenX+dx;
    newy=evt.screenY+dy;
    var x1=marks.item(0).getAttribute("x")*1;
    var y1=marks.item(0).getAttribute("y")*1;
    var x2=marks.item(3).getAttribute("x")*1;
    var y2=marks.item(3).getAttribute("y")*1;
    switch (obj.getAttribute("class"))
    {
    case "SVGMObjectMark_lu":
      y1=newy;
      x1=newx;
      break;
    case "SVGMObjectMark_ru":
      y1=newy;
      x2=newx;
      break;
    case "SVGMObjectMark_ld":
      x1=newx;
      y2=newy;
      break;
    case "SVGMObjectMark_rd":
      y2=newy;
      x2=newx;
      break;
     }
    var theScalex=(x2-x1-5)/currentObjW;
    var theScaley=(y2-y1-5)/currentObjH;
    if (theScalex>0 && theScaley>0)
    {
      marks.item(0).setAttribute("x",x1);
      marks.item(0).setAttribute("y",y1);
      marks.item(1).setAttribute("x",x2);
      marks.item(1).setAttribute("y",y1);
      marks.item(2).setAttribute("x",x1);
      marks.item(2).setAttribute("y",y2);
      marks.item(3).setAttribute("x",x2);
      marks.item(3).setAttribute("y",y2);
      zoomObj(theScalex, theScaley);
      moveObj(x1+5, y1+5);
    }
  }
}

function objectMarkSelected(evt)
{//对象的标记块与线条的标记块共享相同的选中处理模块
  if (evt.type=="mousedown") leftButtonPressed=true;
  if (evt.type=="mouseup")   leftButtonPressed=false;
  var obj=evt.target;
  dx=obj.getAttribute("x")-evt.screenX; // 计算气鼠标与对象坐标的偏移量
  dy=obj.getAttribute("y")-evt.screenY;
}

//------------------连线类管理-----------------------------------
function isInLine(x1,y1,x2,y2,xa,ya)
{
  if (!(x1<=xa&&xa<=x2 ||x2<=xa && xa<=x1)) return false;//>
  if (!(y1<=ya&&ya<=y2 ||y2<=ya && ya<=y1)) return false; //>
  var A=y1-y2;
  var B=x2-x1;
  var C=x1*y2-x2*y1;
  var d=Math.pow(A*xa+B*ya+C,2)/(A*A+B* Black Eye

;
  if (d>2) return false;
  return true;
}

function setCurrentLine(obj,ctrlKey)
{
//var obj = evt.target;
//删除原来的标记块
var lineMarks=svgdoc.getElementById("SVGMLineMarks");
while (lineMarks.hasChildNodes()) lineMarks.removeChild(lineMarks.lastChild);
lineMarks.setAttribute("visibility","visible");
currentLine = obj;
extendSelection(obj,ctrlKey);
var coodinates=obj.getAttribute("d").substr(1).split(",");
var nodeSample=svgdoc.getElementById("SVGMLineMark");
var xy=coodinates[0].split(" ");
for (var i=0;i<coodinates.length;i++) //>
{
  xy=coodinates[i].split(" ");
  node=nodeSample.cloneNode(true);
  node.setAttribute("x",xy[0]-2);
  node.setAttribute("y",xy[1]-2);
  lineMarks.appendChild(node);
};
}
function lineSelected(evt)
{
  var obj=evt.target;
  ox=obj.getAttribute("x")-evt.screenX; // 计算气鼠标与对象坐标的偏移量
  oy=obj.getAttribute("y")-evt.screenY;
  unSelection();
  if (evt.type=="mousedown") {
    leftButtonPressed=true;
    return;
  }
  if (evt.type=="mouseup")   leftButtonPressed=false;
  setCurrentLine(evt.target,evt.ctrlKey);
}
function lineBreak(evt)
{
  if (!leftButtonPressed) return;
  var i;
  var x=evt.screenX;
  var y=evt.screenY;
  var zbs = evt.target.getAttribute("d").substr(1).split(",");
  zb1=zbs[0].split(" ");
  for (i=1;i <zbs.length;i++) //>
  {
    var zb2=zbs[i].split(" ");
    if (isInLine(zb1[0]*1, zb1[1]*1,zb2[0]*1,zb2[1]*1,evt.screenX,evt.screenY)) break;
    zb1=zb2;
  }
  var d=evt.target.getAttribute("d").replace(","+zbs[i], ","+evt.screenX+" "+evt.screenY+","+zbs[i]);
  evt.target.setAttribute("d",d);
  var lineMarks=svgdoc.getElementById("SVGMLineMarks");
  var node=svgdoc.getElementById("SVGMLineMark").cloneNode(true);
  node.setAttribute("x", evt.screenX-2);
  node.setAttribute("y", evt.screenY-2);
  lineMarks.appendChild(node);
  setCurrentLine(evt.target,false);
}
function lineMarkDrag(evt)
{
  if (!leftButtonPressed) return;
  var obj=evt.target;
  var x=obj.getAttribute("x")*1+2;
  var y=obj.getAttribute("y")*1+2;
  //调整拐点
  var oldPoint = ","+x+" "+y+",";
  var newPoint=","+(evt.screenX+dx+2)+" "+(evt.screenY+dy+2)+",";
  var d = currentLine.getAttribute("d");
  if (d.search(oldPoint)!=-1) {
    //移动标记块
    obj.setAttribute("x", evt.screenX+dx);
    obj.setAttribute("y", evt.screenY+dy);
    currentLine.setAttribute("d",d.replace(oldPoint,newPoint));
  }
}
//--------------对象与连线的关联处理----------------------
function associateObject(object, line,endType)
{//endType="start"|"end"
  var desc;
  desc=svgdoc.createElement("desc");
  desc.setAttribute("class", endType);
  desc.setAttribute("xml:base",object.getAttribute("id").substr(4));
  line.appendChild(desc);
  desc=svgdoc.createElement("desc");
  desc.setAttribute("class", endType);
  desc.setAttribute("xml:base",line.getAttribute("id"));
  object.appendChild(desc);
}
function removeLine(line)
{
  var descChilds=line.getElementsByTagName("desc");
  var myID=line.getAttribute("id");
  for (var i=0;i<descChilds.length;i++) //>
  {
    var objID = descChilds.item Light Bulb

.getAttribute("xml:base");
    var obj=svgdoc.getElementById("use_"+objID);
    var lines=obj.getElementsByTagName("desc");
    for (var j=0;j<lines.length;j++) if (lines.item(j).getAttribute("xml:base")==myID) obj.removeChild(lines.item(j)); //>
  }
  line.parentNode.removeChild(line);
}
function removeObject(object)
{
  var lines = getLinesAssociated(object,"start");
  for (var i=0;i<lines.length;i++) removeLine(lines[i]); //>
  lines = getLinesAssociated(currentObj,"end");
  for (var i=0;i<lines.length;i++) removeLine(lines[i]); //>
  var svg=object.parentNode;
  svg.parentNode.removeChild(svg);
}
function getStartObject(line)
{
}
function getEndObject(line)
{
}
function getLinesAssociated(object, endType)
{
  var lines=new Array();
  var count=0;
  var descNodes = object.getElementsByTagName("desc");
  for (var i=0;i<descNodes.length;i++) //>
  {
    var desc=descNodes.item Light Bulb

;
    if (desc.getAttribute("class")==endType) lines[count++]=svgdoc.getElementById(desc.getAttribute("xml:base"));
  }
  return lines;
}
function extendSelection(obj, ctrlKey)
{
  selections=obj;
}
function removeSelection()
{
  var obj=selections;
  unSelection();
  switch (obj.nodeName)
  {
  case "use":
    removeObject(obj);
    break;
  case "path":
    removeLine(obj);
    break;
  }
}
function unSelection()
{
  var marks = svgdoc.getElementById("SVGMObjectMarks");
  while (marks.hasChildNodes()) marks.removeChild(marks.lastChild);
  marks = svgdoc.getElementById("SVGMLineMarks");
  while (marks.hasChildNodes()) marks.removeChild(marks.lastChild);
}
//-------------------------------------------------------------------

shunyat edited on 2005-05-18 20:34

话题树型展开

人气	标题	作者	字数	发贴时间
10962	能用 SVG JAVASCRIPT HTML制作过程建模的一个系统吗(结合部分源码)	shunyat	57	2005-05-16 22:10
9681	怎样结合以下代码完成一个简单的过程模型的工具	shunyat	20113	2005-05-18 20:31

已读帖子

新的帖子

被删除的帖子