快速創建 HTML5 Canvas 電信網絡拓撲圖
前言 電信網絡拓撲圖確實實用性很強，最近有個項目是基於這個的，為了寫得豐富一點，還加了自動布局已經屬性欄部分，不過這個 Demo 真的寫得很用心，稍微改改都能直接運用到項目中去，還可以進行數據交互，總之希望能對大家有所幫助。 效果圖 拓撲圖 從上面的效果圖中我們可以看到，整個頁面分為 ...
原文：基於 HTML5 Canvas 繪制的電信網絡拓撲圖
電信網結構 telecommunication network structure 是指電信網各種網路單元按技術要求和經濟原則進行組合配置的組合邏輯和配置形式。組合邏輯描述網路功能的體系結構，配置形式描述網路單元的鄰接關系，即以交換中心 或節點 和傳輸鏈路所組成的拓撲結構。常見的網絡拓撲結構有星型結構 總線結構 環形結構 樹形結構 網狀結構 混合型拓撲以及蜂窩拓撲結構等，本文的例子主要描繪的是總線 ...
2018-02-07 06:31 1 1093 推薦指數：
相關推薦
電信網絡拓撲圖自動布局
在電信網絡拓撲圖中，很經常需要用到自動布局的功能，在大數據的層級關系中，通過手工一個一個擺放位置是不太現實的，工作量是相當大的，那么就有了自動布局這個概念，來解放布局的雙手，讓網絡拓撲圖能夠布局出一個優美的圖案，當然在一些復雜的布局中，光有自動布局還是不行的，還是需要手工地做些相應的調整，才能讓 ...
基於HTML5的網絡拓撲圖
電信網管系統中，設備狀態信息的實時展示非常重要，通常會掛載一堆圖標來展示狀態或告警信息，圖標的信息量有限，有時需要更詳細的面板，甚至以圖表的形式展現，本文將結合最近客戶提到的需求，使用 Qunee1.6 beta版本，實現拓撲圖中設備信息的實時顯示。 Qunee 中ui 的定制非常靈活，每個 ...
電信網絡拓撲圖自動布局之總線
在前面《電信網絡拓撲圖自動布局》一文中，我們大體介紹了 HT for Web 電信網絡拓撲圖自動布局的相關知識，但是都沒有深入地描述各種自動布局的用法，我們今天在這邊就重點介紹總線的具體實現方案。 在 HT for Web 的連線手冊中，有說明可以自定義連線類型 ...
HTML5 網絡拓撲圖性能優化
HTML5 中的 Canvas 對文本的渲染（fillText，strokeText）性能都不太好，比如設置字體（font）、文本旋轉（rotation），如果繪制較多的文本時，一些交互操作會手動很大的影響，操作起來沒那么順暢，體驗將會極其差，這不是我們想要的結果，再進一步和圖片的繪制進行比較比較 ...
基於 HTML5 WebGL 的 3D 網絡拓撲圖
在數據量很大的2D 場景下，要找到具體的模型比較困難，並且只能顯示出模型的的某一部分，顯示也不夠直觀，這種時候能快速搭建出 3D 場景就有很大需求了。但是搭建 3D 應用場景又依賴於通過 3ds ...
快速開發基於 HTML5 網絡拓撲圖應用1
今天開始我們就從最基礎解析如何構建 HTML5 Canvas 拓撲圖應用，HT 內部封裝了一個拓撲圖形組件 ht.graph.GraphView（以下簡稱 GraphView）是 HT 框架中 2D 功能最豐富的組件，其相關類庫都在 ht.graph 包下。GraphView 具有基本圖形的呈現 ...