C# 曲線控制項 曲線繪製 即時曲線 多曲線控制項 開發

標籤：sum   ica   color   mmu   不同的應用   獨立   屬性   為什麼   sharp   

Prepare

 本文將使用一個NuGet公開的組件來實現曲線的顯示，包含了多種顯示的模式和配置來滿足各種不同的應用情境，方便大家進行快速的開發系統。

 

在Visual Studio 中的NuGet管理器中可以下載安裝，也可以直接在NuGet控制台輸入下面的指令安裝：

Install-Package HslCommunication

NuGet安裝教程  http://www.cnblogs.com/dathlin/p/7705014.html

支援人員QQ群：592132877 （組件的版本更新細節也將第一時間在群裡發布）

如果你在使用控制項的過程中有什麼疑問，或是發現了BUG，或是功能建議，等等都可以加入上面的QQ群進行討論。文章更新時間：2018年1月24日 18:25:50

 

接下來的計劃支援：

• 計劃支援X軸文本資訊顯示，但是具體的邏輯實現還是有待確認，如何更好的顯示
• 計劃支援滑鼠在資料上挪動時動態顯示資料值

 

Summary

曲線控制項屬於組件裡諸多控制項中的一種，為什麼單獨拿出來寫一篇部落格呢，就是因為曲線控制項相對於其他控制項都要複雜很多，並不是幾個屬性那麼簡單，下面列舉了本曲線控制項的特性：

• 提供便捷的API調用即可顯示曲線資訊內容，不需要複雜的配置
• 曲線介面的一些資訊可以自由定製，比如座標軸的顏色，是否顯示虛線等等
• 高度的大小自適應，無論你怎麼調整控制項的大小，始終都能友好顯示
• 支援資料展開填充和像素點填充兩種模式，具體區別參照下面的代碼
• 多曲線支援，支援同時顯示多個曲線資訊，每個曲線可獨立的指定顏色，線寬等等。
• 支援左右兩個參考系，就是說一個控制項中允許顯示2種資料跨度不一致的曲線，每種曲線可以顯示多條不同的曲線

 其他控制項的說明地址：http://www.cnblogs.com/dathlin/p/8150516.html

 組件的完整API說明：http://www.cnblogs.com/dathlin/p/7703805.html

 

要想使用組件的控制項，除了使用NuGet來安裝組件外，還需要將組件的dll檔案（在你的項目的packages裡面可以找到，如果你本來就是引用本地的，就直接拖拽本地的即可）拖拽到工具列：

拖拽完成後效果如下：

 

1.單曲線使用

把控制項拖拽到視窗介面上去後，現在介面如下，你可以隨意的展開大小，調整到一個虛線看著比較清晰的時刻停止：

我們看到左右縱軸的資料跨度都是0-100，現在我們有個需求，手裡有300個0-200的資料需要顯示，那麼就要先設定左右縱軸的資料跨度

接下來就可以編寫顯示的代碼了，一下資料隨機：

        private void userButton1_Click( object sender, EventArgs e )        {            float[] data = new float[300];            for (int i = 0; i < data.Length; i++)            {                data[i] = random.Next( 201 );            }            userCurve1.SetLeftCurve( "A", data, Color.DodgerBlue );        }

顯示結果如下：

看吧，相當簡單方便，如果你覺得目前的資料太密了，想要寬鬆一點，希望資料展開滿整個X軸，沒問題，因為目前預設的模式是像素點模式，所以切換為展開模式即可。

然後在運行看看效果：

 

