C# 制作 儀表

以前在百度寫的文檔，轉移到此處

前些天在做NetAnalyzer時，需要使用一個指針儀表，網上看了一下，也有人做過，但是大部分都是收費的，本着自力更生的原則，於是決定自己設計一個，今天拿出來有讀者分享一下。

首先是截圖：

該儀表是以控件形式提供

在開始之前還要贅述一點關於GDI+中角度的計算

如下圖

在WinForm中左上角的點位（0,0），即原點，而其起始角則是圖中划線處開始的，即為 rad=0;

在繪圖時，尤其是做過扇形統計圖的人應該比較清楚。

--------------------------------------------------------

接下來就是正式開始

首先新建控件，設置為witdth=height=150 ，可以自己定義，我在這里時可以自適應的

將背景顏色設置為Transparent（透明色），方便以后使用時減少干擾

在該儀表中主要分為兩部分：背景部分（外框，刻度，單位等一些列基本不需要頻繁變化的部分），前景部分（指針部分）

所以為了不是兩個圖層不相互影響，我們將背景繪制在控件的BackgroundImage 屬性上，而指針部分則需要一個pictrueBox控件作為載體。

首先畫背景

在繪制背景時，又分為外框、刻度，指針固定中心等

  // 繪制背景 用來總體控制背景的繪制
        private void DrawBackImg()
        {
            Bitmap bit = new Bitmap(this.Width, this.Height);
            Graphics gp = Graphics.FromImage(bit);
            gp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
            #region 在這里可以擴展需要繪制的背景項目
            //外框
            drawFrame(gp);
            // 畫刻度
            DrawRuling(gp);
            //畫點
            drawPoint(gp);

            //繪制單位

            DrawUnitStr(gp);

            #endregion

           //當繪制完成后，直接直接設置為背景

            this.BackgroundImage = bit;
        }


      //繪制單位

       private void DrawUnitStr(Graphics gp)
        {
            int cer = _diameter / 2;
            gp.DrawString(_unitStr, new Font("宋體", 10), new SolidBrush(_frameColor), new PointF(cer, (float)(cer - cer * 0.3)), strFormat);

        }

        /// <summary>
        /// 畫外框
        /// </summary>
        /// <param name="gp"></param>
        private void drawFrame(Graphics gp)
        {
            Pen pen = new Pen(_frameColor, 2);
            Rectangle rec = new Rectangle(5, 5, _diameter - 10, _diameter - 10);
            gp.DrawEllipse(pen, rec);
        }
        // 畫刻度  此次較為復雜，主要是在繪制刻度值時需要處理
        private void DrawRuling(Graphics gp)
        {
            //刻度
            int cerX = _diameter / 2;
            int cerY = _diameter / 2;

           //這里需要注意，因外在上面的圖中標識了rad=0的位置，而我們的儀表時270度的，0點在135度處，

           //為了符合該效果所以起始位置設為135度。
            float start = 135;
            float sweepShot = 0;
            int dx = 0;
            int dy = 0;
            int soildLenght = 8;
            Pen linePen = new Pen(_frameColor, 1);
            float span = (float)(_maxValue / 30);
            float sp = 0;
            //用於右邊數字右對齊
            StringFormat stf = new StringFormat();
            stf.Alignment = StringAlignment.Far;

            StringFormat stfMid = new StringFormat();
            stfMid.Alignment = StringAlignment.Center;
            stfMid.LineAlignment = StringAlignment.Center;
            for (int i = 0; i <= 30; i++)
            {
                //注意此處，C#提供的三角函數計算中使用的弧度值，而此處獲取的是角度值，需要轉化

                double rad = (sweepShot + start) * Math.PI / 180;
                float radius = _diameter / 2 - 5;
                int px = (int)(cerX + radius * Math.Cos(rad));
                int py = (int)(cerY + radius * Math.Sin(rad));
                if (sweepShot % 15 == 0)
                {
                    linePen.Width = 2;

                   //計算刻度中的粗線
                    dx = (int)(cerX + (radius - soildLenght) * Math.Cos(rad));
                    dy = (int)(cerY + (radius - soildLenght) * Math.Sin(rad));

                    //繪制刻度值，注意字串對其方式
                    string str = sp.ToString("f0");
                    if (sweepShot <= 45)
                    {
                        gp.DrawString(str, new Font("宋體", 9), new SolidBrush(_frameColor), new PointF(dx, dy - 5));
                    }
                    else if (sweepShot > 45 && sweepShot < 135)
                    {
                        gp.DrawString(str, new Font("宋體", 9), new SolidBrush(_frameColor), new PointF(dx, dy));
                    }
                    else if (sweepShot == 135)
                    {
                        gp.DrawString(str, new Font("宋體", 9), new SolidBrush(_frameColor), new PointF(dx, dy + 10), stfMid);
                    }
                    else if (sweepShot > 135 && sweepShot < 225)
                    {
                        gp.DrawString(str, new Font("宋體", 9), new SolidBrush(_frameColor), new PointF(dx, dy), stf);
                    }
                    else if (sweepShot >= 225)
                    {
                        gp.DrawString(str, new Font("宋體", 9), new SolidBrush(_frameColor), new PointF(dx, dy - 5), stf);
                    }

                }
                else
                {

                    //計算刻度中細線

                    linePen.Width = 1;
                    dx = (int)(cerX + (radius - soildLenght + 2) * Math.Cos(rad));
                    dy = (int)(cerY + (radius - soildLenght + 2) * Math.Sin(rad));
                }

                 //繪制刻度線
                gp.DrawLine(linePen, new Point(px, py), new Point(dx, dy));
                sp += span;
                sweepShot += 9;
            }
        }
        //畫中間的點
        private void drawPoint(Graphics gp)
        {
            Pen p = new Pen(_frameColor);
            int tmpWidth = 6;
            int px = _diameter / 2 - tmpWidth;

            gp.DrawEllipse(p, new Rectangle(px, px, 2 * tmpWidth, 2 * tmpWidth));

            //在畫點時，我使用了指針的顏色，這樣看起來，更真實一點
            gp.FillEllipse(new SolidBrush(_pinColor), new Rectangle(px + 2, px + 2, 2 * tmpWidth - 4, 2 * tmpWidth - 4));
        }

