开源纯C#工控网关+组态软件(六)图元组件
一、???圖元概述
圖元是構(gòu)成人機(jī)界面的基本單元。如一個(gè)個(gè)的電機(jī)、設(shè)備、數(shù)據(jù)顯示、儀表盤，都是圖元。構(gòu)建人機(jī)界面的過程就是鋪排、挪移、定位圖元的過程。
圖元設(shè)計(jì)是繪圖和編碼的結(jié)合。因?yàn)閳D元不僅有顯示和動(dòng)畫，還有背后操縱動(dòng)畫的控制邏輯。
一個(gè)好的圖元設(shè)計(jì)框架，應(yīng)該最大限度提高設(shè)計(jì)的效率和專業(yè)程度。
因?yàn)槟阏业揭粋€(gè)會(huì)做美工的碼農(nóng)，和會(huì)寫代碼的美工，都很困難，但是單獨(dú)找碼農(nóng)和繪圖員卻一抓一大把。所以專業(yè)性意味著用人的靈活性，和省錢。而你招來一個(gè)美工，一個(gè)碼農(nóng)，合作完成一個(gè)圖元組件，必須考慮減少兩人的交互，最好埋頭各干各的。并行作業(yè)，才有最高效率。
可以通過以下手段提高界面開發(fā)效率：
-
前后端分離。
前后端分離的設(shè)計(jì)模式有很多優(yōu)點(diǎn)。前后端對設(shè)計(jì)者的要求是不同的。。
前端設(shè)計(jì)者需要考慮的是界面更直觀、美觀、清晰、大氣，可以熟練使用繪圖工具（例如Blend），可以不會(huì)編程。
后端設(shè)計(jì)者要考慮的是業(yè)務(wù)邏輯，如何有條不紊、準(zhǔn)確執(zhí)行。可以不會(huì)畫圖，但一般必然熟練編碼，使用設(shè)計(jì)工具（如Visual Studio）。
前后端分離便于設(shè)計(jì)者術(shù)業(yè)有專攻，前后端分工協(xié)作，互不干擾，并行工作，提高效率。
-
專業(yè)的前端設(shè)計(jì)工具。
對于繪圖員或美工，一個(gè)簡單易用、同時(shí)又有強(qiáng)大功能的趁手設(shè)計(jì)器是必須的。
繪圖板、動(dòng)畫、整合、調(diào)色板，美工的全套裝備必須齊全；網(wǎng)格定位、縮放、旋轉(zhuǎn)、保存、撤銷，常規(guī)的設(shè)計(jì)器功能必須應(yīng)有盡有。
-
盡可能少的編碼。
很多行業(yè)都有龐大的圖元庫。各種設(shè)備、開關(guān)、構(gòu)件，各種非標(biāo)組件，不斷會(huì)有新的圖元入庫。
因此，力求用最少的代碼實(shí)現(xiàn)盡可能多的功能，最大限度提升開發(fā)效率。一個(gè)強(qiáng)大的基類和一個(gè)方便的繼承是必要的。
二、???前后端分離的設(shè)計(jì)模式式
-
通過WPF實(shí)現(xiàn)前后端分離
看看百度百科對WPF的介紹：WPF（Windows Presentation Foundation）是微軟推出的基于Windows 的用戶界面框架，屬于.NET Framework 3.0的一部分。
它提供了統(tǒng)一的編程模型、語言和框架，真正做到了分離界面設(shè)計(jì)人員與開發(fā)人員的工作；同時(shí)它提供了全新的多媒體交互用戶圖形界面。
WPF通過一種MVVM（Model-View-ViewMode）的設(shè)計(jì)模式實(shí)現(xiàn)界面與編碼解耦。界面元素的顏色、動(dòng)畫、形狀，可以方便的與代碼類的屬性綁定（Binding）。
綁定的便利在于，后臺(tái)類的某屬性變化，馬上會(huì)自動(dòng)反映到界面的變化，無需編寫代碼；界面元素的變化，也馬上會(huì)觸發(fā)屬性值的改變，這種方式天然適合人機(jī)界面的前后端分離設(shè)計(jì)。
同時(shí)，WPF提供XAML文件，是一種聲明式編程方式，類似于Android的界面文件、HTML，界面設(shè)計(jì)者與代碼編寫者只需要通過XAML文件交互，進(jìn)一步達(dá)成前后端分離并行作業(yè)的目的。
-
?前后端交互的內(nèi)容
繪圖員的工作：
使用Blend繪圖，使用故事板（Storyboard）制作動(dòng)畫，定義動(dòng)畫的視圖狀態(tài)（VisualState），綁定屬性如：
Text="{Binding BinName, RelativeSource={RelativeSource TemplatedParent}}"碼農(nóng)的工作：
定義一個(gè)CustomControl。繼承HMIControlBase。
定義依賴項(xiàng)屬性如Running：
public static readonly DependencyProperty RunningProperty = DependencyProperty.Register("Running", typeof(bool), typeof(Elevator), ? ? ? ? ? ?new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender, ? ? ? ? ? ?new PropertyChangedCallback(OnValueChanged)));屬性變化事件切換視圖狀態(tài)如
VisualStateManager.GoToState(this, _funcRun () ? "Run" : "Stop", true);就這么簡單。
三、???繪圖與動(dòng)畫
-
強(qiáng)大的設(shè)計(jì)工具：Blend
Blend是VS2010起微軟提供的專業(yè)設(shè)計(jì)工具。早期曾經(jīng)有三賤客（Blend,Design, Encoder?），后兩者已經(jīng)合并入Blend。
在 Expression Blend 中，可以在美工板上繪制形狀、路徑和控件，然后修改其外觀和行為，從而直觀地設(shè)計(jì)界面元素。可以導(dǎo)入圖像、視頻和聲音，還可以導(dǎo)入和更改三維對象。
可以創(chuàng)建Storyboard實(shí)現(xiàn)幀動(dòng)畫，定義狀態(tài)（VisualState），并設(shè)計(jì)觸發(fā)器（Trigger）觸發(fā)動(dòng)畫。還可以定義樣式（Style）。
Blend對美工人員是簡單易上手的。按我的經(jīng)驗(yàn)，對于習(xí)慣AutoCAD工具的繪圖工程師，熟練掌握Blend一般在兩周內(nèi)，就可以繪制復(fù)雜的動(dòng)畫圖形。
所有的圖元組件均為CustomControl類型，這樣編輯好的圖元文件會(huì)自動(dòng)加入到Generic.xaml文件。相應(yīng)的圖元模板可在Blend內(nèi)重新編輯。
?
-
用代碼實(shí)現(xiàn)動(dòng)畫
如果不用Blend，也可以用代碼直接實(shí)現(xiàn)動(dòng)畫。部分對性能要求高、使用頻繁的圖元組件如Guage，LinkLine，可以繼承Control的OnRender方法并使用StreamGeometry這類的底層API繪圖，以達(dá)到最佳的性能。
StreamGeometry的優(yōu)點(diǎn)是調(diào)用底層繪圖API，不生成多余的對象，而Blend在生成圖形過程中有大量冗余元素和對象，復(fù)雜的層次結(jié)構(gòu)，在對性能要求較高的場合略顯笨重。
四、???強(qiáng)大的圖元基類
為了盡可能減少編碼，需要在圖元基類（HMIControlBase） 中實(shí)現(xiàn)盡可能多的功能；但又不能包辦一切，犧牲圖元自身的“個(gè)性”。要實(shí)現(xiàn)簡潔、強(qiáng)大、可擴(kuò)展。
因此，我在圖元基類實(shí)現(xiàn)了所有界面元素共有的幾個(gè)基本功能：
-
連線。
為了實(shí)現(xiàn)方便的連線，需要能自行設(shè)置圖元的錨點(diǎn)，作為拖放連線的連接點(diǎn)。
?
繼承GetLinkPositions方法，錨點(diǎn)分上下左右四個(gè)，每個(gè)錨點(diǎn)用一個(gè)Point確定相對位置。如果只有一個(gè)錨點(diǎn)，就返回單一的LinkPosition如下：
public override LinkPosition[] GetLinkPositions(){ ? ? ? ? ??return new LinkPosition[1]{ new LinkPosition(new Point(0.75,0),ConnectOrientation.Top),};}
-
綁定變量表達(dá)式。
只要繼承基類，就可以彈出變量組態(tài)界面。
?
可以自行定義左邊的屬性樹。即繼承GetActions方法。注意這個(gè)樹狀結(jié)構(gòu)支持嵌套，如某設(shè)備帶兩個(gè)電機(jī)（Motor），則電機(jī)的屬性列表會(huì)作為樹的子節(jié)點(diǎn)顯示。
public override string[] GetActions(){ ? ? ? ? ??return new string[] { TagActions.VISIBLE, TagActions.CAPTION,
?TagActions.RUN, TagActions.ALARM, TagActions.DEVICENAME };}
-
動(dòng)畫顯示。
繼承SetTagReader方法，只要相關(guān)Tag變化，就會(huì)觸發(fā)動(dòng)畫腳本。如
? ? ? ? ?var _funcInRun = tagChanged as Func<bool>; ? ? ? ?
? ? ? ? ? ? ? ? ? ? ?if (_funcInRun != null){ ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ?return delegate {
? ? ? ? ? ? ? ? ? ? ? ? ?VisualStateManager.GoToState(this, _funcInRun() ? "Running" : "NotRunning", true); };} ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ??else return null;} ? ? ? ? ? ?return base.SetTagReader(key, tagChanged);}
VisualStateManager.GoToState方法根據(jù)不同的狀態(tài)字，觸發(fā)了在Blend里定義的故事板動(dòng)畫。
五、???如何實(shí)現(xiàn)：增加新圖元
圖元設(shè)計(jì)流程：
?
六、???下面的計(jì)劃
寫一系列帖子，把架構(gòu)、原理講清楚。大致如下：
-
網(wǎng)關(guān)層接口概述
-
上下位機(jī)通訊原理
-
如何實(shí)現(xiàn)一個(gè)設(shè)備驅(qū)動(dòng)
-
如何設(shè)計(jì)圖元
-
VS插件模塊及原理
-
歸檔模塊及文件格式
-
如何進(jìn)行功能擴(kuò)展
-
組態(tài)變量表達(dá)式實(shí)現(xiàn)
github地址：https://github.com/GavinYellow/SharpSCADA。QQ群：102486275
相關(guān)文章：?
-
.NET十年回顧
-
開源純C#工控網(wǎng)關(guān)+組態(tài)軟件
-
開源純C#工控網(wǎng)關(guān)+組態(tài)軟件(三)加入一個(gè)新驅(qū)動(dòng)：西門子S7
-
開源純C#工控網(wǎng)關(guān)+組態(tài)軟件(四)上下位機(jī)通訊原理
-
開源純C#工控網(wǎng)關(guān)+組態(tài)軟件(五)從網(wǎng)關(guān)到人機(jī)界面
原文：http://www.cnblogs.com/evilcat/p/7909578.html
.NET社區(qū)新聞，深度好文，歡迎訪問公眾號(hào)文章匯總 http://www.csharpkit.com
總結(jié)
以上是生活随笔為你收集整理的开源纯C#工控网关+组态软件(六)图元组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Entity Framework Cor
- 下一篇： 开源纯C#工控网关+组态软件(七)数据采