jTopo 入門 簡單例項
阿新 • • 發佈：2018-12-10
jTopo Day1
解決了該死的 drawImage 不能顯示的問題
最近導師讓搞網路拓撲圖，可以拖動的那種。網上參考了很多，要麼是收費；要麼就是專案太龐大，和需求不符合，於是便準備搞一下 jTopo。
開始
jTopo 特點
- 基於 HTML5 canvas 開發
- 開源
- 體積小
下載
本文最後給出專案相關程式碼，大家可以自行下載。
jtopo.js
到官網就可以下載，現在最新的版本是0.4.8，開啟下面的連結。
http://www.jtopo.cn/download/jtopo-0.4.8-min.js
本地新建檔案 jtopo-0.4.8-min.js，把瀏覽器上的文字全部複製進去就好了。
jquery.js
http://www.jq22.com/jquery-info122
選擇一個版本下載。
簡單的一個例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jtopo-0.4.8-min.js"></script> <script> $ (document).ready(function() { //畫布物件：canvas var canvas = document.getElementById('canvas'); //抽象的舞臺物件對應一個Canvas物件，所有圖形展示的地方 var stage = new JTopo.Stage(canvas); //場景物件 var scene = new JTopo.Scene(stage); //背景顏色設定 scene.background='#00ff00'; //節點新增 var node = new JTopo.Node("JKP"); //設定節點位置 node.setLocation(150, 100); //節點填充顏色 node.fillcolor='#CD0000'; //場景物件新增節點 scene.add(node); }); </script> </head> <body> <canvas id="canvas" width="910" height="400"></canvas> </body> </html>
瀏覽器報錯
這個錯誤讓我搞了一個下午，一開始以為是 js 檔案有問題，後來以為是因為沒有放在伺服器上，又放在了 Tomcat 下除錯，結果還是不行。後來挨個去部落格下面看大家的提問，發現大家也有遇到這個問題。有人說把 scene.background 改成 scene.backgroundcolor，我改了還是不行。。。我的眼淚簡直要掉下來￣□￣｜｜
晚上吃完飯，下載了一個別人做好的專案的原始碼。發現只要把 scene.background 設定成一個固定的背景圖片就可以了。下面發下最終版的程式碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jtopo-0.4.8-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='./img/bg.jpg'; //節點新增 var node = new JTopo.Node("EMC"); //設定節點位置 node.setLocation(150, 100); //節點填充顏色 node.fillcolor='#CD0000'; //場景物件新增節點 scene.add(node); }); </script> </head> <body> <canvas id="canvas" width="300" height="200"></canvas> </body> </html>