svg webtopo原型9- 连线

来源：互联网发布：淘宝客服 400 编辑：程序博客网时间：2024/06/11 01:00

之前漏发了一篇，补上。svg webtopo的基础原型就这些了。

剩下就是曲线、线型的渲染、右键这些。有空再研究了。反正离实用还有差距。用作原型基本够用了。

SVG不支持zindex,这个真是和canvas一样，后画的会覆盖先画的。土。。。。

处理连线的边缘就比较麻烦了。

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>电路</title> <meta http-equiv="X-UA-Compatible" content="chrome=1"><!-- legengd.html 1.显示设备和连线--></head><script type="text/javascript" language="javascript" src="./js/moveObjs.js"></script><script type="text/javascript" language="javascript" src="./js/svgutil.js"></script><script type="text/javascript" language="javascript" src="./js/topo.js"></script><script></script><body bgcolor="#ffffff"><br><button onclick="show()">开始</button><br><button onclick="zoomby(0.5)">缩小2倍cor</button><button onclick="zoomby(2)">放大 2倍cor</button><button onclick="zoom(1,300,300)">还原</button><br><button onclick="showsrc()">源码</button><br><button onclick="movetest()">移动</button><br><div id="divsvg" style="position: absolute;top:180;left:0"></div><div id="pos"></div><div id="pos1"></div></body><script>var svg;var svgw=400;var svgh=300;//var svgdoc;var plat;function show(){  svg=initSVG(svgw,svgh); //延迟一下，最小是10ms var tidst=window.setTimeout(show1,20);}function show1(){ //var svg; //svg=initSVG(200,200); //var svgdoc; svgdoc=getSVGDocument(svg); plat=getrootg(svg,svgdoc);   //生成设备A curentStyle="stroke:black;fill:white"; var device=createDev("DEV00001",50,100,29.0,17.0,"./image/DEV_IP_R.gif","XM-BB-GSR12816-D-1.MAN(61.154.237.12)"); //生成设备B curentStyle="stroke:black;fill:green"; var device=createDev("DEV00002",150,150,29.0,17.0,"./image/ALCATEL.gif","XM-BB-7750-D-2.MAN(61.154.237.13)");//生成连线.不支持zindex,后画的在上面 curentStyle="stroke:green;fill:none;stroke-width:2"; var cir=createCircuit("CIR00001",60,115,155,155,"测试电路name","testtitle","DEV00001","DEV00002",undefined,curentStyle); //生成设备C curentStyle="stroke:black;fill:green"; var device=createDev("DEV00003",150,200,29.0,17.0,"./image/huawei.gif","XM-BB-NE40E-D-2.MAN(61.154.237.14)");//生成连线.不支持zindex,后画的在上面 curentStyle="stroke:green;fill:none;stroke-width:3"; var cir=createCircuit("CIR00002",60,115,155,205,"测试电路name","testtitle","DEV00001","DEV00003",undefined,curentStyle); }  function movetest(){ //验证一下svg的group能否整体移动  var svgdoc=getSVGDocument(svg);  var plat=svgdoc.getElementById('DEV00001');  //var plat=svgdoc.getElementById('testrec');    //对g不起作用   // plat.setAttribute("x",150);  //可以  //alert(plat.getAttribute("x"));  plat.setAttribute("transform","translate(0,50)");  //变形前后的x是不变的  //alert(plat.getAttribute("x"));  //是相对原始位置  //plat.setAttribute("transform","translate(0,0)");    //移动线  cir=svgdoc.getElementById('CIR00001');    //alert(cir.getAttribute("x1"));  //alert(cir.x1);  cir.setAttribute("y1",165);}</script></html>