js 繪製2D機櫃（一）2D機櫃的基本繪製

今天被領導要求用js繪製2d機櫃用於向客戶展示客戶資產以及管理裝置，雖然我是後端，既然被分配到這個任務那就得做好。

繪製的第一步當然是繪製機櫃框框，這個很簡單，寫個div然後將邊框設定下就好了：

.parentblock

這裡將背景設定成灰色顯得真實些：

為了辨別機櫃，這裡在機櫃上面再加乙個機櫃title：

.titleblock

測試機櫃

這樣樣式為：

這樣乙個機櫃的雛形就有了，現在需要往機櫃中放入機櫃的單元：

.innercontentblock .areablock .blockfont

543 2154 3215 4321 5432 1543 2154321

這樣基本樣式如下：

繪製出的機櫃圖為：

現在有一點像那麼樣子了。有了基本的樣式和示例，現在就可以寫方法動態規劃整個機櫃圖了，基本思路是，首先確定機櫃共有多少個單元，然後定死單元之間的間隔和單元高度，有了這兩個引數再乘以單元數量就可以知道機櫃的高度也就是height。

var blockinterval = 3;//單元的間隔
var blockheight = 12;//單元高度
var parentblockheight = (blockheight + blockinterval) * unitcount + 'px';//機櫃總高度

有了基本的單元及機櫃高度，現在還有個問題就是有些裝置會佔好幾個單元，這個如何處理呢？這裡的思路是首先將各個裝置所在的單元起始位置以及一共占用單元的個數封裝入map中，然後通過迴圈將各個裝置加上合適的高度然後迴圈從當前單元跳過單元所佔的單元數繼續迴圈。

//index為裝置所在單元的起始位置
//length為裝置所佔單元的個數
//name為裝置的基本資訊
//type為裝置型別方便插入不同的裝置
var unitarray= new array();
unitarray.push()
unitarray.push()
unitarray.push()

//迴圈將裝置封裝入map中以供後續函式使用
for (var i = 0; i < unitarray.length; i++)

var content = "";
for (var i = unitcount; i >= 1; i--) else 
}

這樣動態繪製之後的機櫃圖為：

現在只要從後台獲取並封裝好相應的資料就可以動態顯示機櫃了，但是這裡還有乙個需求就是要當滑鼠游標在裝置或者單元格上時可以顯示對應的裝置資訊。這裡用jquery ui實現

$( document ).tooltip(,
items: "[data-geo]",
content: function() else
return content;}}
});

這樣實現的結果為：

到這裡基本的需求都已經滿足，後續如果客戶還要追加拖動新增功能或者其他功能到時候會持續更新。這裡貼下完整**：

測試機櫃

**已上傳，這裡是位址。

js 繪製2D機櫃（一）2D機櫃的基本繪製

繪製2D學習一

2d的公式繪製二體2D執行軌跡

FTT字型繪製，2D階段

js 繪製2D機櫃（一）2D機櫃的基本繪製

繪製2D學習一

2d的公式 繪製二體2D執行軌跡

FTT字型繪製，2D階段

相關推薦

2d的公式繪製二體2D執行軌跡