您的位置:新葡亰496net > 新葡亰官网 > 的电力接线图,完毕市集监察和控制

的电力接线图,完毕市集监察和控制

发布时间:2019-08-17 15:30编辑:新葡亰官网浏览(122)

    依赖 HTML5 Canvas 实现大巴站监察和控制

    2017/11/21 · HTML5 · Canvas

    原来的小说出处: hightopo   

    陪同国内经济的赶快发展,大家独白山的供给进一步高。为了防止下列意况的发生,您须要思考安装安全防止系统: 提供证据与线索:非常多厂子银行发出扒窃也许事故相关机关能够依据摄像消息侦查破案案件,那些是丰盛关键的三个端倪。还应该有局地疙瘩或事故,也足以通过拍录很轻巧找寻有关人口的权利。 人防花费高:未来数不清地点想到安全就想开要雇佣保卫安全,每一个保卫安全每个月 800,天天 3 班倒,一班人士一年就要求将近 4 万元,相比较于电子安全防护设施开支并不方便人民群众,并且动用电子安全防护装置几年内就不太急需转移。所以人民防空费用相对也相当高。人民防空协理:多数情景下,完全靠人来保障安全部都是一件很费力的事务,比比较多职业供给电子保卫安全器械(如监视器、报警器)扶助才更完善。特殊场面必须运用:在有的伪造低劣条件下(高热、寒冷、密封等),人很难用肉眼旁观清楚,可能情状根本不适合人的驻留,必须利用电子安全防守设施。隐敝性:使用电子安全卫戍装置,平凡的人不会认为随时被监察和控制,具有掩盖性。24 小时安全确认保障:要达到规定的标准 24 小时不间断的广安须求,电子器械是必须思虑的。远程监察和控制:随着计算机技术与互联网本领的升高,远程监察和控制看到异地图象已经成为只怕,以后早已有众多小卖部的集团主已经得以 INTELacrosseNET 及时看到世界内地的别的根据地景况,有助于及时精通意况。图象保存:数字雕塑本事的腾飞,使得影像能够透过Computer数字存储设备得以保存,能够保留时间更加长,图象更显明。生产管理:管理人士能够及时、直观的询问生产第一线的情况,便于指挥与处理。

    出于监察和控制体系在境内的供给量非常的大,对于大面积的监察,如地铁站,更是须要监控连串来防守意外的发出,明日我们给我们介绍一下怎么着创立叁个大巴站监察和控制种类的前端部分。

    http://www.hightopo.com/demo/… 踏向页面右键“审核成分”可查阅例子源代码。

    本例的动态效果如下:新葡亰496net 1

    咱俩先来搭建基础场景,在 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);//缩放平移拓扑以体现全部图元,即让具备的因素都显示出来 });

    1
    2
    3
    4
    5
    6
    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');

    1
    2
    3
    4
    5
    6
    7
    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');

    自个儿在下图中做了各标签对应的成分:新葡亰496net 2

    随后咱们对急需旋转、闪烁的目的举行安装,HT 中对“旋转”封装了 setRotation(rotation) 函数,通过取得对象当前的旋转角度,在那些角度的基础上再充实有些弧度,通过 setInterval 定期调用,那样就能够在肯定的年月间隔内转悠同样的弧度:

    JavaScript

    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);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    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 样式手册:

    JavaScript

    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); }

    1
    2
    3
    4
    5
    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'); }

    1
    2
    3
    4
    5
    6
    7
    8
    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 官网的电力接线图,完毕市集监察和控制。翻开各种手册进行学习。

    2 赞 3 收藏 评论

    新葡亰496net 3

    明天我们给大家介绍一下怎么开创二个监察类别的前端部分。

    陪伴国内经济的飞跃发展,大家对锡林郭勒盟的渴求更加高。为了幸免下列意况的发生,您供给思念设置安全防护系统: 提供证据与线索:非常多工厂银行发出盗窃大概事故相关活动能够凭借录制音讯侦查破案案件,那么些是比较重大的多个线索。还大概有局地争端或事故,也能够通过油画很轻便寻找有关人口的职责。 人民防空开支高:以往不知凡几地点想到安全就想到要雇佣保卫安全,每个保卫安全各种月 800,每天3 班倒,一班职员一年就要求附近 4 万元,比较于电子安全防护设施费用并不低价,何况动用电子安全卫戍装置几年内就不太要求改动。所以人民防空花费相对也异常高。人防支持:相当多情况下,完全靠人来保管安全部是一件很费力的业务,比相当多事务需重要电报子保卫安全器械(如监视器、报告警察方器)帮衬才更完善。特殊场地必须运用:在部分恶性条件下(高热、严寒、密闭等),人很难用肉眼观望清楚,或然景况根本不适合人的栖息,必须利用电子安防设施。遮掩性:使用电子安全防卫设施,一般人不会感到到随时被监督,具备遮蔽性。24 小时安全确定保障:要达成 24 时辰不间断的安全须求,电子装置是必须思索的。远程监控:随着Computer技能与网络技巧的升高,远程监控看到异地图象已经化为只怕,以后一度有那些商家的管理者已经得以 INTE昂科威NET 及时看到世界外地的任何分部情况,有利于及时掌握意况。图象保存:数字摄影技能的升华,使得印象能够经过计算机数字存储设备得以保存,能够保存时间更加长,图象更清晰。生产管理:管理职员能够立时、直观的打听生产第一线的处境,便于指挥与治本。

    溘然有个主张,要是能把一些应用分化的知识点放到同二个分界面上,何况放置四个盒子里,那样本身尽管要看哪样东西就足以很直白展现出来,并且这些盒子必须要能展开。作者用HT落到实处了自己的主见,代码一百多行,这么少的代码能完成这种效果自个儿感觉照旧牛的。

    在电力、油田燃气、供水管网等工业自动化领域 Web SCADA 的定义已经建议了多年,早些年的 Web SCADA 前端才能大部分要么基于 Flex、Silverlight 以致 Applet 那样的重客户端方案,在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案也许有为数十分多用到,近几来随着 HTML5 的风行,加上移动终端以及浏览器对 HTML5 帮忙的分布,更加多新类型始于选取真正纯 HTML5 的方案,更实际的应该正是大数据量应用品质高于 SVG 的 Canvas 方案,已经稳步变为当今 Web SCADA 前端工夫的首荐标配方案。

    本例的动态效果如下:新葡亰496net 4

    是因为监察和控制种类在境内的必要量比较大,对于大规模的监督,如:客车站,更是要求监察和控制种类来防护意外的产生,我们明日来给我们介绍一下什么创建贰个大巴站监察和控制类其余前端部分。

    demo地址: 

    事例代码下载:

    新葡亰496net 5

     进入页面右键“核实元素”可查看例子源代码。

    先来看看效果图:

    演示图片(图中“发光”的一对是会闪烁的):

    我们先来确立基础场景,在 HT 中,非平时用的一种艺术来将表面风貌导入到内部正是靠解析 JSON 文件,用 JSON 文件来确立场景的受益之一正是能够循环使用,大家今天的情景正是运用 JSON 画出来的。接下来 HT 将动用 ht.Default.xhrLoad 函数载入 JSON 场景,并用 HT 封装的 DataModel.deserialize(json) 来反体系化,并将反系列化的目的参预 DataModel:

    本例的动态效果如下:

    新葡亰496net 6  

    新葡亰496net 7

    ht.Default.xhrLoad('demo2.json',function(text){

    新葡亰496net 8

    以那事例最基础的正是最外层的盒子了,所以大家先来看看哪些贯彻它:

    新葡亰496net 9

    varjson = ht.Default.parse(text);

     我们先来搭建基础场景,在 HT 中,非平时用的一种艺术来将表面风貌导入到内部正是靠解析 JSON 文件,用 JSON 文件来搭建场景的利润之一正是能够循环使用,大家明日的风貌正是利用 JSON 画出来的。接下来 HT 将运用  ht.Default.xhrLoad 函数载入 JSON 场景,并用 HT 封装的 DataModel.deserialize(json) 来反体系化,并将反类别化的指标参预DataModel:

    var box = new ht.CSGBox();
    
    dataModel.add(box);
    

    以那事例小编仍旧是用 HT for Web 实行付出的,在那之中重复的一部分本人都打包为四个“Logo”了,那边说的“Logo”指的就是矢量图标。矢量在 HT for Web 中是矢量图形的简称,常见的 png 和 jpg 那类的栅格位图, 通过存储每一种像素的颜料消息来陈述图形,这种措施的图片在拉伸放大或减少时会出现图形模糊,线条变粗出现锯齿等主题素材。 而矢量图片通过点、线和多方形来陈说图形,因而在最为放大和压缩图片的情形下依旧能保持一致的正确度。

    if(json.title)document.title = json.title;//将 JSON 文件中的 titile 赋给全局变量 titile

    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能够很随意地落到实处那一个盒子,在HT中封装了重重基础图元类型,大家平常采纳的ht.Node也是内部一个,那样我们可以不用频频地写一样的代码来成功基础的兑现。

    在 HT for Web 中具备能用栅格位图的地方都可用矢量图形替代,比如 GraphView 组件上的图元图片,TreeView 和 TableView 上的Logo等, 以致整个 HT 框架做出来的连串分界面能够达成全矢量化,那样 GraphView 组件上的图元缩放都不会失真,并且不再须要为 Retina 显示器提供分裂尺寸的图形, 在 devicePixelRatio 两种化的运动时代, 要贯彻宏观的跨平台,矢量可能是的最低资本的化解方案。

    dataModel.deserialize(json);//反类别化

    在 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 对象:

     

    在 HT 中,矢量选用 JSON 格式描述,使用方法和通常的栅格位图一致,通过 ht.Default.setImage('hightopo', jsonObject) 进行注册, 使用是将相应图片注册名设置到数据模型就可以,如 node.setImage('hightopo') 和 node.setIcon('hightopo') 等。

    graphView.fitContent(true);//缩放平移拓扑以显示全体图元,即让具有的成分都来得出来

    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.CSG博克斯,贰个盒子模型,能够参照HT for Web 建立模型手册,我们在手册中能够看出,在CSG博克斯中大家只好操作那一个盒子的各样面,倘让你想要本人安装有个别非常的机能,只须求操作ht.Style(HT for Web 风格手册)即可。

    矢量 json 描述必需富含 width、height 和 comps 参数音讯:

    });

    小编在下图中做了各标签对应的因素:

    自身想你们都小心到了盒子上有模型化的水泵,上面有扇叶在转悠,那么那一个水泵是怎么生成的吗?作者用我们的2d编辑器写了多少个抽水机模型通过graphView.serialization(datamodel)将模型系列化成json格式的文本,然后在那边援用的时候本人再调用graphView.deserialize(json)来将json文件导出成可视化的2d模子并安装animation动画,再马上刷新到这么些水泵,不然就是设置了动画,水泵上的扇叶旋转也不会卓有效用。

    • width 矢量图形的幅度
    • height 矢量图形的惊人
    • comps 矢量图形的组件 Array 数组,每种数组对象为二个独立的组件类型,数组的顺序为组件绘制先后顺序

    在 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 指标:

    新葡亰496net 10

    ht.Default.xhrLoad('displays/demo/pump.json', function(text){
    
        const json = ht.Default.parse(text);
    
        pumpDM.deserialize(json);
    
        var currentRotation = 0;
    
        var lastTime = new Date().getTime();
    
    
    
        setInterval(function(){
    
            var time = new Date().getTime();
    
            var deltaTime = time - lastTime;
    
            currentRotation  = deltaTime * Math.PI / 180 * 0.3;
    
            lastTime = time;
    
    
    
            pumpDM.getDataByTag('fan1').setRotation(currentRotation);
    
            pumpDM.getDataByTag('fan2').setRotation(currentRotation);
    
            box.iv();
    
            // g3d.iv();这边也可以刷新g3d,但是局部刷新更省
    
            pumpGV.validateImpl();
    
        }, 10);
    
    }, 10);
    

    并且可安装以下可选参数消息:

    varfan1 = dataModel.getDataByTag('fan1');

    继而大家对急需旋转、闪烁的指标开展设置,HT 中对“旋转”封装了 setRotation(rotation) 函数,通过获得对象当前的旋转角度,在这些角度的根基上再充实有些弧度,通过 setInterval 定期调用,那样就会在任其自然的光阴距离内转悠同样的弧度:

     这一年本身无法把水泵的graphView和g3d都加到底层div上,而且本人的计划是把水泵的graphView加到g3d中的CSG博克斯中的一面上,所感到了让水泵显示出来 必须安装水泵所在的graphView的宽高,而以此宽高必须比小编json画出来的图占的面积要大,不然显示不完整。假诺想看那一个宽高对展现的熏陶,能够本身改改看来玩玩。

    visible 是不是可知,默感觉 true

    varfan2 = dataModel.getDataByTag('fan2');

    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);
    
    pumpGV.getWidth = function() { return 600;}
    
    pumpGV.getHeight = function(){ return 600;}
    
    pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示
    

    opacity 发光度,默认为 1,可取值范围 0~1``

    varcamera1 = dataModel.getDataByTag('camera1');

    HT 还包裹了 setStyle 函数用来设置样式,可简写为 s,具体样式请参照他事他说加以考察 HT for Web 样式手册:

     这边还要特意说澳优(Ausnutria Hyproca)个函数getDataByTag(tagName)这么些函数是获得标志号,在HT中tag属性是独步天下标志,即便HT中也许有id,不过id是HT中Data类型对象组织时内部自行被给予的一个id属性,可以经过data.getId()和data.setId(id)获取和安装,Data对象增多到DataModel之后不允许修改id值,能够因而dataModel.getDataById(id)火速搜索Data对象。

    ``color 染色颜色,设置上该颜色后矢量内部绘制内容将会融入该染色值

    varcamera2 = dataModel.getDataByTag('camera2');

    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);
    }
    

    相似大家提议id属性由HT自动分配,用户业务意义的独一标示可存在于tag属性上,通过data.setTag(tag)函数允许专断动态改动tag值,通过dataModel.getDataByTag(tag)可查找到呼应的Data对象,并帮忙通过dataModel.removeDataByTag(tag)删除Data对象。

    clip 用于裁剪绘制区域,可设置二种档案的次序:boolean

    varcamera3 = dataModel.getDataByTag('camera3');

    我们还对“警告灯”的闪耀举办了按期间调整制,如若是偶数秒的时候,就将灯的背景颜色设置为“无色”,不然,若是是 yellowAlarm 则设置为“冰雪蓝”,若是是 redAlarm 则设置为“灰黄”:

    您也许会齰舌在代码中大家并从未涉嫌“fan1”那个tag标记,那么些标志是在水泵的json中安装的,关于扇叶的八个标志,我们获取到扇叶,然后设置其旋转。

    • boolean 类型,调节绘制时超越 width 和 height 区域的内容是不是被裁剪,默感觉 false 不裁剪
    • function 类型,可选拔 canvas 画笔绘制,达成自定义裁剪放肆形状的效果

    varredAlarm = dataModel.getDataByTag('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');
    }
    

    echarts图表的显得也是很基础的,可是咱们会发觉,在将echarts图表增多进graphView中它的卡通片效果会不出示,所以我们首先要将以此echarts图表所在的图样的dynamic设置为true,将要其安装为动态:

    那就是说我们来探视这些Logo是怎么用 HT 绘制的:

    varyellowAlarm = dataModel.getDataByTag('yellowAlarm');

    一切例子就像此轻巧地化解了,差不离太轻便了。。。

    function charts(option){
    
        var info = {
    
            canvas: document.createElement('canvas')
    
        };
    
        info.canvas.dynamic = true;//设置info.canvas为动态
    
        info.chart = echarts.init(info.canvas);
    
        info.chart.setOption(option);
    
        return info.canvas;
    
    }
    

    新葡亰496net 11

    本身在下图中做了各标签对应的因素:

    风乐趣继续探听的同伙能够步向 HT for Web 官网翻开各样手册进行学习。

    谈到底,只须求将这八个回传的canvas传入ht.Default.setImage中就可以:

    从图纸上得以看出来,那几个Logo由一条直线、三个矩形以及四个箭头组成,大家把那些图标取名叫arrow:

    新葡亰496net 12

     

    ht.Default.setImage('echart', charts(option));
    
    ht.Default.setImage('pump', pumpGV.getCanvas());
    
    ht.Default.setImage('arrow', {//注册图片 arrow
        "width": 60,//矢量图形的宽度
        "height": 30,//矢量图形的高度
        "comps": [//矢量图形的组件 Array 数组,每个数组对象为一个独立的组件类型,数组的顺序为组件绘制先后顺序
            {//绘制直线部分
                "type": "shape",//多边形
                "borderWidth": 1,//边框宽度
                "borderColor": "rgb(255,0,0)",//边框颜色
                "points": [//点信息 points 以 [x1, y1, x2, y2, x3, y3, ...] 的方式存储点坐标
                    1.4262,
                    14.93626,
                    51.46768,
                    14.93626
                ]
            },
            {//绘制箭头尖的部分
                "type": "shape",
                "borderWidth": 1,
                "borderColor": "rgb(255,0,0)",
                "rotation": 4.71239,//旋转
                "points": [
                    45.50336,
                    9.63425,
                    52.88591,
                    13.92955,
                    60.26846,
                    9.63425,
                    52.88591,
                    20.23827,
                    45.50336,
                    9.63425
                ]
            },
            {//绘制矩形部分
                "type": "rect",//矩形
                "background": {//背景颜色
                    "func": "attr@lightBg",
                    "value": "rgb(255,0,0)"
                },
                "borderColor": "#979797",
                "shadow": {//阴影
                    "func": "attr@shadow",
                    "value": false
                },
                "shadowColor": {//阴影颜色
                    "func": "attr@shadowColor",
                    "value": "rgba(255,0,0,0.7)"
                },
                "shadowBlur": 32,//阴影模糊
                "shadowOffsetX": 0,//阴影横偏移
                "shadowOffsetY": 0,//阴影纵偏移
                "rect": [//指定矩形的区域 [x, y, width, height] 起始位置的坐标和矩形的大小值 
                    11.44694,
                    10.43626,
                    30,
                    9
                ]
            }
        ]
    });
    

    进而大家对必要旋转、闪耀的目的实行设置,HT 中对“旋转”封装了 setRotation(rotation) 函数,经过获得目的当前的旋转视点,在这一个视点的基本功上再增加有个别弧度,经过 setInterval 守时调用,那样就能够在料定的时刻距离内转悠相同的弧度:

     ht.Default.drawImage函数生成新的图实际上就是在canvas上画图,所以大家假诺把我们早已画好的canvas传到ht.Default.setImage就足以生成图片了。

    每七个数组对象中的基本项目与 style 的 shape 参数是完全一一对应, 只是将 style 中的名称改成骆驼式命名法去掉了.分隔符,查找对应的 style 属性请参考 HT for Web 风格手册,有个别前期增多的质量也许在作风手册中还从未增多,大家只要明白那样叁性情质就行了,一般看属性名就清楚这些本性的意义了。

    <blockquote background-color:#ffffff;"="" style="font-family: "sans serif", tahoma, verdana, helvetica; white-space: normal; color: rgb(62, 62, 62);">

    地点代码中有一段大概让大家质疑的点本身从不在代码中解释,接下去大家珍重来说一下以此片段的剧情:多少绑定。从文章一开始的图样大家知道,这几个Logo中的矩形部分是会变颜色的。

    setInterval(function(){

    多少绑定意味将 Data 图元的数据模型音信,与界面图形的颜色、大小和角度等可视化参数进行活动同步, HT 的预约义图形组件私下认可就已与 DataModel 中的 Data 数据绑定,譬如用户修改 Node 的 position 地方值, 则 GraphView 和 Graph3dView 上的相应图元地方会活动同步变化。

    vartime = newDate().getTime();

    历史观的多寡绑定有单向绑定和双向绑定的定义,但 HT 系统的设计形式使得绑定越发简化易于通晓,HT 唯有二个 DataModel 数据模型, 绑定 DataModel 的图片组件并未组件内部的其余数据模型,所以组件都以实实在在根据 DataModel 来显示分界面效果,因而当用户拖拽图元移动时, 本质也是修改了数据模型中 Node 的 position 地方值,而该属性别变化化触发的平地风波经过模型再次派发到图片组件,引发图形组件依据新的模型新闻刷新分界面。

    vardeltaTime = time - lastTime;

    绑定的格式一点也不细略,只需将在此以前的参数值用一个带 func 属性的对象替换就能够,func 的剧情有以下二种档案的次序:

    vardeltaRotation = deltaTime * Math.PI / 180 * 0.1;

    • function 类型,直接调用该函数,并传播相关 Data 和 view 对象,由函数再次来到值决定参数值,即 func(data, view) 调用。
    • string 类型:
      • func@*** 开头,则返回 data.getStyle(***) 值,其中 *** 代表 style 的属性名
      • attr@*** 开头,则返回 data.getAttr(***) 值,其中 *** 代表 attr 的属性名
      • field@*** 开头,则返回 data.*** 值,其中 *** 代表 data 的属性名
      • 假如不合作以上气象,则一贯将 string 类型作为 data 对象的函数名调用 data.***(view),重返值作为参数值

    lastTime = time;

    除开 func 属性外,还可设置 value 属性作为暗中认可值,若是对应的 func 获得的值为 undefined 或 null 时,则会动用 value 属性定义的暗中同意值。 比如以下代码,假若对应的 Data 对象的 attr 属性 lightBg 为 undefined 或 null 时,则会使用 rgb(255, 0, 0) 颜色:

    fan1.setRotation(fan1.getRotation() deltaRotation*3);

    "background": {//背景颜色
        "func": "attr@lightBg",// 返回的是 getAttr('lightBg')的值
        "value": "rgb(255,0,0)"//设置默认值
    }
    

    fan2.setRotation(fan2.getRotation() deltaRotation*3);

    同理,上边代码中的 shadow 和 shadowColor 也都以以这种措施来开始展览数据绑定的,绑定的数据只与这一个数组对象部分有关,所以就是那个图标是一张图纸,我们还是能够独立主宰局部改造颜色等等。想精通全数的 func 的应用能够参见那些事例,全部的花色都用上了,极度实用。

    camera1.setRotation(camera1.getRotation() deltaRotation/3);

    作者在代码中就是通过垄断(monopoly)那多少个绑定的天性来改变那些数组对象的颜料的,灯要闪亮,确定会有“发光”的认为到才更实际,那么这里还亟需说Bellamy(Bellamy)个剧情,shadow 这个性情,解释为影子,什么是影子?相比较好的一种解释就是,在多个矩形框中,由矩形大旨点触发,由内至外颜色慢慢变浅,有几许像虚化,下边那张图纸便是影子的展现:

    camera2.setRotation(camera2.getRotation() deltaRotation/3);

    新葡亰496net 13

    camera3.setRotation(camera3.getRotation() deltaRotation/3);

    紧接着是搭建现象,大家能够直接动用 lightBling/displays/电力 下的 大厦.json 文件,在那么些文件中,笔者设置了一部分的“箭头”Logo的 tag 标签。在 HT 中,一般建议 id 属性由 HT 自动分配,用户业务意义的无可比拟标示可存在 tag 属性上,通过 Data#setTag(tag) 函数允许私下动态改造 tag 值, 通过 DataModel#getDataByTag(tag) 可查找到相应的 Data 对象,并帮衬通过 DataModel#removeDataByTag(tag) 删除 Data 对象。

    if(time - stairTime > 500){

    可是笔者是一向在 json 中增添 “tag” 属性,具体的 json 拓扑结构表明如下:

    stairIndex--;

    新葡亰496net 14

    if(stairIndex < 0){

    咱俩用到的 大厦.json,我拿一局地出来解析一下:

    stairIndex = 8;

    {
        "c": "ht.Node",//类名,用来反序列化
        "i": 274997,//id 值
        "p": {//get/set 类型属性 这里面的所有属性都可通过 get/set获取和设置
            "displayName": "灯-红",//显示名称
            "tag": "alarm",//标签 可通过 getTag 和 setTag 来获取和设置
            "image": "symbols/隧道用图标/交通灯/灯/灯-红.json",//图片 引用的路径为相对路径 这边调用的“红灯”图标的 json 文件
            "position": {//坐标
              "x": 70.9971,
              "y": 47.78651
            }
        },
        "s": {//对应 setStyle 属性
            "2d.movable": false,//2d 下不可以动 若要开启,直接设置 setStyle('2d.movable', true) 即可,下面同理
            "2d.editable": false//2d 下不可编辑
        }
    }
    

    }

    实质上整个无需动画的一对都是 json 文件中的内容,大家能够依靠地方的 json 拓扑结构来剖析图纸的 json。那么难点来了,怎么样在 GraphView 中载入图纸的 json 文件?HT 封装了 ht.Defautl.xhrLoad 函数用来将相应的图片 json 载入到 GraphView 上,参数为 text 文本,需求经过 ht.Default.parse 转义成 json:

    stairTime = time;

    ht.Default.xhrLoad('displays/电力/大厦.json', function(text){
        var json = ht.Default.parse(text);
        window.gv.dm().deserialize(json);//反序列化,并将反序列化的对象加入 DataModel
    });
    

    }

    那时,DataModel 中的内容正是其一 json 文件反种类化出来的保有图元了,所以大家能够透过 DataModel 跋扈获取和更换json 中的图元的体裁和属性。当中,setAttr/getAttr 中的属性大家必须先定义一下,不然 HT 又不驾驭那个节点是不是有那一个用户自定义的性质:

    for(vari = 0;i < 8;i ){//由于有局地近乎的因素我们设置的 tag 名类似,仅仅在后头换到了1、2、3,所以大家透过 for 循环来获取

    for(var i = 0; i < gv.dm().size(); i  ){
        var data = gv.dm().getDatas().get(i);//获取 datamodel 中的对应 i 的节点
        if(data.getTag()){//如果这个节点有设置 tag 值
            data.a('shadow', false);//设置自定义属性,并且给一个值
            data.a('shadowColor', 'rgba(255,0,0,0.9)');
            data.a('lightBg', 'rgb(255, 0, 0)');
            data.a('alarmColor', 'red');
        }
    }
    

    varcolor = stairIndex === i?'#F6A623' : '#CFCFCF';

    那下大家就能够自由操作上边已经宣示过的属性了,当然,HT 暗中同意的质量大家也能随随意便操作!小编在 json 文件中安装了多少个 tag 标签,light1~light15 以及 alarm 标签,我们得以经过 data.getTag() 来得到这些节点对应的标签名,只怕经过 dataModel.getDataByTag(tagName) 已知标签字来赢得对应节点。

    dataModel.getDataByTag('stair_1_' i).s('shape.border.color',color);

    卡通的一些 HT 有两种动画的方法,针对的点不一致,这里本身动用的是 schedule 首要用来在钦定的命宫距离实行函数回调解和管理理。HT 中调治举办的流程是,先经过 DataModel 增多调解职分,DataModel 会在调节义务钦命的小时间隔达到时, 遍历 DataModel 全体图元回调调治职务的 action 函数,可在该函数中对传播的 Data 图元做相应的本性修改以高达动画效果。

    dataModel.getDataByTag('stair_2_' i).s('shape.border.color',color);

    以下是自个儿例子中的动画相关代码:

    }

    var blingTask = {
        interval: 1000,//间隔毫秒数
        action: function(data){//间隔动作函数
            if(data.getTag() === 'light1' || data.getTag() === 'light13' || data.getTag() === 'light5' || data.getTag() === 'light6' || data.getTag() === 'light10' || data.getTag() === 'light11' || data.getTag() === 'light12' || data.getTag() === 'light14' || data.getTag() === 'light15'){
                if(data.a('lightBg') === 'rgb(255, 0, 0)'){//如果属性lightBg值为这个,就做以下一系列的动作 
                    data.a('lightBg', 'rgb(0, 255, 0)');
                    data.a('shadow', true);
                    data.a('shadowColor', 'rgba(0, 255, 0, 0.9)');
                }else if(data.a('lightBg') === 'rgb(0, 255, 0)'){
                    data.a('lightBg', 'rgb(255, 255, 0)');
                    data.a('shadow', true);
                    data.a('shadowColor', 'rgba(255, 255, 0, 0.9)');
                }else{
                    data.a('lightBg', 'rgb(255, 0, 0)');
                    data.a('shadow', true);
                    data.a('shadowColor', 'rgba(255, 0, 0, 0.9)');
                }
            }else if(data.getTag() === 'alarm'){
                if(data.a('alarmColor') === 'red'){
                    data.a('alarmColor', 'rgb(0, 255, 0)');
                }else{
                    data.a('alarmColor', 'red');
                }
            }
        }
    };
    window.gv.dm().addScheduleTask(blingTask);//添加动画进 DataModel 中
    

    if(newDate().getSeconds() % 2 === 1){

    任何一些自身深信我们都能看得懂,实在不就去官网(或者其一链接新葡亰496net,也行,里面还大概有大规模难点)查核对应的文书档案,写得很明白啊~

    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(vari = 0;i < 8;i ){//由于有部分像样的要素大家设置的 tag 名类似,仅仅在后头换来了1、2、3,所以咱们经过 for 循环来获得

    varcolor = 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(newDate().getSeconds() % 2 === 1){

    yellowAlarm.s('shape.background',null);

    redAlarm.s('shape.background',null);

    }

    else{

    yellowAlarm.s('shape.background','yellow');

    redAlarm.s('shape.background','red');

    }

    全套例子就这么轻易地拍卖了,大约太容易了。。。

    新葡亰496net 15有意思味继续刺探的小友人能够步向HT for Web 官方网站检查各类手册举办学习。

    那篇文章共享此前作者照旧要推荐下小编要好的JAVA裙:,不管您是小白依旧大腕,我作者都挺应接,不定时分享干货,包涵自笔者要好收拾的一份2017最新JAVA资料和零基础入门教程!,招待初学和晋级中的小友人扫一扫下方 一齐来交换学习

    新葡亰496net 16

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:的电力接线图,完毕市集监察和控制

    关键词: