基於 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)