javaweb组态_WEB组态（电⼒、能源、⼯业）技术分享-功能
框架与技术
在开篇我简单介绍介绍了下为什么要实现WEB组态。那本篇将介绍WEB组态的基本功能，及实现它运⽤了哪些技术。在这个技术快餐时代，肯定是站在巨⼈的肩旁上，才能更快的实现⽬标；所以⼩编也⽤了互联⽹WEB前端的⼀些主流框架。能⼀⽬了然的概括功能和技术不。安排，
⼩编实现的WEB组态是分前端和后端的。前端是⽤来给⽤户组态画图和配置操作，后端会对⽤户组态的数据进⾏保存、读取、处理⼀些逻辑。当然也可以把前端和后端集成到⼀起，⽤Electron来实现桌⾯单应⽤程序。后端服务⽬前只做了⽂件的读取与保存⼯作，也可以加⼊组件的发布与定制等其他功能。之所你采⽤node.js与egg.js是因为简单、快捷，节省你的开发时间，⾮常适合个⼈开发的⼩项⽬。当然⼩编讲述的重⼼是WEB组态的前端部分。
⼀、WEB组态基本功能
组件库：提供组态画图的图元。分为两个部分，⼀是基础元素：包含直线、矩形、圆、⽂字、图⽚、多边形等基础的图元，是任何组件的基础；⼆是⾃定义的组件：⼩编从事电⼒能源⾏业，所以定义了电⼒⾥⾯的组件，如⼑闸、断路器、变压器、PCS等电⽓组件。针对不同的⾏业，可以组不同的组件。这些组件都是由这些基础元素构成的。组件和组件之间是有关联关系的，怎么关联的呢，这就需要⼀个特殊的图元，引脚。组件上的引脚，可以认为它是⼀个锚点，从锚点出发和另⼀个组件的锚点上建⽴⼀条连接线，来代表他们之间是有连接关系的。
场景：提供绘画的容器，可以理解是⼀块画布；在画布上创作想要的作品。我的作品肯定是电⼒接线图。场景还提供了事件的处理，⽐如图元的选择和移动等；都是在⿏标响应事件⾥处理的。
属性框：⽤来展⽰和修改图元的属性，包括图元的位置、尺⼨、颜⾊等配置信息。
动画配置：这个功能在drawio、墨⼑画图⼯具上是没有的，是电⼒、⼯业组态⾥⾯⼀个特有功能，为什么这么说，电⼒接线图中的组件是要与实际的设备相关联的，要实时显⽰出这个设备的状态，譬如在图形上画了⼀个断路器组件，且与实际的断路器设备做关联，当实际断路器设备断开时，图形界⾯与之相对的断路器组件也应该是开的状态，反之就是闭合的状态。这种状态的变化是动画配置的⼀种。还有监测遥测值变化的，⽂字(数值)变化的动画；显⽰/隐藏的动画，也可以根据值做位置移动、背景填充的动画。可以多个动画作⽤到⼀个组件或者图元上。
事件配置：事件的配置就相对容易理解多了，很多画图⼯具都有事件配置，也都基本相似。在电⼒接线图中常见的事件应⽤，譬如点击⼀个⽂本，进⾏画⾯的跳转。通过配置⿏标点击、双击、右键、按下、抬起等事件，来实现你想要的动作功能，这些功能⼀般都是应⽤程序内置的。如果内置功能的不满⾜需求，也可以配置⼀段脚本，⽤脚本来实现你的业务逻辑。
辅助功能：⼀个好⽤的WEB组态⼯具，⼀定提供了好多好⽤的辅助功能，来帮助你完成图形组态；常见的，图元选择框、图元的组与解组、左右对齐、间距、剪切、复制、粘贴、撤销、回滚等功能。
预览：当图形画⾯组态完成，配置好对应的事件与动画；这个时候就可以启动预览功能。来观察组态的画⾯与功能是否正确。相当于编辑态到运⾏态的切换；和编辑好HTML的页⾯，放到在http-server的服务下，在浏览器⾥看运⾏效果是⼀样的。不知道预览啥样，上图
这⾥图形的动画并不是关联了真实设备，⽽是⼩编写的⼀段仿真代码来驱动组件状态和⽂本值的变化。
svg canvas⼆、技术选型。 WEB组态前端技术⽀撑的框架主要有react、antd、events、SVG.js。其中react和antd是应⽤程序页⾯的搭建与布局；也可以⽤VUE和element框架了替换。真正组态的核⼼是SVG.js框架，负责提供场景、图元和⿏标动作处理。events是⽤来分发和接收⾃定义的事件处理。
为什么⽤SVG技术，⽽不是canvas
SVG的优势：
SVG是⽮量图形，缩放不失真
通⽤标准，各电⼒⼚家都⽀持SVG格式的图形。
SVG格式的⽂件可以直接在浏览器⾥显⽰，天然⽀持。canvas则要额外做序列化⼯作；读取⽂件解析后，再画到canvas画布上。
虽然SVG性能上要⽐canvas略差，但⾜以满⾜电⼒接线图的展⽰了。 如果不是很在乎以上SVG优势，也可以⽤canvas来实现；推荐⽤pixi.js库。
SVG的框架库有也有很多，为啥选SVG.js，下⾯就来做下⽐较，
我个⼈认为SVG.js的代码可读性要更好⼀点，就是对应的资料性对少些。官⽹也提供了使⽤⽂档，如果想对它有更深⼊的了解，那就读SVG.js的源码吧。
关于SVG.js的动画，在我之前的博客写过，感兴趣的可以去看下。不知不觉夜已深，今天就先到这⾥。如果哪⾥写的不对，还请各位看官指正。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。