澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

的电力接线图,实现地铁站监控

2019-08-24 作者:澳门新萄京赌场网址   |   浏览(95)

基于 HTML5 Canvas 完成大巴站监察和控制

2017/11/21 · HTML5 · Canvas

初稿出处: hightopo   

伴随国内经济的连忙发展,大家对平安的渴求越来越高。为了防止万一下列情况的发生,您须求思量安装安全防止系统: 提供证据与线索:相当多厂子银行发出扒窃或然事故相关机关能够依赖录制音信侦查破案案件,这么些是这些重大的二个端倪。还只怕有一对纠葛或事故,也足以由此录制很轻巧搜索相关职员的责任。 人民防空开支高:未来无数地方想到安全就想开要雇佣保卫安全,种种保卫安全各种月 800,每一天 3 班倒,一班职员一年就须求将近 4 万元,相比较于电子安全防卫装置花费并不便利,何况动用电子安全防止设施几年内就不太急需改动。所以人民防空开支相对也相当高。人民防空扶助:好多情状下,完全靠人来保管安全部是一件很困难的作业,非常多事务须求电子保卫安全器械(如监视器、报告警察方器)帮助才更周密。特殊地方必须利用:在一些劣质条件下(高热、寒冬、密闭等),人很难用肉眼观看清楚,或然条件根本不适合人的栖息,必需选用电子安全防备设施。掩盖性:使用电子安全防范设施,平常人不会感到到随时被监督,具有遮掩性。24 时辰安全确定保障:要完毕 24 刻钟不间断的安全须要,电子装置是必得思量的。远程监察和控制:随着Computer技巧与互连网工夫的进步,远程监察和控制看到异地图象已经化为也许,未来曾经有那多少个厂家的领导已经得以 INTE奥迪Q7NET 及时看到世界内地的任何分局意况,有助于及时明白意况。图象保存:数字摄影才干的升华,使得印象能够经过计算机数字存款和储蓄设备得以保存,能够保存时间越来越长,图象更清晰。生产管理:管理职员能够立时、直观的垂询生产第一线的状态,便于指挥与治本。

出于监察和控制系统在国内的要求量十分大,对于大面积的督察,如地铁站,更是必要监察和控制系统来严防意外的发生,明日大家给大家介绍一下什么成立贰个大巴站监察和控制体系的前端部分。

http://www.hightopo.com/demo/… 走入页面右键“调查成分”可查看例子源代码。

本例的动态效果如下:图片 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');

本身在下图中做了各标签对应的因素:图片 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 收藏 评论

图片 3

今天我们给我们介绍一下怎么开创一个监理系列的前端部分。

陪伴国内经济的全速发展,大家对平安的必要进一步高。为了防卫下列情况的爆发,您要求思考设置安全防卫系统: 提供证据与线索:比相当多厂子银行发出扒窃恐怕事故相关活动能够依照摄像消息侦查破案案件,那么些是可怜关键的叁个端倪。还会有点疙瘩或事故,也足以通过雕塑很轻易搜索有关人口的权利。 人民防空开销高:未来众多地方想到安全就想开要雇佣保卫安全,各种保卫安全每一种月 800,每一天3 班倒,一班职员一年就需求临近 4 万元,相比较于电子安全防护设施成本并不实惠,而且动用电子安全防护装置几年内就不太急需转移。所以人民防空开支相对也相当高。人民防空协理:大多情景下,完全靠人来保险安全部是一件很不方便的政工,很多工作需重要电报子保卫安全器具(如监视器、报告警察方器)协理才更周密。特殊场地必需选用:在有的劣质条件下(高热、冰冷、密闭等),人很难用肉眼观望清楚,也许情况根本不适合人的驻留,必需使用电子安全防护设施。遮蔽性:使用电子安全防止装置,平常人不会感到随地随时被监察和控制,具有掩盖性。24 小时安全确认保障:要达到规定的规范 24 时辰不间断的鹰潭必要,电子器具是必需思量的。远程监察和控制:随着Computer技巧与互联网能力的迈入,远程监察和控制看到异地图象已经成为大概,未来早就有成都百货上千商厦的老董已经得以 INTE途锐NET 及时看到世界外市的别的总局景况,有助于及时领悟情形。图象保存:数字水墨画手艺的上进,使得影像能够透过Computer数字存款和储蓄设备得以保留,能够保留时间越来越长,图象更清晰。生产处理:管理人士能够及时、直观的明白生产第一线的景色,便于指挥与处理。

