svg webtopo原型9- 连线

最新推荐文章于 2024-07-08 23:01:07 发布

laputa73

最新推荐文章于 2024-07-08 23:01:07 发布

阅读量1.3k

点赞数

分类专栏： svg web编程文章标签： javascript function chrome 测试 html c

本文链接：https://blog.csdn.net/laputa73/article/details/7758276

版权

web编程同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

svg

9 篇文章 0 订阅

订阅专栏

之前漏发了一篇，补上。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 οnclick="show()">开始</button><br>
<button οnclick="zoomby(0.5)">缩小2倍cor</button>
<button οnclick="zoomby(2)">放大 2倍cor</button>
<button οnclick="zoom(1,300,300)">还原</button><br>
<button οnclick="showsrc()">源码</button><br>
<button οnclick="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>