在php項目中繪製拓撲圖,在php項目中繪製拓撲圖的方法

本文目錄一覽：

• 1、php能畫拓撲圖嗎
• 2、用HTML+CSS+JS如何 動態繪製 網絡拓撲圖?
• 3、如何使用HTML5 Canvas動態的繪製拓撲圖
• 4、如何對qunee of html5 中的拓撲圖元素位置進行實時監控
• 5、怎麼使用jointjs 在php項目中繪製拓撲圖
• 6、如何用PHP創建能夠顯示網絡拓撲圖節點信息的網頁？

php能畫拓撲圖嗎

進入php源程序目錄中的ext目錄中，這裡存放着各個擴展模塊的源代碼，選擇你需要的模塊，比如curl模塊：cd curl執行phpize生成編譯文件！

phpize在PHP安裝目錄的bin目錄/usr/local/php5/bin/phpize運行時，

可能會報錯：Cannot find autoconf. Please check your autoconf installation andthe $PHP_AUTOCONFenvironment variable is set correctly and then rerun thisscript.，需要安裝autoconf：yum install autoconf（RedHat或者CentOS）、apt-get installautoconf（Ubuntu Linux）！

執行/usr/local/php5/bin/php -v這個命令時，php會去檢查配置文件是否正確，

如果有配置錯誤，這裡會報錯，可以根據錯誤信息去排查！

用HTML+CSS+JS如何 動態繪製 網絡拓撲圖?

1.各個應用系統、服務器信息及系統直接的調用都錄入到數據庫中

2.前端拓撲圖、或系統調用關係圖的展示UI可以通過一些選項從數據庫中撈出數據，然後在UI上動態繪製出關係圖來

3.如HTML5 Canvas或基於HTML5 Canvas的JTopo、SVG都可以很好的繪製出這種圖來。

如何使用HTML5 Canvas動態的繪製拓撲圖

canvas動態的繪製拓撲圖

1.添加引用\r\n右擊項目-添加引用-瀏覽 找到本地的dll文件\r\n2.using 該dll文件裡面代碼的名稱空間 \r\n然後就可以調用dll文件裡面的類和方法

canvas定義和用法：

Canvas 對象表示一個 HTML 畫布元素 -canvas。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。

你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的getContext() 方法並且把直接量字符串 “2d” 作為唯一的參數傳遞給它而獲得的。

canvas 標記在 Safari 1.3 中引入，在製作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，canvas 標記及其 API 可以使用位於excanvas點sourceforge點net的 ExplorerCanvas 開源項目來模擬。

提示：如果希望學習如何使用 canvas 來繪製圖形，可以訪問 Mozilla 提供的Canvas 教程（英文）以及相應的中文 Canvas 教程。

使用 canvas 標記繪圖

大多數 Canvas 繪圖 API 都沒有定義在 canvas 元素本身上，而是定義在通過畫布的getContext() 方法獲得的一個“繪圖環境”對象上。

Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字符串，比如調用 beginPath() 和 arc() 方法。

一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。

注釋：Canvas API 非常緊湊的一個原因上它沒有對繪製文本提供任何支持。要把文本加入到一個 canvas 圖形，必須要麼自己繪製它再用位圖圖像合併它，或者在 canvas 上方使用 CSS 定位來覆蓋 HTML 文本。

Canvas 對象的屬性

height 屬性

畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

width 屬性

畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是 300。

如何對qunee of html5 中的拓撲圖元素位置進行實時監控

動態的繪製拓撲圖1.添加引用\r\n右擊項目-添加引用-瀏覽找到本地的dll文件\r\n2.using該dll文件裡面代碼的名稱空間\r\n然後就可以調用dll文件裡面的類和方法定義和用法：Canvas對象表示一個HTML畫布元素-。它沒有自己的行為，但是定義了一個API支持腳本化客戶端繪圖操作。你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過CanvasRenderingContext2D對象獲得。這是通過Canvas對象的getContext()方法並且把直接量字符串”2d”作為唯一的參數傳遞給它而獲得的。標記在Safari1.3中引入，在製作此參考頁時，它在Firefox1.5和Opera9中也得到了支持。在IE中，標記及其API可以使用位於excanvas點sourceforge點net的ExplorerCanvas開源項目來模擬。提示：如果希望學習如何使用來繪製圖形，可以訪問Mozilla提供的Canvas教程（英文）以及相應的中文Canvas教程。使用標記繪圖大多數Canvas繪圖API都沒有定義在元素本身上，而是定義在通過畫布的getContext()方法獲得的一個“繪圖環境”對象上。CanvasAPI也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字符串，比如調用beginPath()和arc()方法。一旦定義了路徑，其他的方法，如fill()，都是對此路徑操作。繪圖環境的各種屬性，比如fillStyle，說明了這些操作如何使用。注釋：CanvasAPI非常緊湊的一個原因上它沒有對繪製文本提供任何支持。要把文本加入到一個圖形，必須要麼自己繪製它再用位圖圖像合併它，或者在上方使用CSS定位來覆蓋HTML文本。Canvas對象的屬性height屬性畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是300。width屬性畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是窗口寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。默認值是300。

