基於 H5 Canvas 及 3D 組態實現樓宇新風系統

 

 

前言

現現在，新型冠狀病毒疫情牽動着每個人的神經，天天起牀後的第一件事就是打開疫情地圖，看看最新的疫情數據。

（http://www.hightopo.com/demo/coronavirus/）

如何防控對於普通居民來講，減小外出，注意衛生等都是有效措施，另外保持室內通風換氣也是相當重要的，不管是飛沫傳播仍是流傳的氣溶膠傳播，環境密閉致使空氣渾濁，易形成病菌滋生，增長人體感染疾病的風險。勤通風可有效地排除微生物等有害物質含量，保障咱們呼吸環境的健康。

智能新風系統，不受寒冷的天氣或是戶型限制，現已被不少智能樓宇、智能家居普遍利用，今天就帶你們一塊兒打造一個超級實用新風監控系統。

（https://hightopo.com/demo/smart-building-wind-system/）

代碼實現

首先，咱們仍是要對總體界面作一下基礎設置，這樣養成好習慣，避免落下不容易發現的小問題：

gv.getSelectWidth = function() { return 0 } // 隱藏選中邊框
gv.setMovableFunc(function() { return false }) // 禁止圖元移動
gv.handleScroll = function() {} // 禁止鼠標縮放
gv.handlePinch = function() {} // 禁止 touch 下雙指縮放
gv.setPannable(false) // 禁止平移
gv.setRectSelectable(false) // 禁止框選
gv.setScrollBarVisible(false) // 隱藏滾動條
window.document.oncontextmenu = function() { return false } // 全局設置右鍵菜單禁用

而後打開圖紙，咱們須要將裏面的模塊封裝，使總體結構更加整齊且有利於咱們後續的驅動和複用性。這裏就不作過多介紹了。下面咱們一塊兒來從頭看看每一部分的實現過程。

風格切換功能爲了匹配不一樣人所中意的顏色風格，這裏咱們作了一個稍稍偏亮綠的護眼色，來面對長期使用顯示屏的人羣。圖標的旋轉應用了動畫函數：

ht.Default.startAnim({
    duration: 500,
    easing: function(t) { return t },
    action: function(v, t) {
        data.a('rotation', (oldValue + (newValue + oldValue) * v) * Math.PI / 180)
    }
})

（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html#ref_animation）

duration 是動畫週期毫秒數，HT 將在指定時間週期內完成動畫，easing 參數用於經過數學公式控制動畫，如勻速變化、先慢後快等效果。action 函數的第一個參數 v 表明經過 easing(t) 函數運算後的值，t 表明當前動畫進行的進度 [0~1]，通常屬性變化根據 v 參數進行。咱們經過對圖元定義的 'rotation' 屬性值來驅動它的旋轉一週效果，用起始值與目標值進行計算並轉化弧度制。顏色的切換以及懸浮穿的顯隱都是把所涉及到的元素的相關屬性作處理。

這其中每一處可交互的地方都加上鼠標 hover 效果，加強交互體驗感：

view.setCursor('pointer')
view.setCursor('default')

時間和日期用了格式轉化插件，加個定時器去修改所對應的文本屬性來使其動態變化：

background.timer = setInterval(function() {
    background.a('time', DateUtil.format(new Date(), 'HH:mm:ss'))
    background.a('date', DateUtil.format(new Date(), 'yyyy.MM.dd'))
    if (!background.dm()) {
        clearInterval(background.timer)
    }
}, 1000)

接下來是左側的一塊智能數據監控面板，鼠標懸浮時會在關聯的設備上面顯示一個懸浮氣泡來對應，而且數據會跳動：

數據咱們就很少說了，demo 中採用了一些隨機數去動態來展現應用性，那麼這些氣泡是怎麼實現的呢：

咱們要先構思好實現的方式，這裏咱們先看一下氣泡的動效，咱們將氣泡單獨封裝爲一個圖標，而後調整好光環的位置和大小，綁定橫縮放、縱縮放、透明度，基本就完成了，咱們控制它的橫縱縮放來達到擴大的效果，而後再調整透明來實現消散的效果，且循環播放：

function bubbleAnim() {
    ht.Default.startAnim({
        duration: 1000,
        easing: function(t) { return t },
        action: function(v, t) {
            bubble.a('opacity', 1 - v) // 透明度
            bubble.a('scaleX', v) // 橫縮放
            bubble.a('scaleY', v) // 縱縮放
        },
        finishFunc: function() {
            bubbleAnim()
        }
    })
}
bubbleAnim()

關於它的位置變化咱們是這樣設計的，由於界面上只會同時出現一個，因此咱們圖紙上只須要一個氣泡圖標就能夠了，經過所關聯的不一樣的設備圖標的位置，來動態改變氣泡的位置，而後經過顯示隱藏來讓它在某位置出現或隱藏：

view.dm().each(function(datas) {
    if (datas.getDisplayName() === '送風機設備' && datas.getParent().s('2d.visible')) {
        bubble.p(datas.p().x, datas.p().y - 50)
        bubble.s('2d.visible', true)
    }
})

由於下面還有一個系統切換菜單，因此多加了一步判斷來保護一下。那就直接來講一下這個功能：

風機的轉動是旋轉角度屬性，風向流動是根據裁切方向改變了裁切比例，都是基於動畫來實現，參考咱們以前提到過的方法，這裏不作過多贅述。在這個菜單中，其實也應用到了動畫，好比其總體的一個上下滑動，可是有個前提，咱們要注意給圖標設置好裁切 clip 屬性，這樣下面的部分就至關於隱藏了，滑動上來才能出現。由於在選定系統後，名稱也會變化，因此咱們不能直接用這個菜單，而是平時將菜單隱藏，只顯示名稱，點擊後再它倆的狀態再反過來，而後再執行咱們的操做就不會衝突了：

// 文字隱藏
data.a('textV', false)
// 菜單顯示
data.a('menuV', true)
// 框上移
ht.Default.startAnim({
    duration: 200,
    easing: function(t) { return t },
    action: function(v, t) {
        data.a('frameP', [0.13932, 71.90718 + (0.00079 - 71.90718) * v, 591.86062, 44.88772])
    }
})
// 菜單上移
ht.Default.startAnim({
    duration: 200,
    easing: function(t) { return t },
    action: function(v, t) {
        data.a('menuP', [228.19231, 80.78752 + (8.88113 - 80.78752) * v, 135, 99])
    }
})

當咱們選擇一個選項後不要忘記切換狀態和更新名稱而且將氣泡隱藏掉，這種小 bug 必定要注意。至於切換系統咱們只需在前期準備過程當中把同一系統的圖元放在一個組裏，而後咱們在選擇時控制各組的顯示和隱藏就行了，對於 2D 圖標來講咱們來對它的 '2d.visible' 屬性選擇性的賦予 true / false 布爾值就好了。

總結

整個新風系統基本搭建完成了，咱們能夠把它普遍應用於各類不一樣樓宇的智能數字可視化監控。將來將會有更多的智慧 + 數據可視化等着咱們，邁入新的信息化時代要掌握強而有力的技術！

 

HT for Web ：(http://www.hightopo.com/demos/cn-index.html)