陡然有个主见,借使能把部分施用分化的知识点放到同三个界面上,何况放置一个盒子里,那样自身一旦要看如何事物就可以很直白呈现出来,而且以此盒子一定要能展开。笔者用HT贯彻了本人的主张,代码一百多行,这么少的代码能兑现这种功效本人认为依旧牛的。

在电力、油田燃气、供水管网等工业自动化领域 Web SCADA 的概念已经提议了多年,早些年的 Web SCADA 前端工夫超越1/4或然基于 Flex、Silverlight 以致 Applet 那样的重顾客端方案,在 HTML5 流行前 VML 和 SVG 算是真正纯种 Web 方案也有无数使用,近几来乘机 HTML5 的流行,加上移动终端以及浏览器对 HTML5 接济的推广,越多新品类上马使用真正纯 HTML5 的方案,更现实的应有说是大数据量应用质量高于 SVG 的 Canvas 方案,已经稳步形成后天 Web SCADA 前端本事的主要推荐标配方案。

本例的动态效果如下:图片 4

出于监察和控制系统在境内的必要量很大,对于大规模的督察,如:客车站,更是必要监察和控制系统来幸免意外的产生,大家明天来给大家介绍一下哪些创设二个客车站监察和控制体系的前端部分。

demo地址: 

事例代码下载:

图片 5

 步入页面右键“审核成分”可查看例子源代码。

先来看看效果图:

身体力行图片(图中“发光”的有的是会闪烁的):

大家先来树立基础场景,在 HT 中,非平常用的一种艺术来将表面风貌导入到内部便是靠分析 JSON 文件,用 JSON 文件来树立场景的平价之一正是能够循环使用,大家今日的风貌正是使用 JSON 画出来的。接下来 HT 将应用 ht.Default.xhrLoad 函数载入 JSON 场景,并用 HT 封装的 DataModel.deserialize(json) 来反体系化,并将反体系化的对象参与 DataModel:

本例的动态效果如下:

图片 6  

图片 7

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

图片 8

以这件事例最基础的正是最外层的盒子了,所以大家先来拜候怎样完结它:

图片 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”指的便是矢量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.CSGBox,二个盒子模型,能够参考HT for Web 建立模型手册,大家在手册中得以见到,在CSGBox中大家不得不操作那一个盒子的逐个面,尽管你想要自身设置有个别奇怪的意义,只须要操作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 指标:

图片 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中的CSGBox中的一面上,所认为了让水泵显示出来 必须设置水泵所在的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 样式手册:

 那边还要特意说Bellamy个函数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;

}

图片 11

自己在下图中做了各标签对应的要素:

风乐趣继续刺探的友人能够进来 HT for Web 官网翻看各样手册举行学习。

末段,只要求将那多个回传的canvas传入ht.Default.setImage中就能够:

从图片上能够看出来,那个图标由一条直线、五个矩形以及叁个箭头组成,大家把那些Logo取名为arrow:

图片 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);">

地点代码中有一段大概让大家狐疑的点本人从没在代码中表明,接下去我们任重先生而道远来说一下这一个部分的从头到尾的经过:数据绑定。从作品一同首的图样大家领略,这么些图标中的矩形部分是会变颜色的。

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 也都以以这种措施来开展数据绑定的,绑定的数额只与那一个数组对象部分有关,所以就算这些Logo是一张图片,大家还是能够独立主宰局地退换颜色等等。想打听所有的 func 的施用能够参照那些例子,全体的花色都用上了,特别实用。

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

自己在代码中便是由此垄断那多少个绑定的属性来改动那几个数组对象的颜色的,灯要闪亮,分明会有“发光”的认为才更实际,那么这里还要求说多美滋(Dumex)个剧情,shadow 这么些本性,解释为影子,什么是影子?比较好的一种解释正是,在四个矩形框中,由矩形大旨点触发,由内至外颜色渐渐变浅,有少数像虚化,下边那张图纸就是影子的显示:

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

图片 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--;

图片 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){

另外一些自己深信我们都能看得懂,实在不就去官网(或者以此链接也行,里面还恐怕有普及难点)查核对应的文书档案,写得很驾驭啊~

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

}

整套例子仿佛此轻便地拍卖了,差相当的少太轻易了。。。

图片 15风乐趣继续掌握的伙伴能够进入HT for Web 官方网址检查各类手册实行学习。

那篇作品共享在此之前自个儿也许要推荐下本身要好的JAVA裙:,不管您是小白如故大咖,小编小编都挺招待,不定时分享干货,包涵自己要好收拾的一份2017最新JAVA资料和零基础入门教程!,招待初学和进级中的小友人扫一扫下方 一齐来调换学习

图片 16

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:的电力接线图,实现地铁站监控

关键词: