JTopo 框架教程之二：節點連線
阿新 • • 發佈：2019-02-09
效果展示：
JTopo 框架學習案列之二：節點連線
相關說明：相關注釋已經標註在程式碼中。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>JTopo 教程之連線</title> <script src="js/jquery-1.9.0.js" type="text/javascript"></script> <script src="js/jtopo-0.4.2-min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { //畫布物件：canvas var canvas = document.getElementById('canvas'); //抽象的舞臺物件對應一個Canvas物件，所有圖形展示的地方 var stage = new JTopo.Stage(canvas); //場景物件 var scene = new JTopo.Scene(stage); //背景顏色設定 scene.background='#CDC5BF'; //節點之間------------連線 var vm= new JTopo.Node('vm'); //節點1：vm vm.setLocation(100,180);//節點1：vm位置設定 scene.add(vm);//場景物件新增節點1：vm var physical=new JTopo.Node('physical');//節點2：physical physical.setLocation(100,20);//節點2:physical 位置設定 scene.add(physical);//場景物件新增節點2：physical var link=new JTopo.Link(vm,physical);//連線物件 link.lineWidth = 3;//連線大小 link.lineJoin = 'round'; link.name='Link';//連線名稱 scene.add(link);//場景物件新增連線物件：link. }); </script> </head> <body> <canvas id="canvas" width="300" height="200"></canvas> </body> </html>
補充說明：JTopo 開源框架的API文件，作者正在更新，先階段無法解析相關物件方法。