WPF实现组态软件-逼真的管道和速度可变流体
做过组态软件开发的人都知道,市面上无论是免费的还是厂商提供的组态开发套件的UI设计都很一般。究其原因大多是工业用户对UI设计没什么要求,他们也没工夫去欣赏UI设计的精美。但时代在变化,人们也早已经开始对UI有更高的要求,在功能差不多的情况下,人们当然会对更好看的软件映像深刻。
本文先说一说在化工组态软件中用得非常多的管道控件。大多数组态软件的管道的接头处都是不带弧度的,看上去有点小学生在美术课上画的感觉。既然是这样,那么我就趁这次的项目,将常用的工业组态软件常用的部件进行重新设计。下面就说说我对管道的新设计要求。
1,最重要的是可动态添加、修改管道的;
2,支持用配置文件或代码生成管道;
3,管道需要有渐变反光的效果;
4,支持多个管道的拼接,接头处平滑过度;
5,支持和阀门对接;
6,可以模拟流体的运动,并且流体速度可变;
下面的动图演示的是在管道设计器中的效果:
在设计器中绘制管道很简单,只要在关键点处点击鼠标左键,设计器自动将这个点作为管道的拼接点,然后管道的终点跟随鼠标延伸。原理是用WPF的PathGeometry绘制管道的外形,生成的顺序如下图所示:
途中数字1处是起点,数字2处是拐点,数字3也是拐点,一直到数字10处完成闭合的PathGeometry,形象地讲,这根管道是一体成形的。有一点值得强调的是管道的拼接处(上图中2、3、4处)的弧度根据夹角连续变化的,夹角越小弧度的直径也越小,夹角越大弧度直径也越大。
管道的外形设计好了,但是就这样是不能让人满意,当然需要给他渲染点东西上去,比如着色、渐变反光,下面就看看在设计器中的渲染效果:
上图中的小点点是管道计算是生成的辅助点,方便调试和观察的。现在的管道看上去挺有那么回事的,原理就是渐变色,可以根据需要调整颜色。如果说第一幅动图中的管道是一体成型的话,那么这个就是分段渲染了,原因是WPF中渐变色是不支持这么多变的角度。其实不管管道是什么角度,有多少节拼接也就用到两种渐变色一个线性渐变另一个就是径向渐变,那么我们就分开渲染好了。方法就是在相同的位置放上矩形或扇形的控件,然后单独渲染,也就是所说的分段成型。
上图中的流体效果其实很简单了,就是Path动画了。
上图演示流体的速度变化效果,先是一般的速度,然后是正常速度,最后两倍速度。
第一幅动图中的设计器源码下载地址:平滑过渡管道设计器
最后一幅动图中设计器源码下载地址:逼真管道设计器
如果只是学习和参考请下载第一个链接,要用于公司项目且确实有需要的请下载第二个链接。