WPF特效-绘制实时2D激光雷达图

5 篇文章 0 订阅

接前两篇:

https://blog.csdn.net/u013224722/article/details/80738619

https://blog.csdn.net/u013224722/article/details/80738995

除了c# GDI 、Opencv(c++)、 c# Emgu绘图外,其实c#  WPF绘图功能也很强大。上文中之所以最终使用了Emgu绘图 ,只是因为在踩坑过程中尝试使用了Emgu的图像处理函数。 即首先将List<double>的数据集合处理成DrawingImage然后得到RenderTargetBitmap,再转换为System.Drawing.Bitmap 再转换为Emgu.CV.Image。 所以后续的实验中直接就使用了Emgu绘图,处理完成后转换为BitmapSource在WPF界面呈现。其实完全使用WPF的绘图方式也能实现实时雷达图效果。

如:


绘制效率也挺不错的。上面的Gif,每秒10帧,每帧760个数据点。  显示成弧形是因为我将数据截断了,即设定了最大值范围,超过了则等于设定的最大值。

 #region Data Processing

        private DrawingGroup DrawingGroup;

        private void InitRadarVisualDraw()
        {
            this.DrawingGroup = new DrawingGroup();
            DrawingImage oImgSrc = new DrawingImage(this.DrawingGroup);
            this.ImgMainZm.Source = oImgSrc;

            this.ImgMainZm.Height = this.RadarRadius;
            this.ImgMainZm.Width = this.RadarRadius * 1920d / 1080d;
            this.IntervalDegree = 240d / 760d;
        }

        private double RadarRadius = 1000d;
        private double IntervalDegree = 0;

        private void DrawRadarDatas(List<double> ltDistances)
        {
            try
            {
                this.Dispatcher.BeginInvoke(DispatcherPriority.Normal, (Action)(() =>
                {
                    using (DrawingContext oDrawContent = this.DrawingGroup.Open())
                    {
                        oDrawContent.DrawRectangle(new SolidColorBrush(Colors.Black), new Pen(),
                            new Rect(0, 0, this.ImgMainZm.Width, this.ImgMainZm.Height));
                        oDrawContent.DrawEllipse(new SolidColorBrush(Colors.Green), new Pen(),
                               new Point(this.ImgMainZm.Width/2d, this.ImgMainZm.Height-10), 10, 10);
                        for (int i = 0; i < ltDistances.Count; i++)
                        {
                            double lDistance = ltDistances[i];
                            double dDegree = -120d + i * this.IntervalDegree;
                            double dRadian = Utilitys.ConvertToRads(dDegree);
                            double dX = this.ImgMainZm.Width / 2d + lDistance * Math.Sin(dRadian);
                            if (dX < 0)
                                dX = 0;
                            if (dX > this.ImgMainZm.Width)
                                dX = this.ImgMainZm.Width;
                            double dY = lDistance * Math.Cos(dRadian);

                            oDrawContent.DrawEllipse(new SolidColorBrush(Colors.Green), new Pen(),
                                new Point(dX, dY), 3, 3);
                        }
                    }
                }));
               
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }

        #endregion

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
WPF(Windows Presentation Foundation)是一种用于创建Windows应用程序的框架,可用于创建各种各样的形用户界面(GUI),包括实时曲线。 要实现实时曲线中x轴的自动滚动,可以采取以下步骤: 1. 创建一个WPF应用程序并设置其主窗口。 2. 在XAML中定义一个Canvas元素,它将用于绘制实时曲线。在Canvas上,您可以添加其他需要的元素,例如坐标轴等。 3. 在代码中,创建一个定时器(例如使用System.Timers.Timer类),以固定的时间间隔触发更新曲线的操作。 4. 在定时器的Tick事件处理程序中,更新实时曲线的数据,并重新绘制曲线。 5. 在绘制曲线时,可以通过调整x轴的坐标值来实现自动滚动的效果。例如,可以记录最后一个数据点的x轴坐标值,并将所有数据点的x轴坐标值减去该值,以实现滚动效果。 6. 然后,根据新的x轴坐标值重新绘制曲线。 以下是一个简单示例代码: ```csharp private System.Timers.Timer timer; private double xOffset = 0; public MainWindow() { InitializeComponent(); timer = new System.Timers.Timer(100); // 设置定时器间隔为100毫秒 timer.Elapsed += Timer_Tick; timer.Start(); } private void Timer_Tick(object sender, ElapsedEventArgs e) { // 更新曲线数据 // 调整x轴坐标值 double lastX = GetLastDataPointXValue(); xOffset += lastX; // 重新绘制曲线 Dispatcher.BeginInvoke(new Action(() => { DrawCurve(); })); } private void DrawCurve() { // 清除Canvas上的所有形元素 // 根据新的x轴坐标值重新绘制曲线 double xOffset = 0; foreach (DataPoint dataPoint in dataPoints) { // 计算新的x轴坐标值 double newX = dataPoint.X - xOffset; // 绘制曲线上的数据点 // 更新x轴坐标值为最新的值 dataPoint.X = newX; } } ``` 这样,每当定时器触发时,曲线的x轴坐标值都会根据最新的数据进行调整,从而实现自动滚动的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DuelCode

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值