-------------------------------------------

畫指針

繪制指正時，最大的問題就是界面閃速，除了在控件構造方法里添加如下代碼：

        SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw | ControlStyles.AllPaintingInWmPaint, true);
        UpdateStyles();

繪制方式也需要調整，方法如下：

 

  //為了方式繪制指針時產生的閃爍，PictureBox添加該事件方法 

        private void pic_Paint(object sender, PaintEventArgs e)
        {
              DrawForeImg(e.Graphics);
       }

      //使用方法

         public double ChangeValue
        {
            get { return _changeValue; }
            set
            {
                if (value <= _maxValue)
                    _changeValue = value;
                else
                {
                    //完成自適應性
                    MaxValue = value;
                    _changeValue = value;
                }
               //通過該方法，可以使指針自動繪制（其實就是強制重繪）

               pic.Invalidate();
            }
        }

        //指針的具體畫法  

        private void DrawForeImg(Graphics gp)
        {
            Bitmap bit = new Bitmap(this.Width, this.Height);
            Graphics g = Graphics.FromImage(bit);
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            //畫針
            DrawPin(g);
            DrawString(g);

            //注意此處的繪制方式，這樣可以有效減少界面的閃爍問題。
            gp.DrawImage(bit, new Point(0, 0));
            g.Dispose();

        }
        //畫針
        private void DrawPin(Graphics g)
        {
            int cer = _diameter / 2;
            float start = 135;
            float sweepShot = (float)(_changeValue / _maxValue * 270);

            Pen linePen = new Pen(_pinColor, 1);
            Pen NxPen = new Pen(_pinColor, 2);
            Pen xPen = new Pen(_pinColor, 5);
            double rad = (sweepShot + start) * Math.PI / 180;
            float radius = _diameter / 2 - 5;
            int dx = (int)(cer + (_PinLen) * Math.Cos(rad));
            int dy = (int)(cer + (_PinLen) * Math.Sin(rad));

            int px = (int)(cer + (_PinLen * 0.4) * Math.Cos(rad));
            int py = (int)(cer + (_PinLen * 0.4) * Math.Sin(rad));

            int nx = (int)(cer - (NxPinLen) * Math.Sin(rad));
            int ny = (int)(cer - (NxPinLen) * Math.Cos(rad));
            g.DrawLine(linePen, new Point(cer, cer), new Point(dx, dy));
            g.DrawLine(NxPen, new Point(cer, cer), new Point(px, py));
            g.DrawLine(xPen, new Point(cer, cer), new Point(ny, nx));
        }

       //繪制在儀表下面的值

        private void DrawString(Graphics g)
        {
            int cer = _diameter / 2;
            string str = _changeValue.ToString("F2");
            g.DrawString(str, new Font("宋體", 9), new SolidBrush(_pinColor), new PointF(cer, (float)(cer + cer * 0.4)), strFormat);
        }