怎麼使用jointjs 在php項目中繪製拓撲圖

最近有一個需求是根據數據自動在前端頁面畫出一個流程導向圖,簡單說就是把數據以A節點指向B節點,B節點指向C節點這種形式給你,然後讓頁面自己在一定區域內渲染出一個流程圖.當然節點上可能還有其他信息,這個暫時不考慮,就是這樣一個需求,最後是藉助一個工具完成的.先說一下處理過程:

  可以說這個問題一開始我走了彎路,想的不是那麼清楚,一開始想的是自己畫.低端的就是用html+css各種布局,畫出方塊和線條,至於箭頭什麼的再想辦法.後來一想這樣太低端了,應該專業一點,就打算用canvas或者svg.因為之前用過echarts前端的圖標庫,知道它底層有個依賴庫zrender就是專門弄canvas的,所以好一陣看,感覺還靠譜,能畫出來.

  這樣雖然能畫出來,不過接下來我們就要考慮更多的問題,首先什麼時候折行,然後遇到分支的種種情況怎麼處理.最後我查資料竟然開始涉及一些圖論的東西了,深刻感覺到東西好像變複雜了,我的目的不是研究理論,而是為了一個實現.

  這時候轉變一下思路,有沒有什麼工具能專門做這樣的工作,類似於jQuery大家都用它操作DOM,RequireJS都用它來實現模塊化加載.那應該也有類似的東西,集成了數學上的圖論,自動布局等.這就不得不說Github火的一塌糊塗是有原因的,我搜了很多中文網站以及百度都沒什麼結果(不知道是不是關鍵字有問題),總之沒搜到能用的東西.但是在Github上找到了一個開源項目:dagre-d3.

  看名字就能猜到它是基於D3庫的,D3是一個專門用於前端圖形繪製的庫,dagre-d3就是實現自動布局並且繪製流程圖的這麼一個東西.

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts a front-end to dagre, providing actual rendering using D3.

  上一個簡單的Demo:

// Create a new directed graph

var g = new dagreD3.Digraph();

// Add nodes to the graph. The first argument is the node id. The second is

// metadata about the node. In this case we’re going to add labels to each of

// our nodes.

g.addNode(“kspacey”,    { label: “Kevin Spacey” });

g.addNode(“swilliams”,  { label: “Saul Williams” });

g.addNode(“bpitt”,      { label: “Brad Pitt” });

g.addNode(“hford”,      { label: “Harrison Ford” });

g.addNode(“lwilson”,    { label: “Luke Wilson” });

g.addNode(“kbacon”,     { label: “Kevin Bacon” });

// Add edges to the graph. The first argument is the edge id. Here we use null

// to indicate that an arbitrary edge id can be assigned automatically. The

// second argument is the source of the edge. The third argument is the target

// of the edge. The last argument is the edge metadata.

g.addEdge(null, “kspacey”,   “swilliams”, { label: “K-PAX” });

g.addEdge(null, “swilliams”, “kbacon”,    { label: “These Vagabond Shoes” });

g.addEdge(null, “bpitt”,     “kbacon”,    { label: “Sleepers” });

g.addEdge(null, “hford”,     “lwilson”,   { label: “Anchorman 2” });

g.addEdge(null, “lwilson”,   “kbacon”,    { label: “Telling Lies in America” });

  它渲染出來是這樣的:

  這樣我們只要把數據處理成對應格式,就可以輕鬆的自動繪製會流程圖.比較給力的是它對數據的支持良好,有多個格式可以選擇,而且雖然接口不多,但是對於節點以及線條的操作都有,可以很輕鬆的改變節點以及線條的樣式,這個大家可以看官方的demo.

  另外如果要附加交互事件,可以通過jquery實現,也很容易,我使用bootstrap的tooltip很輕鬆的就加上去了.感覺還是個很給力的庫,而且國內這方面資料感覺不多

如何用PHP創建能夠顯示網絡拓撲圖節點信息的網頁？

我也在找這種方法，如果過幾天找不到，我可能會通過圖片熱點方式解決