结合html5+_基于 HTML5 结合互联网+的电力接线图

前言

“互联网+”思维让数据的搜集和获取更加便捷，并且随着大数据的深度开发和应用，数据分析预测对于提升用户体验有非常重要的价值，同时也为不同行业、不同领域的合作提供了更广阔的空间。传统的发电企业是一个资金、技术密集但又相对独立封闭的行业，例如沙角A电厂，拥有优质的码头、安信检修、车队、技术人才等资源，未来是否能借助互联网走出去，或者其他一些先进的管理、技术能否通过互联网走进来互融都是可以探索的。工业互联网的典型应用，也不都是在机器上，包括照明、智能交通、智能机器应用、工厂控制、厂房应用、状态监控，以及其他农业、电力设备上的应用，互联网+的应用会越来越广，传统的电力企业还是需要跟紧步伐。

代码生成

矢量创建

整个场景实际上是由一个 json 格式的文件生成的，鉴于整个场景中重复的部分太多了，因此将这些部分单独拿出来作为一个图标进行重复利用，这边说的“图标”指的就是矢量图标，与工业中常用的 SVG 图有点类似，在缩放的情况下图形都不会失真。矢量在 HT for Web(https://hightopo.com/) 中是矢量图形的简称，常见的 png 和 jpg 这类的栅格位图， 通过存储每个像素的颜色信息来描述图形，这种方式的图片在拉伸放大或缩小时会出现图形模糊，线条变粗出现锯齿等问题。 而矢量图片通过点、线和多边形来描述图形，因此在无限放大和缩小图片的情况下依然能保持一致的精确度。

在 HT 中所有能用栅格位图的地方都可用矢量图形替代，例如 GraphView 组件上的图元图片，TreeView 和 TableView 上的图标等， 甚至整个 HT 框架做出来的系统界面可以实现全矢量化，这样 GraphView 组件上的图元缩放都不会失真，并且不再需要为 Retina 显示屏提供不同尺寸的图片， 在 devicePixelRatio 多样化的移动时代， 要实现完美的跨平台，矢量可能是的最低成本的解决方案。

在 HT 中，矢量采用 JSON 格式描述，使用方式和普通的栅格位图一致，通过设置节点的样式属性即可，如：node.setStyle('image', 'test.json')。

矢量 json 描述必需包含 width、height 和 comps 参数信息：

• width 矢量图形的宽度
• height 矢量图形的高度
• comps 矢量图形的组件 Array 数组，每个数组对象为一个独立的组件类型(http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html#ref_type)，数组的顺序为组件绘制先后顺序

同时可设置以下可选参数信息：

• visible 是否可见，默认为 true
• opacity 透明度，默认为 1，可取值范围 0~1
• color 染色颜色，设置上该颜色后矢量内部绘制内容将会融合该染色值
• clip 用于裁剪绘制区域，可设置两种类型：boolean
• boolean 类型，控制绘制时超出 width 和 height 区域的内容是否被裁剪，默认为 false 不裁剪
• function 类型，可利用 canvas 画笔绘制，实现自定义裁剪任意形状的效果

那么我们来看看这个图标是怎么用 HT 绘制的：

从图片上可以看出来，这个图标由一条直线、一个矩形以及一个箭头组成，我们把这个图标取名为 arrow：

ht.Default.setImage('arrow', {//注册图片 arrow "width": 60,//矢量图形的宽度 "height": 30,//矢量图形的高度 "comps": [//矢量图形的组件 Array 数组，每个数组对象为一个独立的组件类型，数组的顺序为组件绘制先后顺序 {//绘制直线部分 "type": "shape