WPF開(kāi)發(fā)之利用DrawingVisual繪制高性能曲線圖
前言
項(xiàng)目中涉及到了心率檢測(cè),而且數(shù)據(jù)量達(dá)到了百萬(wàn)級(jí)別,通過(guò)WPF實(shí)現(xiàn)大數(shù)據(jù)曲線圖時(shí),嘗試過(guò)最基礎(chǔ)的Canvas來(lái)實(shí)現(xiàn),但是性能堪憂,而且全部畫(huà)出來(lái)也不實(shí)際。同時(shí)也嘗試過(guò)找第三方的開(kāi)源庫(kù),但是因?yàn)榍€圖涉及到很多細(xì)節(jié)功能,第三方的肯定也沒(méi)法滿足。沒(méi)辦法,只能自己實(shí)現(xiàn),上網(wǎng)查找后發(fā)現(xiàn)DrawingVisual這個(gè)玩意可以實(shí)現(xiàn)高性能畫(huà)圖,同時(shí)再搭配局部顯示,這樣就能實(shí)現(xiàn)自己想要的效果。話不多說(shuō),今天把大致的實(shí)現(xiàn)思路寫(xiě)一下,就不直接把項(xiàng)目的源碼貼出來(lái),寫(xiě)個(gè)簡(jiǎn)單的Demo就好了。
正文
1、首先新建個(gè)項(xiàng)目,然后創(chuàng)建個(gè)自定義控件,命名為CurveChartDrawingVisual,然后讓它繼承FrameworkElement。因?yàn)橐褂肈rawingVisual對(duì)象的話,需要為它創(chuàng)建一個(gè)主機(jī)容器。關(guān)于其他相關(guān)DrawingVisual的細(xì)節(jié)這里不做過(guò)多闡述,不明白的可以去微軟官網(wǎng)看。
2、實(shí)現(xiàn)的具體代碼如下,相關(guān)細(xì)節(jié)有備注標(biāo)注了。這里記得要重寫(xiě)一下VisualChildrenCount屬性和重寫(xiě)GetVisualChild()方法,不然圖畫(huà)不出來(lái)
public class CruveChartDrawingVisual : FrameworkElement { private List<Visual> visuals = new List<Visual>(); private DrawingVisual Layer; private double offset_x = 0;//滑動(dòng)條偏移值 private double y_scale;//y軸放心縮放比例 private List<int> list_points;//曲線數(shù)據(jù) private static int Top_Val_Max = 100;//y軸最大值 private static int Top_Val_Min = 0;//y軸最小值 private static int X_Sex = 20;//x軸分度值 private static int Y_Sex = 20;//x軸分度值 private static int Bottom = 30;//底部x軸坐標(biāo)顯示高度 Pen pen = new Pen(Brushes.Green, 2); Pen primarygrid_pen = new Pen(Brushes.Black, 1); Pen secondgrid_pen = new Pen(Brushes.Gray, 1); public CruveChartDrawingVisual() { pen.Freeze();//凍結(jié)筆,提高性能關(guān)鍵所在 primarygrid_pen.Freeze(); secondgrid_pen.Freeze(); Layer = new DrawingVisual(); visuals.Add(Layer); } public void SetupData(List<int> points) { list_points = points; offset_x = 0; DrawContent(); } public void OffsetX(double offset) { offset_x = offset; DrawContent(); InvalidateVisual(); } private void DrawContent() { var dc = Layer.RenderOpen(); y_scale = (RenderSize.Height - Bottom) / (Top_Val_Max - Top_Val_Min); var mat = new Matrix(); mat.ScaleAt(1, -1, 0, RenderSize.Height / 2); mat.OffsetX = -offset_x; dc.PushTransform(new MatrixTransform(mat)); //橫線 for (int y = 0; y <= Top_Val_Max - Top_Val_Min; y += 10) { Point point1 = new Point(offset_x, y * y_scale + Bottom); Point point2 = new Point(offset_x + RenderSize.Width, y * y_scale + Bottom); if (y % Y_Sex == 0) { dc.DrawLine(primarygrid_pen, point1, point2); continue; } dc.DrawLine(secondgrid_pen, point1, point2); } //豎線與文字 for (int i = 0; i <= (offset_x + RenderSize.Width); i += X_Sex * 2) { if (i < offset_x) { continue; } var point1 = new Point(i, Bottom); var point2 = new Point(i, (Top_Val_Max - Top_Val_Min) * y_scale + Bottom); //y軸文字 if (i % 100 == 0) { var text1 = new FormattedText(i + "", CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Verdana"), 16, Brushes.Black); var mat3 = new Matrix(); mat3.ScaleAt(1, -1, i - text1.Width / 2, 8 + text1.Height / 2); dc.PushTransform(new MatrixTransform(mat3)); dc.DrawText(text1, new Point(i - text1.Width / 2, 8)); dc.Pop(); } //表格刻度文字 if (i % 100 == 0) { for (int y = Top_Val_Min; y <= Top_Val_Max; y += 10) { if (y % Y_Sex == 0) { var text1 = new FormattedText(y + "", CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Verdana"), 12, Brushes.Black); var mat3 = new Matrix(); mat3.ScaleAt(1, -1, i + 1, (y - Top_Val_Min) * y_scale + Bottom + text1.Height / 2); dc.PushTransform(new MatrixTransform(mat3)); dc.DrawText(text1, new Point(i + 1, (y - Top_Val_Min) * y_scale + Bottom)); dc.Pop(); } } //深色豎線 dc.DrawLine(primarygrid_pen, point1, point2); continue; } //淺色豎線 dc.DrawLine(secondgrid_pen, point1, point2); } if (list_points != null) { for (int i = (int)offset_x; i < list_points.Count - 1; i++) { if (i > offset_x + RenderSize.Width) { break; } dc.DrawLine(pen, new Point(i, list_points[i] * y_scale + Bottom), new Point(i + 1, list_points[i + 1] * y_scale + Bottom)); } } dc.Pop(); dc.Close(); } protected override int VisualChildrenCount => visuals.Count; protected override Visual GetVisualChild(int index) { return visuals[index]; } protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo) { DrawContent(); base.OnRenderSizeChanged(sizeInfo); } protected override void OnRender(DrawingContext drawingContext) { drawingContext.DrawRectangle(Brushes.White, null, new Rect(0, 0, RenderSize.Width, RenderSize.Height)); base.OnRender(drawingContext); } }
3、接著測(cè)試一下,打開(kāi)MainWindow,添加我們的自定義控件,這里局部顯示需要搭配一個(gè)ScrollViewer來(lái)實(shí)現(xiàn),記得這里沒(méi)有將我們的自定義控件嵌入ScrollViewer,而是放一個(gè)Canvas來(lái)填充,代碼如下
<Grid> <local:CruveChartDrawingVisual x:Name="curve" Margin="0,15,0,20" /> <ScrollViewer Name="scroll" HorizontalScrollBarVisibility="Auto" ScrollChanged="ScrollViewer_ScrollChanged" VerticalScrollBarVisibility="Disabled"> <Canvas x:Name="canvas" Height="1" /> </ScrollViewer> </Grid>
4、接著就是后臺(tái)代碼,比較簡(jiǎn)單,就是自動(dòng)生成一個(gè)List,然后傳給自定義控件,Canvas的寬度直接設(shè)置為L(zhǎng)ist的長(zhǎng)度,因?yàn)檫@里是水平方向一個(gè)像素點(diǎn)畫(huà)一個(gè)點(diǎn),然后滑動(dòng)條滑動(dòng)時(shí)再將對(duì)應(yīng)的偏移值傳遞到控件,再通過(guò)偏移值更新視圖
public partial class MainWindow : Window { private bool isAdd = true; public MainWindow() { InitializeComponent(); } private void Window_Loaded(object sender, RoutedEventArgs e) { List<int> lists = new List<int>(); int temp = 20; for (int i = 0; i < 60 * 60; i++) { if (isAdd) { lists.Add(temp); temp ++; } else { lists.Add(temp); temp --; } if (temp == 90) isAdd = false; if (temp == 10) isAdd = true; } canvas.Width = lists.Count; curve.SetupData(lists); } private void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e) { curve.OffsetX(scroll.HorizontalOffset); } }
5、運(yùn)行效果如下,滑動(dòng)條拖到哪里就顯示哪里,這樣就算數(shù)據(jù)量再大也沒(méi)問(wèn)題,這種曲線圖跟常規(guī)的曲線圖有點(diǎn)差別,這里更多的是提供一種思路
以上就是WPF開(kāi)發(fā)之利用DrawingVisual繪制高性能曲線圖的詳細(xì)內(nèi)容,更多關(guān)于WPF DrawingVisual繪制曲線圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何傳值在2個(gè)頁(yè)面之間 要求不刷新父頁(yè)面,并且不能用Querystring傳值
通過(guò)Cookie,因?yàn)樗瓤梢栽诜?wù)器端對(duì)其進(jìn)行操作,也可在客戶端對(duì)其進(jìn)行操作但是缺點(diǎn)是不安全,而且有時(shí)客戶端會(huì)由于安全問(wèn)題禁用Cookie!2008-12-12.NET Core API CORS的實(shí)現(xiàn)
這篇文章主要介紹了.NET Core API CORS的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08ASP.NET 水晶報(bào)表打印功能實(shí)現(xiàn)代碼
ASP.NET下的水晶報(bào)表打印,據(jù)我所知有以下幾種辦法可以打印2008-11-11ASP.NET MVC4中使用Html.DropDownListFor的方法示例
這篇文章主要介紹了ASP.NET MVC4中使用Html.DropDownListFor的方法,結(jié)合實(shí)例形式分析了控制器數(shù)據(jù)源及Html.DropDownListFor顯示操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08asp.net?core?MVC?全局過(guò)濾器之ExceptionFilter過(guò)濾器(1)
這篇文章主要為大家詳細(xì)介紹了asp.net?core?MVC?全局過(guò)濾器之ExceptionFilter過(guò)濾器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Visual Studio 2017 15.5 正式發(fā)布!性能再提升
Visual Studio 2017 15.5 正式發(fā)布!性能再提升,時(shí)發(fā)布的還有 Visual Studio for Mac 7.3,亮點(diǎn)如下2017-12-12基于.net core微服務(wù)的另一種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了基于.net core微服務(wù)的另一種實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07使用VS2022在ASP.NET?Core中構(gòu)建輕量級(jí)服務(wù)
本文詳細(xì)講解了使用VS2022在ASP.NET?Core中構(gòu)建輕量級(jí)服務(wù)的方法,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12ASP.NET下使用xml反序列化、緩存依賴實(shí)現(xiàn)個(gè)性化配置文件的實(shí)時(shí)生效
本文主要介紹了ASP.NET下使用xml反序列化、緩存依賴實(shí)現(xiàn)個(gè)性化配置文件的實(shí)時(shí)生效的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01