组态软件的开发（C#）

在工控领域，我们用到的组态软件有组态王、Cimplicity等，一方面这些软件是收费的，另一方面无论这些软件做得多好，都没办法把自己的品牌打出去，没办法满足各种自定义的需求。于是，我花了两个星期时间，开发了一款简易版的。这是流程图界面：

其实组态软件并没有我们想像的那么难。我们需要的功能无非就是有一张可以灵活编辑的图，这个图里面的元素会根据系统的状态去变化。

我是使用WPF去开发的，首先整个画面是一个Canvas，然后里面放一些Image元素。我们知道，在组态里面，每一个元件有几种状态。例如一个阀，有半闭的状态和打开的状态，一条水管，有静止和向左向右流动的状态。我们设计的方法是，根据系统的数据，判断应该呈现哪一张图，然后把那张图添加在Canvas里面。当系统数据改变时，Canvas去掉旧图，添加新图。

静态的图可以用png、jpg这些格式，动态的图只能使用gif了。WPF默认是不能显示动态图的，我使用了一个第三方库去完成这项任务。有兴趣的朋友可以搜索一下WpfAnimatedGif，这是目前发现显示gif性能最好的一个第三方库。

其实在组态图中，有两种元件，一是图片，二是文字。而且，图片有三种拉伸方法，一是随意拉伸，二是只能横向拉伸（例如水平的管路），三是只能竖向位伸。我们把元件类结构定义如下：

其中，Component类完成了所有移动、放缩、旋转的功能，而下面继承的类只是指明了一些额外的属性。

图片的编辑是最为复杂的一项功能。编辑界面如下图所示：

我实现了一些基本的功能，例如选中元件之后，进行拉伸拖拉、放大缩小、旋转等，还有上下移动一层、对齐等功能。在这里面，旋转之后的放缩是最为复杂的。

在WPF里面，元素的旋转都是使用RotateTransform完成的。旋转之后，元素在我们眼中，其Left和Top属性都变了，但其实在代码里，Left和Top并没有变化。这就产生了两个坐标系。我们看到的元件坐标系跟元件在代码里的坐标系是不一样的。而我们用鼠标去拖动元件的时候，鼠标的坐标其实是我们眼中的坐标系，对元件产生作用前，需要先转成元件真实的坐标系。当元件动了以后，它在自己坐标系里的位置需转换成我们眼中的坐标系。这里面需要用到一些微分的概念。具体怎么算的，在这里不赘述，文字很难表达。这是坐标转换的函数：

对于组态图，除了呈现图形外，我们还希望：

（1）图形根据系统状态变化而变化。

（2）点击图形时，组态图能向主程序发送一些内容。

关于这两点，我们定义了两个概念，一是显示条件，二是点击事件。

在一个元件里面，包含了多个图片，而每张图片，都有自己的显示条件和点击事件。显示条件和点击事件都是一些表达式，如上图所示，当“1号采样阀状态”为1的时候，绿色的图案就会显示，而当用户点击了这个绿色图案时，主程序就会向“1号采样阀”发送一个0的信号。

组态图控件是通过三个列表跟主程序交互的，分别是显示条件列表、显示条件值列表、点击事件列表。

显示条件列表就是List，例如是{“1号采样阀状态”,"2号采样泵状态","清洗阀状态"}。控件在显示条件输入框里提示用。

显示条件值列表是Dictionary，例如是{“1号采样阀状态”=1,"2号采样泵状态"=0,"清洗阀状态"=0}。主程序每隔一段时间向组态控件发送这个列表，组态控件解析每个组件的显示条件，判断显示哪一张图。

点击事件列表也是List，在点击事件框里提示用。点击图片之后，控件调用一个声明好的回调函数，向主程序发送消息。