接下來我們要對曲線“A”進行資料更新，我們假設你的data數組的資料已經更新了，有可能只更新了一個資料，有可能全部更新了，在資料更新的時候就需要在指定顏色了，因為指定了顏色也沒有用了。

        private void userButton3_Click( object sender, EventArgs e )        {            // 假設你的data數組已經更新了            float[] data = new float[300];            for (int i = 0; i < data.Length; i++)            {                data[i] = random.Next( 100, 201 );            }            // 之前已經給A指定過顏色了，以後後續的資料更新不需要重新指定，指定了也無效            // 如果需要重新設定顏色，或是線寬，需要先RemoveCurve，然後重新建立曲線資訊            userCurve1.SetLeftCurve( "A", data );        }

 

 

從上面的資料更新我們發現，只要更新了資料，就不停的調用資料顯示，那麼我們就可以顯示即時資料了，而唯一的麻煩之處在於我們需要維護自己的data數組。所以當前的這種方式只適合待用資料顯示

 

2.單曲線即時資料

當我們需要顯示一些即時資料時，也就是說，每隔1秒（隨便舉個栗子）就有新的資料擷取上來，然後追加到曲線中去，曲線進行挪動，通常就是這種情況。

2.1 像素點模式（請確認 IsAbscissaStrech 為False）：

我們先講解預設的模式，所謂像素點模式是指在橫軸上，一個像素點顯示一個資料，如果你的橫軸像素長度為1000，那麼你就可以顯示1000個資料了，當然在即時顯示的情況下，不需要你管那麼多，你只需要負責定期往裡面塞資料即可。

第一步先進行初始化：先增加指定名字的曲線資訊，曲線顏色，曲線寬度等等

        private void userButton4_Click( object sender, EventArgs e )        {            // 這裡傳入了數組長度為空白的資料，不能傳NULL            userCurve1.SetLeftCurve( "B", new float[] { }, Color.Tomato );        }

我們再寫一個按鈕，啟動定時器，去新增資料，來類比我們從其他裝置讀取到的資料資訊：

        private void userButton5_Click( object sender, EventArgs e )        {            Timer timer = new Timer( );            timer.Interval = 100;            timer.Tick += ( sender1, e1 ) =>            {                userCurve1.AddCurveData( "B", random.Next( 50, 201 ) );            };            timer.Start( );        }

如上面的兩個按鈕資訊，必須先點擊按鈕4進行曲線初始化，按鈕5的點擊才有效果。最終你會看到曲線每隔100ms重新整理一次，不停的有新的資料遞增。

當曲線數量超過當前可顯示的點數時，曲線會自動的往左挪動，即時你展開的整個控制項，它依然可以正常的工作，可顯示的資料點數會自動更新，記憶體中會緩衝2048個資料點來支援展開的效果轉換。

 

當然，它也支援一次更新多個資料，雖然這種情況很少，只是需要注意的是，一次更新的資料必須少於2048。

userCurve1.AddCurveData( "B", new float[] { random.Next( 50, 201 ), random.Next( 50, 201 ), random.Next( 50, 201 ) } );

 

 

 

2.2 展開模式（請確認 IsAbscissaStrech 為True）：

展開模式的意思是無論你的data數組有多少個點，都強行展開完整個橫軸介面，即時只有2個資料，或者是1000個資料，我們可以先看看這個初步的效果

        private void userButton4_Click( object sender, EventArgs e )        {            // 這裡傳入了數組長度為空白的資料，不能傳NULL            userCurve1.SetLeftCurve( "B", new float[] { }, Color.Tomato );        }        private void userButton5_Click( object sender, EventArgs e )        {            Timer timer = new Timer( );            timer.Interval = 100;            timer.Tick += ( sender1, e1 ) =>            {                userCurve1.AddCurveData( "B", random.Next( 50, 201 ) );            };            timer.Start( );        }

可以看到，除了修改下屬性，就可以測試了，我隨便截取個介面：

可以看到所有的曲線資訊往左開始一步步挪動。但是還是有個問題，這樣一直往左挪動。那麼這個曲線就會越來越密。那怎麼辦，總有個上限吧，那麼代碼修改成下面的：

        private void userButton4_Click( object sender, EventArgs e )        {            // 這裡傳入了數組長度為空白的資料，不能傳NULL            userCurve1.SetLeftCurve( "B", new float[] { }, Color.Tomato ,500); // 指定上限500個資料，該上限只對展開模式有效        }        private void userButton5_Click( object sender, EventArgs e )        {            Timer timer = new Timer( );            timer.Interval = 100;            timer.Tick += ( sender1, e1 ) =>            {                userCurve1.AddCurveData( "B", random.Next( 50, 201 ) );            };            timer.Start( );        }

我們再看展開模式的曲線：

你再展開控制項試試看？展開模式的意思是無論你的控制項多少大小，你規定了500個點，它就是500個點，即使你的控制項展開了，它還是500個點，只是沒有那麼密罷了

至於一次增加多個資料是和上面的像素點模式是一致的。

 

2.3 模式區別及選擇

像素點模式下，隨便看著資料比較密，但是好處在於解析度高的顯示器，可以顯示的資料更多。

展開模式雖然在控制項展開的情況下顯示的資料量不會增長，但是可以控制疏密程度。

各有優劣，建議先使用像素點模式，看看效果怎麼樣，一般資料變化都是慢慢來的，所以曲線不會像測試資料那樣亂串。如果資料亂串比較厲害，再使用展開模式。

 

 

3.多曲線使用

多曲線和單曲線模式很相似，無非是多幾條曲線而已，每條曲線的操作，新增資料都是一模一樣的，只是多曲線的模式都是統一的，要麼全部是像素點模式，要麼全部是展開模式，所有的特性和上兩節是相似的。

為了說明使用，舉個例子，你有多個裝置（2個及以上），每個裝置都有一個溫度資訊，現在要進行即時資料的直接對比，當然最好將三條曲線放到一起顯示。

我們命名三個曲線為“A”，“B”，“C” 然後假設所有的資料都是100-200之間，資料A是160-180隨機，資料B是150-170隨機，資料C是155-165隨機

此處測試方便，使用了 像素點模式。在 展開模式 下代碼也是一致的

初始化按鈕及啟動定時器按鈕代碼如下：

        private void userButton4_Click( object sender, EventArgs e )        {            userCurve1.SetLeftCurve( "A", new float[] { }, Color.Tomato );            userCurve1.SetLeftCurve( "B", new float[] { }, Color.DodgerBlue );            userCurve1.SetLeftCurve( "C", new float[] { }, Color.LimeGreen );        }        private void userButton5_Click( object sender, EventArgs e )        {            Timer timer = new Timer( );            timer.Interval = 100;            timer.Tick += ( sender1, e1 ) =>            {                userCurve1.AddCurveData(                    new string[] { "A", "B", "C" },                    new float[] { random.Next( 160, 181 ), random.Next( 150, 171 ), random.Next( 155, 165 ) } );            };            timer.Start( );        }

 

在新增資料的代碼上，此處使用了一條指令來新增三條資料，當然你也可以通過寫三條指令，分別新增，注意，那樣會導致介面重新整理三次！所以不建議。 

 

介面如下：

 

3.雙座標使用

我們接下來看一種相當複雜的使用情境，假設我們有一台裝置，需要監控4條曲線，2條溫度，2條壓力，溫度的範圍是0-200，壓力的範圍為0-5 mpa，那麼想要在一個控制項裡顯示，也是可以實現的。先調整左右的座標範圍。

 

此處仍然使用像素點模式，我們接下來寫初始化代碼和新增資料的代碼：

        private void userButton4_Click( object sender, EventArgs e )        {            userCurve1.SetLeftCurve( "A", new float[] { }, Color.Tomato );            // 溫度1            userCurve1.SetLeftCurve( "B", new float[] { }, Color.DodgerBlue );        // 溫度2            userCurve1.SetLeftCurve( "C", new float[] { }, Color.LimeGreen );         // 壓力1            userCurve1.SetLeftCurve( "D", new float[] { }, Color.Purple );            // 壓力2        }        private void userButton5_Click( object sender, EventArgs e )        {            Timer timer = new Timer( );            timer.Interval = 100;            timer.Tick += ( sender1, e1 ) =>            {                userCurve1.AddCurveData(                    new string[] { "A", "B", "C", "D" },                    new float[] { random.Next( 160, 181 ), random.Next( 150, 171 ), (float)random.NextDouble( ) * 3.5f, (float)random.NextDouble( ) * 1f } );            };            timer.Start( );        }

 

效果如：

 

 

4.背景顏色調整

我修改下背景為暗黑色，瞬間就有黑科技的效果了。當然，線條的顏色可以調整的更加好一點

 

 

 

4.結束語

感謝閱讀。

 

C# 曲線控制項 曲線繪製 即時曲線 多曲線控制項 開發