在WPF DrawingContext 是一個核心元素，提供了一個環境用於進行底層繪圖操作。透過使用 DrawingContext，你可以在WPF應用程式中繪製圖形、文字、圖像等。它是一個向量繪圖的介面，意味著你繪製的內容可以無損縮放，非常適合構建高分辨率的UI介面。
DrawingContext 並不直接用於XAML文件中，而是通常在代碼後台中使用，尤其是在自定義控件的渲染過程中。你可以通過覆蓋控件的 OnRender 方法並使用傳遞給該方法的 DrawingContext 參數來繪製自定義的UI元素。
下面是 DrawingContext 提供的一些繪製功能：
- 繪製形狀：如線條、矩形、橢圓、多邊形和路徑。這些形狀可以被填充或描邊，也可以同時被填充並描邊。
- 繪製文字：可以指定文字的字體、大小、顏色等屬性，並在UI上繪製。
- 繪製圖像：允許你將圖像資源繪製到UI上。
- 應用變換：可以對繪製的內容應用各種變換操作，如平移、旋轉、縮放等。
- 剪裁和不透明遮罩：可以通過剪裁來限制繪製內容的區域，或使用不透明遮罩來控制內容的可見度。
使用 DrawingContext 進行繪製時，所有的繪製命令都會被緩存，直到當前的繪製作用域結束。這意味著，DrawingContext 的操作不是立即執行的，而是在作用域結束時一次性處理，這有助於提高繪製性能。
由於 DrawingContext 是用於更底層的繪製操作，因此它提供了強大的靈活性，但同時也意味著比在XAML中聲明式繪圖要複雜一些。如果你打算自定義WPF控件的外觀或創建複雜的圖形界面，那麼了解和使用 DrawingContext 將非常有幫助。
Outline
DrawingContext 繪圖基礎
範例展示了如何在WPF的自定義控件中覆蓋OnRender方法，使用DrawingContext來繪製線條、矩形、橢圓。我們將會創建一個簡單的自定義控件，並在其中進行這些基本圖形的繪製。
首先，確保您的項目引用了WPF的命名空間：
|
1 2 3 |
using System.Windows; using System.Windows.Controls; using System.Windows.Media; |
DrawLine Example
|
1 2 3 |
// 繪製線條 Pen linePen = new Pen(Brushes.Black, 2); drawingContext.DrawLine(linePen, new Point(10, 10), new Point(100, 10)); |
DrawRectagle Example
|
1 2 |
// 繪製矩形 drawingContext.DrawRectangle(Brushes.LightBlue, null, new Rect(10, 20, 90, 60)); |
DrawEllipse Example
|
1 2 3 |
// 繪製橢圓 // 使用DrawEllipse方法繪製橢圓，指定填充顏色（淺綠色）、無邊框（null）、中心點坐標和橢圓的半徑（X軸和Y軸） drawingContext.DrawEllipse(Brushes.LightGreen, null, new Point(55, 120), 45, 30); |
DrawText Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 繪製文字 FormattedText formattedText = new FormattedText( "Hello, WPF!", // 文字內容 System.Globalization.CultureInfo.CurrentCulture, // 使用當前文化信息 FlowDirection.LeftToRight, // 文字流向 new Typeface("Verdana"), // 字體 16, // 字號 Brushes.Black, // 文字顏色 VisualTreeHelper.GetDpi(this).PixelsPerDip); //Render在不同DPI的顯示器上能夠自動調整 var formattedTextPoint = centerPoint; formattedTextPoint.Offset(- formattedText.WidthIncludingTrailingWhitespace / 2, - formattedText.Height / 2); drawingContext.DrawText(formattedText, formattedTextPoint); // 指定文字的繪製位置 位於元件正中心 |
Sample Code: MyGithub
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace DrawingSamepleCode { internal class CustomDrawingControl : Control { protected override void OnRender(DrawingContext drawingContext) { base.OnRender(drawingContext); var centerPoint = new Point(this.ActualWidth / 2, this.ActualHeight / 2); // 繪製線條 Pen linePen = new Pen(Brushes.Black, 2);// 創建一個筆刷，定義線條的顏色（黑色）和寬度（2像素） // 使用DrawLine方法繪製線條，指定筆刷、起點和終點的坐標 drawingContext.DrawLine(linePen, new Point(10, 10), new Point(100, 10)); // 繪製矩形 // 使用DrawRectangle方法繪製矩形，指定填充顏色（淺藍色）、無邊框（null）和矩形的位置及大小 drawingContext.DrawRectangle(Brushes.LightBlue, null, new Rect(10, 20, 90, 60)); // 繪製橢圓 // 使用DrawEllipse方法繪製橢圓，指定填充顏色（淺綠色）、無邊框（null）、中心點坐標和橢圓的半徑（X軸和Y軸） drawingContext.DrawEllipse(Brushes.LightGreen, null, new Point(55, 120), 45, 30); // 繪製文字 FormattedText formattedText = new FormattedText( "Hello, WPF!", // 文字內容 System.Globalization.CultureInfo.CurrentCulture, // 使用當前文化信息 FlowDirection.LeftToRight, // 文字流向 new Typeface("Verdana"), // 字體 16, // 字號 Brushes.Black, // 文字顏色 VisualTreeHelper.GetDpi(this).PixelsPerDip); //Render在不同DPI的顯示器上能夠自動調整 var formattedTextPoint = centerPoint; formattedTextPoint.Offset(- formattedText.WidthIncludingTrailingWhitespace / 2, - formattedText.Height / 2); drawingContext.DrawText(formattedText, formattedTextPoint); // 指定文字的繪製位置 位於元件正中心 } } } |
DrawingContext 繪製波形圖
在顯示大量波形的情況下，標準元件可能無法負擔（會導致延遲和功能受限）。因此，我提供了一個免費的範例，說明如何使用C# WPF高效繪製大量的波形圖。
Waveform 基礎介紹
要理解和分析電壓波形圖，你需要具備一些基本的電學知識和技能。如下:
- 電壓基礎：
- 定義：了解電壓是表示電位差的物理量，即兩點間電位差的度量。
- 單位：電壓的單位是伏特（V）。
- 時間和頻率：
- 時間域：了解波形如何隨時間變化，這對於分析波形如何反映電壓隨時間的變動非常重要。
- 頻率域：理解波形中的不同頻率成分，包括基本頻率和諧波。
- 正弦波和非正弦波：
- 正弦波：最常見的交流（AC）電壓波形，具有周期性和振幅一致的特點。
- 非正弦波：包括方波、三角波等，常見於數位電路和某些類型的電源供應。
- 波形參數：
- 振幅：波形的最高點和最低點的絕對值。
- 週期和頻率：週期是波形重複一次所需的時間，頻率是單位時間內波形重複的次數。
- 相位：描述波形相對於參考點的偏移。
以上是繪製波形圖的基礎，理解之後能夠開始定義使用者能夠設置的參數。如下:
TimeResolution、Max/Min Voltage Per Pin、Cycle Count、Point Size Per Cycle
為了增強靈活性和通用性，我們可以開發一個功能，讓使用者在不同的測試周期（Cycle）中設定不同的點大小（PointSize）。例如，你可以配置兩個不同的周期，每個周期的持續時間和點大小都不同。具體設置如下：
- 第一個周期（Cycle[0]）的點大小設為10，對應的時間分辨率為1納秒（nS），因此這個周期的總持續時間為10納秒（nS）。
- 第二個周期（Cycle[1]）的點大小設為20，同樣的時間分辨率為1納秒（nS），使得這個周期的持續時間為20納秒（nS）。
這樣的設定允許每個周期內呈現不同的波形特性，並且這些設定可以根據實際需求自由調整。此外，若需要對所有周期使用相同的設定，也可以很容易地實現，增加了配置的一致性和可重複性。
DrawingContext Waveform 功能介紹
在我開發的元件中，我實現了多個高度客製化和靈活的功能，旨在提供卓越的使用體驗和效能：
- 多樣化的波形顯示：元件支持在每個測試周期內顯示每一個引腳（Pin）的波形，用戶可以自由定義每個周期的持續時間，確保了顯示的精確性和彈性。
- 擴展性和效能：理論上，元件支持無限數量的引腳和周期，以及每個引腳的波形數量。重要的是，這一設計不會影響元件的運行效率，因為系統僅繪製當前畫面中的波形，從而大幅降低了計算負擔。
- 高度客製化的界面：除了核心功能，用戶還可以自訂波形、光標、文本等元素的色彩，使得每個用戶都能根據自己的需求或品牌風格進行調整。
這些功能不僅提高了元件的實用性和靈活性，也保證了在處理複雜資料時的高效性能。
Source Code: My Github
以上是我學習筆記提供給各位，還有很多功能能夠增加，如需要或技術上有任何問題可以跟我聯絡 。