svg webtopo原型9- 连线

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


 

webtopo-svg-edit是一款基于Web的拓扑图编辑工具,它提供了一个简单易用的界面,帮助用户创建、编辑和分享各种拓扑图。用户可以通过拖拽和连接各种元素来构建自己的网络拓扑图,比如计算机网络、物联网设备、数据中心架构等。该工具使用SVG(Scalable Vector Graphics)作为图形格式,这意味着用户可以无限放大图像而不会失真,同时也支持各种颜色、样式和形状的定制。 webtopo-svg-edit具有丰富的功能,包括但不限于: 1. 图形编辑:用户可以添加、删除、移动和编辑各种形状和文本,并进行颜色、线条样式等属性的设置。 2. 连接元素:用户可以通过简单的拖拽和连接操作将不同的图形元素连接在一起,形成完整的拓扑图。 3. 分组组织:用户可以将多个元素分组组织,方便整体的管理和移动。 4. 导出分享:用户可以将编辑完成的拓扑图导出为SVG格式,以便在其他应用程序或网站中使用,也可以直接通过链接分享给他人。 webtopo-svg-edit的使用非常灵活和便捷,用户无需下载安装任何软件,只需通过浏览器访问网页即可开始编辑拓扑图。它适用于网络工程师、系统管理员、教育工作者等不同领域的用户,帮助他们更直观、高效地表达和分享各种网络拓扑结构。总之,webtopo-svg-edit是一款功能强大、易用便捷的Web拓扑图编辑工具,为用户提供了丰富的功能和灵活的操作方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值