无锡组态软件的开发（C#）

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

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

一、图片的呈现

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

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

二、元件的结构

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

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

三、图片的编辑

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

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

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