用C#繪制實時曲線圖

2019-11-17 04:30:15

字體：大中小

來源：轉載

供稿：網友

在實際項目中我們經常需要繪制一些實時的數據圖片，比如當前各公司的用水量、用電量還有播放聲音視頻時實時顯示當前的聲頻等等，在我們最熟悉的任務管理器也有這么一個功能，用來表示當前CPU的使用頻率，最近筆者剛剛給朋友完成了一個類似的功能圖，用曲線圖來實時表示一些實際數據，由于形象直觀，很受客戶歡迎。
不過由于某些原因，本人不能將實際項目中的代碼拿出來給大家分享，只能模擬了一個簡單的實現，代碼沒有過多優化，所以還存在很多可以優化的地方，希望有興趣的朋友自己完善。

為了操作和應付變化，所以將繪制曲線圖的功能單獨封裝成一個類，里面的數據完全是模擬的，在橫向坐標上每個像素間隔用一個點來控制（實際中可能會加大這個距離），橫向是個隨機生成的數（實際開發中這應該來自我們的實時數據按比率計算得來的），顯示窗體中用到了一個線程來定時繪制實時曲線。

實際代碼如下：

view plaincopy to clipboardPRint?
using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using System.Drawing.Imaging;

namespace RealtimeCurve
{
    /// <SUMMARY>
    /// 說明：實時圖片生成類，在本例中橫向坐標上每個像素都會有一個控制點
    /// 實際開發中可以減少控制點，比如每5個像素用一個控制點
    /// 這樣的效果或許更加逼真
    /// 作者：周公
    /// 日期：2008-07-21
    /// 首發地址：<A href="http://blog.csdn.net/zhoufoxcn/archive/2008/07/21/2682027.aspxhttp://blog.csdn.net/zhoufoxcn/archive/2008/07/21/2682027.aspx">http://blog.csdn.net/zhoufoxcn/archive/2008/07/21/2682027.aspx</A>
    /// </SUMMARY>
    public class RealTimeImageMaker
    {
        private int width;//要生成的曲線圖的寬度
        private int height;//要生成的曲線圖的高度
        private Point[] pointList;//用來繪制曲線圖的關鍵點，依次將這些點連接起來即得到曲線圖
        private Random random = new Random();//用于生成隨機數
        private Bitmap currentImage;//當前要繪制的圖片
        private Color backColor;//圖片背景色
        private Color foreColor;//圖片前景色
        /// <SUMMARY>
        /// 圖片的高度
        /// </SUMMARY>
        public int Height
        {
            get { return height; }
            set { height = value; }
        }

        /// <SUMMARY>
        /// 圖片的寬度
        /// </SUMMARY>
        public int Width
        {
            get { return width; }
            set { width = value; }
        }
        /// <SUMMARY>
        /// 構造函數，指定生成的曲線圖的寬度和高度
        /// </SUMMARY>
        /// <PARAM name="width">要生成的曲線圖的寬度</PARAM>
        /// <PARAM name="height">要生成的曲線圖的高度</PARAM>
        public RealTimeImageMaker(int width, int height):this(width,height,Color.Gray,Color.Blue)
        {

        }
        /// <SUMMARY>
        /// 構造函數，指定生成的曲線圖的寬度、高度及背景色和前景色
        /// </SUMMARY>
        /// <PARAM name="width">要生成的曲線圖的寬度</PARAM>
        /// <PARAM name="height">要生成的曲線圖的高度</PARAM>
        /// <PARAM name="backColor">曲線圖背景色</PARAM>
        /// <PARAM name="foreColor">曲線圖前景色</PARAM>
        public RealTimeImageMaker(int width, int height, Color backColor, Color foreColor)
        {
            this.width = width;
            this.height = height;
            this.backColor = backColor;
            this.foreColor = foreColor;
            pointList = new Point[width];
            Point tempPoint;
            //初始化曲線上的所有點坐標
            for (int i = 0; i < width; i++)
            {

                tempPoint = new Point();
                //曲線的橫坐標沿x軸依次遞增，在橫向位置上每個像素都有一個點
                tempPoint.X = i;
                //曲線上每個點的縱坐標隨機生成，但保證在顯示區域之內
                tempPoint.Y = random.Next() % height;
                pointList[i] = tempPoint;
            }
        }
        /// <SUMMARY>
        /// 獲取當前依次連接曲線上每個點繪制成的曲線
        /// </SUMMARY>
        /// <RETURNS></RETURNS>
        public Image GetCurrentCurve()
        {
            //currentImage = historyImage.Clone(new Rectangle(1, 0, width - 1, height), PixelFormat.Format24bppRgb);
            currentImage = new Bitmap(width, height);
            Point p;
            //將當前定位曲線圖的坐標點前移，并且將橫坐標減1，
            //這樣做的效果相當于移除當前第一個點
            for (int i = 0; i < width-1; i++)
            {
                p = pointList[i + 1];
                pointList[i] = new Point(p.X-1,p.Y);
            }
            Point tempPoint = new Point();
            //新生成曲線圖定位點的最后一個點的坐標
            tempPoint.X = width;
            //曲線上每個點的縱坐標隨機生成，但保證在顯示區域之內
            tempPoint.Y = random.Next(DateTime.Now.Millisecond) % height;
            //在最后再添加一個新坐標點
            pointList[width-1]=tempPoint;
            Graphics g = Graphics.FromImage(currentImage);
            g.Clear(backColor);
            //繪制曲線圖
            g.DrawLines(new Pen(foreColor), pointList);
            g.Dispose();
            return currentImage;
        }
    }
}

