canvas-實現拓撲圖


https://www.cnblogs.com/xiaohualu/p/10383801.html  轉載

http://www.jtopo.com/introduction-in-5-minutes.html 官網

https://blog.csdn.net/ilovepengqi/article/details/78989288  轉一個實例

https://www.jianshu.com/p/e4dde83a7282

https://blog.csdn.net/linkedin_37345339/article/details/54598527

https://www.pianshen.com/article/369812234/

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #canvas{
 8                 background: red;
 9             }
10         </style>
11     </head>
12     <body>
13         <canvas id="canvas" width="300" height="300"></canvas>
14         <script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
15         <script type="text/javascript">
16             var canvas = document.getElementById('canvas'); 
17             var stage = new JTopo.Stage(canvas); // 創建一個舞台對象
18             var scene = new JTopo.Scene(stage); // 創建一個場景對象
19             
20             var nodeFrom = new JTopo.Node("from");
21             nodeFrom.setLocation(50,50);
22             scene.add(nodeFrom);
23             
24             var nodeTo = new JTopo.Node("To");
25             nodeTo.setLocation(100,100);
26             scene.add(nodeTo);
27             
28             var link = new JTopo.Link(nodeFrom, nodeTo); // 增加連線
29             scene.add(link);
30         </script>
31     </body>
32 </html>

//下面是文本位置顯示屬性值匯總:

node.textPosition = 'Top_Center'; // 文本位置

Top_Left,Top_Rigth,Top_Center

Middle_Letf,Middle_Rigth,Middle_Center

Bottom_Left,Bottom,Rigth,Bottom_Center

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM