基于HTML5Canvas实现地铁站监控-

陪伴国内经济的高速开展，人们对平安的请求越来越高。为了防止以下状况的产生，您需要考虑安装安防系统：供给证据与线索：许多工厂银行产生偷窃或者变乱相干机关可以依据录像信息侦破案件，这个是非常重要的一个线索。本文我们就和大家分享基于HTML5Canvas实现地铁站监控的实现。 陪伴国内经济的高速开展，人们对平安的请求越来越高。为了防止以下状况的产生，您需要考虑安装安防系统： 供给证据与线索：许多工厂银行产生偷窃或者变乱相干机关可以依据录像信息侦破案件，这个是非常重要的一个线索。本文我们就和大家分享基于HTML5 Canvas地铁站监控的实现。

本例的动态结果如下：

我们先来搭建根基场景，在 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 名类似，只是在后面换成了1、2、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 名类似，只是在后面换成了1、2、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 官网查看各个手册进行学习。

陪伴国内经济的高速开展，人们对平安的请求越来越高。为了防止以下状况的产生，您需要考虑安装安防系统： 供给证据与线索：许多工厂银行产生偷窃或者变乱相干机关可以依据录像信息侦破案件，这个是非常重要的一个线索。还有一些纠葛或变乱，也可以通过录像很容易寻出相干人员的责任。 人防老本高：此刻许多地方想到平安就想到要雇佣保安，每个保安每个月 800，天天 3 班倒，一班人员一年就需要将近 4 万元，比拟于电子安防设施老本并未便宜，并且运用电子安防设施几年内就不太需要改换。所以人防老本相对也很高。人防辅助：多数状况下，完全靠人来保障平安是一件很艰难的事情，许多事情需要电子保安器材（如监视器、报警器）辅助才更完善。特别场所必需运用：在一些恶劣前提下（高热、冰冷、封锁等），人很难用肉眼调查分明，或者环境基本不适合人的停顿，必需运用电子安防设施。隐藏性：运用电子安防设施，个别人不会感觉不时被监控，拥有隐藏性。24 小时平安保障：要达到 24 小时不间断的平安需要，电子设施是必需考虑的。长途监控：随着盘算机技术与网络技术的开展，长途监控不雅看异地图象已经成为可能，此刻已经有许多企业的负责人已经可以 INTERNET 及时不雅看天下各地的任何分企业状况，有益于及时理解状况。图象保留：数字录像技术的开展，使得影象可以通过盘算机数字存储设施得以保留，可以保留工夫更长，图象更清晰。生产治理：治理人员可以及时、直不雅的理解生产首先线的状况，便于指示与治理。

鉴于监控系统在国内的需求量较大，关于大范畴的监控，如地铁站，更是需要监控系统来防止不测的产生，今天我们给大家介绍一下怎样新建一个地铁站监控系统的前端局部。

http://www.hightopo.com/demo/... 进入页面右键“审查元素”可查看例子源代码。

本例的动态结果如下：

我们先来搭建根基场景，在 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 名类似，只是在后面换成了1、2、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 名类似，只是在后面换成了1、2、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');
}

以上内容就是基于HTML5 Canvas 实现地铁站监控的办法，但愿能帮忙到大家。