svg webtopo原型9

quasiceo 2015-01-15

展開全文

svg webtopo原型9- 連線

分類： svg web編程 2012-07-18 10:51 345人閱讀評論(0) 收藏舉報

javascript function chrome 測試 html c

之前漏發(fā)了一篇，補上。svg webtopo的基礎(chǔ)原型就這些了。

剩下就是曲線、線型的渲染、右鍵這些。有空再研究了。反正離實用還有差距。用作原型基本夠用了。

SVG不支持zindex,這個真是和canvas一樣，后畫的會覆蓋先畫的。土。。。。

處理連線的邊緣就比較麻煩了。

[html] view plain copy

<html xmlns="http://www./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.顯示設(shè)備和連線
-->
</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);
//生成設(shè)備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)");
//生成設(shè)備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);
//生成設(shè)備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>