using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;
using System.Drawing.Imaging;

namespace RealtimeCurve
{
    ///
    /// 說明：實時圖片生成類，在本例中橫向坐標上每個像素都會有一個控制點
    /// 實際開發中可以減少控制點，比如每5個像素用一個控制點
    /// 這樣的效果或許更加逼真
    /// 作者：周公
    /// 日期：2008-07-21
    /// 首發地址：http://blog.csdn.net/zhoufoxcn/archive/2008/07/21/2682027.aspx
    ///
    public class RealTimeImageMaker
    {
        private int width;//要生成的曲線圖的寬度
        private int height;//要生成的曲線圖的高度
        private Point[] pointList;//用來繪制曲線圖的關鍵點，依次將這些點連接起來即得到曲線圖
        private Random random = new Random();//用于生成隨機數
        private Bitmap currentImage;//當前要繪制的圖片
        private Color backColor;//圖片背景色
        private Color foreColor;//圖片前景色
        ///
        /// 圖片的高度
        ///
        public int Height
        {
            get { return height; }
            set { height = value; }
        }

        ///
        /// 圖片的寬度
        ///
        public int Width
        {
            get { return width; }
            set { width = value; }
        }
        ///
        /// 構造函數，指定生成的曲線圖的寬度和高度
        ///
        /// 要生成的曲線圖的寬度
        /// 要生成的曲線圖的高度
        public RealTimeImageMaker(int width, int height):this(width,height,Color.Gray,Color.Blue)
        {

        }
        ///
        /// 構造函數，指定生成的曲線圖的寬度、高度及背景色和前景色
        ///
        /// 要生成的曲線圖的寬度
        /// 要生成的曲線圖的高度
        /// 曲線圖背景色
        /// 曲線圖前景色
        public RealTimeImageMaker(int width, int height, Color backColor, Color foreColor)
        {
            this.width = width;
            this.height = height;
            this.backColor = backColor;
            this.foreColor = foreColor;
            pointList = new Point[width];
            Point tempPoint;
            //初始化曲線上的所有點坐標
            for (int i = 0; i < width; i++)
            {

                tempPoint = new Point();
                //曲線的橫坐標沿x軸依次遞增，在橫向位置上每個像素都有一個點
                tempPoint.X = i;
                //曲線上每個點的縱坐標隨機生成，但保證在顯示區域之內
                tempPoint.Y = random.Next() % height;
                pointList[i] = tempPoint;
            }
        }
        ///
        /// 獲取當前依次連接曲線上每個點繪制成的曲線
        ///
        ///
        public Image GetCurrentCurve()
        {
            //currentImage = historyImage.Clone(new Rectangle(1, 0, width - 1, height), PixelFormat.Format24bppRgb);
            currentImage = new Bitmap(width, height);
            Point p;
            //將當前定位曲線圖的坐標點前移，并且將橫坐標減1，
            //這樣做的效果相當于移除當前第一個點
            for (int i = 0; i < width-1; i++)
            {
                p = pointList[i + 1];
                pointList[i] = new Point(p.X-1,p.Y);
            }
            Point tempPoint = new Point();
            //新生成曲線圖定位點的最后一個點的坐標
            tempPoint.X = width;
            //曲線上每個點的縱坐標隨機生成，但保證在顯示區域之內
            tempPoint.Y = random.Next(DateTime.Now.Millisecond) % height;
            //在最后再添加一個新坐標點
            pointList[width-1]=tempPoint;
            Graphics g = Graphics.FromImage(currentImage);
            g.Clear(backColor);
            //繪制曲線圖
            g.DrawLines(new Pen(foreColor), pointList);
            g.Dispose();
            return currentImage;
        }
    }
}窗體關鍵代碼：
view plaincopy to clipboardprint?
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Threading;

namespace RealtimeCurve
{
    /// <SUMMARY>
    /// 說明：顯示實時曲線圖的窗體
    /// 作者：周公
    /// 日期：2008-07-21
    /// 首發地址：<A href=">
    /// </SUMMARY>
    public partial class FormRealTime : Form
    {
        Thread thread;
        RealTimeImageMaker rti;
        Color backColor = Color.Black;//指定繪制曲線圖的背景色
        public FormRealTime()
        {
            InitializeComponent();
            rti = new RealTimeImageMaker(Width, Height, backColor, Color.Green);
            thread = new Thread(new ThreadStart(Run));
            thread.Start();
        }

        private void Run()
        {
            while (true)
            {
                Image image = rti.GetCurrentCurve();
                Graphics g = CreateGraphics();
                //用指定背景色清除當前窗體上的圖象
                g.Clear(backColor);
                g.DrawImage(image, 0, 0);
                g.Dispose();
                //每秒鐘刷新一次
                Thread.Sleep(1000);
            }
        }

        private void FormRealTime_FormClosing(object sender, FormClosingEventArgs e)
        {
            //在窗體即將關閉之前中止線程
            thread.Abort();
        }
    }
}