基於HTML5 Canvas 實現地鐵站監控

伴隨國內經濟的高速發展，人們對安全的要求愈來愈高。爲了防止下列狀況的發生，您須要考慮安裝安防系統： 提供證據與線索：不少工廠銀行發生偷盜或者事故相關機關能夠根據錄像信息偵破案件，這個是很是重要的一個線索。還有一些糾紛或事故，也能夠經過錄像很容易找出相關人員的責任。 人防成本高：如今不少地方想到安全就想到要僱傭保安，每一個保安每月 800，天天 3 班倒，一班人員一年就須要將近 4 萬元，相比於電子安防設備成本並不便宜，並且使用電子安防設備幾年內就不太須要更換。因此人防成本相對也很高。人防輔助：多數狀況下，徹底靠人來保證安全是一件很困難的事情，不少事情須要電子保安器材（如監視器、報警器）輔助才更完美。特殊場合必須使用：在一些惡劣條件下（高熱、寒冷、封閉等），人很難用肉眼觀察清楚，或者環境根本不適合人的停留，必須使用電子安防設備。隱蔽性：使用電子安防設備，通常人不會感受時時被監控，具備隱蔽性。24 小時安全保證：要達到 24 小時不間斷的安全須要，電子設備是必須考慮的。遠程監控：隨着計算機技術與網絡技術的發展，遠程監控觀看異地圖象已經成爲可能，如今已經有不少公司的負責人已經能夠 INTERNET 及時觀看世界各地的任何分公司狀況，有利於及時瞭解狀況。圖象保存：數字錄像技術的發展，使得影象能夠經過計算機數字存儲設備得以保存，能夠保存時間更長，圖象更清晰。生產管理：管理人員能夠及時、直觀的瞭解生產第一線的狀況，便於指揮與管理。

鑑於監控系統在國內的需求量較大，對於大範圍的監控，如：地鐵站，更是須要監控系統來防止意外的發生，咱們今天來給你們介紹一下如何建立一個地鐵站監控系統的前端部分。

http://www.hightopo.com/demo/metro/demo2.html 進入頁面右鍵「審查元素」可查看例子源代碼。

本例的動態效果以下：

 咱們先來搭建基礎場景，在 HT 中，很是經常使用的一種方法來將外部場景導入到內部就是靠解析 JSON 文件，用 JSON 文件來搭建場景的好處之一就是能夠循環利用，咱們今天的場景就是利用 JSON 畫出來的。接下來 HT 將利用  ht.Default.xhrLoad 函數載入 JSON 場景，並用 HT 封裝的 DataModel.deserialize(json) 來反序列化，並將反序列化的對象加入 DataModel：

ht.Default.xhrLoad('demo2.json', function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title;//將 JSON 文件中的 titile 賦給全局變量 titile 
    dataModel.deserialize(json);//反序列化
    graphView.fitContent(true);//縮放平移拓撲以展現全部圖元，即讓全部的元素都顯示出來
});

在 HT 中，Data 類型對象構造時內部會自動被賦予一個 id 屬性，可經過 data.getId() 和 data.setId(id) 獲取和設置，Data 對象添加到 DataModel 以後不容許修改 id 值，可經過 dataModel.getDataById(id) 快速查找 Data 對象。通常建議 id 屬性由 HT 自動分配，用戶業務意義的惟一標示可存在 tag 屬性上，經過 Data#setTag(tag) 函數容許任意動態改變 tag 值，經過DataModel#getDataByTag(tag) 可查找到對應的 Data 對象，並支持經過 DataModel#removeDataByTag(tag) 刪除 Data 對象。咱們這邊經過在 JSON 中設置 Data 對象的 tag 屬性，在代碼中經過 dataModel.getDataByTag(tag) 函數來獲取該 Data 對象：

var fan1 = dataModel.getDataByTag('fan1');
var fan2 = dataModel.getDataByTag('fan2');
var camera1 = dataModel.getDataByTag('camera1');
var camera2 = dataModel.getDataByTag('camera2');
var camera3 = dataModel.getDataByTag('camera3');
var redAlarm = dataModel.getDataByTag('redAlarm');
var yellowAlarm = dataModel.getDataByTag('yellowAlarm');

我在下圖中作了各標籤對應的元素：

接着咱們對須要旋轉、閃爍的對象進行設置，HT 中對「旋轉」封裝了 setRotation(rotation) 函數，經過得到對象當前的旋轉角度，在這個角度的基礎上再增長某個弧度，經過 setInterval 定時調用，這樣就能在必定的時間間隔內旋轉相同的弧度：

setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time - lastTime;
    var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
    lastTime = time;

    fan1.setRotation(fan1.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for (var i = 0; i < 8; i++) {//由於有一些類似的元素咱們設置的 tag 名相似，只是在後面換成了一、二、3，因此咱們經過 for 循環來獲取
        var color = stairIndex === i ? '#F6A623' : '#CFCFCF';
        dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
        dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s('shape.background', null);
        redAlarm.s('shape.background', null);
    }
    else {
        yellowAlarm.s('shape.background', 'yellow');
        redAlarm.s('shape.background', 'red');
    }
}, 5);

HT 還封裝了 setStyle 函數用來設置樣式，可簡寫爲 s，具體樣式請參考 HT for Web 樣式手冊：

for (var i = 0; i < 8; i++) {//由於有一些類似的元素咱們設置的 tag 名相似，只是在後面換成了一、二、3，因此咱們經過 for 循環來獲取
    var color = stairIndex === i ? '#F6A623' : '#CFCFCF';
    dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
    dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
}

咱們還對「警告燈」的閃爍進行了定時控制，若是是偶數秒的時候，就將燈的背景顏色設置爲「無色」，不然，若是是 yellowAlarm 則設置爲「黃色」，若是是 redAlarm 則設置爲「紅色」：

if (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s('shape.background', null);
    redAlarm.s('shape.background', null);
}
else {
    yellowAlarm.s('shape.background', 'yellow');
    redAlarm.s('shape.background', 'red');
}

整個例子就這麼輕鬆地解決了，簡直過輕鬆了。。。

有興趣繼續瞭解的小夥伴能夠進入 HT for Web 官網查看各個手冊進行學習。