首先來個金屬儀表盤圖
![]()
金屬儀表盤、車載儀表盤 源代碼下載
純代碼實現GDI繪制儀表盤，效果在代碼下面。
public partial class HalfDashboardUc : UserControl { /// <summary> /// 儀表盤背景圖片 /// </summary> private Image dashboardImage; /// <summary> /// 定義該儀表盤畫布的最大值為371 /// </summary> private int maxSize = 371; /// <summary> /// 儀表盤畫布的放大倍數，默認1 /// </summary> private float multiple = 1; /// <summary> /// 定義該儀表盤的直徑大小 /// </summary> private float diameter; /// <summary> /// 每個間隔值 /// </summary> private int intervalValue; /// <summary> /// 儀表盤顯示的最小值，默認為0 /// </summary> private float minValue = 0; /// <summary> /// 儀表盤顯示的最小值 /// </summary> [Category("wyl")] [Description("儀表盤顯示的最小值")] public float MinValue { get { return minValue; } set { if (value >= MaxValue) { MessageBox.Show("最小值不能超過最大值！", "警告", MessageBoxButtons.OK, MessageBoxIcon.Warning); minValue = 0; } else { minValue = value; //drawBackImage(); } } } /// <summary> /// 儀表盤上顯示的最大值，默認123。 /// </summary> private float maxValue = 123; /// <summary> /// 儀表盤上顯示的最大值 /// </summary> [Category("wyl")] [Description("儀表盤上顯示的最大值")] public float MaxValue { get { return maxValue; } set { if (value <= MinValue) { MessageBox.Show("最大值不能低于最小值！", "警告", MessageBoxButtons.OK, MessageBoxIcon.Warning); maxValue = 123; } else { maxValue = value; //drawBackImage(); } } } // <summary> /// 儀表盤變換的值,默認為0； /// </summary> private float changeValue = 0; /// <summary> /// 儀表盤變換的值 /// </summary> public float ChangeValue { get { return changeValue; } set { changeValue = value; } } /// <summary> /// 指針顏色 /// </summary> private Color pinColor = Color.FromArgb(191, 148, 28); public Color PinColor { get { return pinColor; } set { pinColor = value; } } public HalfDashboardUc() { InitializeComponent(); //雙緩存防止屏幕抖動 this.SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.AllPaintingInWmPaint | ControlStyles.DoubleBuffer, true); this.SetStyle(ControlStyles.UserPaint, true); this.UpdateStyles(); //設置背景顏色為透明 this.BackColor = Color.Transparent; } //private int uintfontsize = 40; /// <summary> /// 初始化儀表盤畫布 /// </summary> private void InitialCanvas() { //對比控件的長高，以最小值為儀表盤的半徑 if (this.Width > 2 * this.Height) { diameter = 2 * this.Height - 15; } else { diameter = this.Width - 15; } multiple = (float)diameter / maxSize;//計算儀表盤放大倍數 //如果半徑大于儀表盤的最大值，則設定放大倍數為默認值 if (multiple > 1) { multiple = 1; diameter = maxSize; } intervalValue = (int)((MaxValue - minValue) / 3);//計算每個間隔之間的值 } /// <summary> /// 畫底圖 /// </summary> private void drawBackImage() { Bitmap bit = new Bitmap(this.Width, this.Height); Graphics gp = Graphics.FromImage(bit); gp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; float radius = diameter / 2;//半徑 float cerX = this.Width / 2; float cerY = this.Height / 2 + radius / 2 - 10 * multiple; //float cerY = this.Height - 20 ; gp.TranslateTransform(cerX, cerY);//以中心點為畫布的起始點 //gp.DrawPie(new Pen(new SolidBrush(Color.FromArgb(19,20,25)),3), -radius, -radius, diameter, diameter, 175, 190); gp.DrawArc(new Pen(new SolidBrush(Color.FromArgb(19, 20, 25)), 3), -radius, -radius, diameter, diameter, 175, 190); float x1 = (float)((radius) * Math.Cos(175 * Math.PI / 180)); float y1 = (float)((radius) * Math.Sin(175 * Math.PI / 180)); float x2 = (float)((radius) * Math.Cos(5 * Math.PI / 180)); float y2 = (float)((radius) * Math.Sin(5 * Math.PI / 180)); gp.DrawLine(new Pen(new SolidBrush(Color.FromArgb(19, 20, 25)), 3), x1, y1, x2, y2); //gp.DrawEllipse(new Pen(Brushes.Red), -5, -5, 10, 10); float startRad = 180;//起始角度 float sweepShot = 0;//旋轉角度 //gp.DrawLine(new Pen(Brushes.Red), -radius, 0, -(radius - 10), 0); for (int i = 0; i <= 30; i++) { double rad = (sweepShot + startRad) * Math.PI / 180; if (i % 5 == 0) { float px1 = (float)((radius - 5 ) * Math.Cos(rad)); float py1 = (float)((radius - 5 ) * Math.Sin(rad)); float px2 = (float)((radius - 15) * Math.Cos(rad)); float py2 = (float)((radius - 15) * Math.Sin(rad)); gp.DrawLine(new Pen(new SolidBrush(Color.FromArgb(122, 179, 222)), 2), px1, py1, px2, py2); } else { float px1 = (float)((radius - 5 ) * Math.Cos(rad)); float py1 = (float)((radius - 5 ) * Math.Sin(rad)); float px2 = (float)((radius - 10 ) * Math.Cos(rad)); float py2 = (float)((radius - 10 ) * Math.Sin(rad)); gp.DrawLine(new Pen(new SolidBrush(Color.FromArgb(77, 88, 124)), 1), px1, py1, px2, py2); } sweepShot += 6; } //刻度字體 Font scaleFont = new Font("宋體", 9, FontStyle.Bold); startRad = 270;//起始角度 sweepShot = 0;//旋轉角度 Color c1 = Color.FromArgb(0, 192, 0); for (int i = 0; i < 4; i++) { int tempValue = i * intervalValue; SizeF tempSf = gp.MeasureString(tempValue.ToString(), scaleFont); //計算角度值 double rad = (sweepShot + startRad) * Math.PI / 180; float px = (float)((radius - 18) * Math.Cos(rad)); float py = (float)((radius - 18) * Math.Sin(rad)); if (sweepShot == 0) { gp.DrawString(tempValue.ToString(), scaleFont, Brushes.Wheat, px - tempSf.Width / 2, py); } else if (sweepShot == 30) { gp.DrawString(tempValue.ToString(), scaleFont, new SolidBrush(c1), px - tempSf.Width + 5 * multiple, py - tempSf.Height / 2 + 10 * multiple); } else if (sweepShot == 60) { gp.DrawString(tempValue.ToString(), scaleFont, new SolidBrush(c1), px - tempSf.Width, py - tempSf.Height / 2 + 5 * multiple); } else if (sweepShot == 90) { gp.DrawString(tempValue.ToString(), scaleFont, new SolidBrush(c1), px - tempSf.Width, py - tempSf.Height / 2); } //else if (sweepShot == 120) //{ // gp.DrawString(tempValue.ToString(), scaleFont, new SolidBrush(c1), px - tempSf.Width, py - tempSf.Height / 2); //} sweepShot += 30; } startRad = 270;//起始角度 sweepShot = 0;//旋轉角度 for (int i = 0; i < 4; i++) { int tempValue = -i * intervalValue; SizeF tempSf = gp.MeasureString(tempValue.ToString(), scaleFont); //計算角度值 double rad = (sweepShot + startRad) * Math.PI / 180; float px = (float)((radius - 18 * multiple) * Math.Cos(rad)); float py = (float)((radius - 18 * multiple) * Math.Sin(rad)); if (sweepShot == -30) { gp.DrawString(tempValue.ToString(), scaleFont, Brushes.Red, px, py + tempSf.Height / 2); } else if (sweepShot == -60) { gp.DrawString(tempValue.ToString(), scaleFont, Brushes.Red, px + tempSf.Width / 2 - 10 * multiple, py + tempSf.Height / 2 - 5 * multiple); } else if (sweepShot == -90) { gp.DrawString(tempValue.ToString(), scaleFont, Brushes.Red, px + tempSf.Width/2 , py - tempSf.Height / 2); } sweepShot -= 30; } gp.Dispose(); this.BackgroundImage = bit; } /// <summary> /// 畫圖 /// </summary> /// <param name="g"></param> private void DrawPin(Graphics g) { Bitmap bit = new Bitmap(this.Width, this.Height); Graphics gp = Graphics.FromImage(bit); gp.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; float radius = diameter / 2;//半徑 float startRad = 270;//起始角度 float sweepShot = (float)(ChangeValue / MaxValue * 90);//旋轉角度 float cerX = this.Width / 2; float cerY = this.Height / 2 + radius / 2 - 10 * multiple; gp.TranslateTransform(cerX, cerY);//以中心點為畫布的起始點 //gp.DrawEllipse(new Pen(PinColor, 1), -5, -5, 10, 10);//畫中心圓圈 double rad = (sweepShot + startRad) * Math.PI / 180;//計算角度 float px = (float)((radius - 15) * Math.Cos(rad)); float py = (float)((radius - 15) * Math.Sin(rad)); PointF[] pf = new PointF[] { new PointF(0, -radius + 15), new PointF(-4, 0), new PointF(4, 0) }; gp.RotateTransform(sweepShot); //PointF[] pf = new PointF[] { new PointF(px, py), new PointF(-4, 0), new PointF(4, 0) }; gp.FillPolygon(new SolidBrush(PinColor), pf); //gp.DrawLine(new Pen(new SolidBrush(PinColor), 3f), 0, 0, px, py); g.DrawImage(bit, 0, 0); gp.Dispose(); } private void HalfDashboardUc_Load(object sender, EventArgs e) { InitialCanvas(); drawBackImage(); } private void HalfDashboardUc_Paint(object sender, PaintEventArgs e) { DrawPin(e.Graphics); } private void HalfDashboardUc_Resize(object sender, EventArgs e) { InitialCanvas(); drawBackImage(); } }
效果實現如下：
金屬儀表盤下載地址 https://pan.baidu.com/s/1xANmSkQYnLGzUJ_X8Dbg0w 提取碼：fi96
浙公網安備 33010602011771號