之前漏发了一篇,补上。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>