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