C#自定义控件—流动管道

我是阳光的菠菜

C#用户控件之流动管道

如何绘制一个动态的流动管道（FlowPipe）？

分两步绘制

• 定义属性；
  
• 画布重绘；
  

主要技能：

• 管道的绘制（渐变色矩形）
  

1.   /// <summary>
2.   /// 画渐变色矩形的方法
3.   /// </summary>
4.   /// <param name="g">画布</param>
5.   /// <param name="brush">画刷</param>
6.   /// <param name="pen">笔</param>
7.   /// <param name="rectangle">矩形</param>
8.   private void PaintRectangle(Graphics g, Brush brush, Pen pen, Rectangle rectangle)
9.   {
10.       //填充矩形
11.       g.FillRectangle(brush, rectangle);
13.       switch (this.pipeStyle)
14.       {
15.           case PipeStyle.Horizontal:
16.               g.DrawLine(pen, rectangle.X, rectangle.Y, rectangle.X + rectangle.Width, rectangle.Y);
17.               g.DrawLine(pen, rectangle.X, rectangle.Y + rectangle.Height - 1, rectangle.X + rectangle.Width, rectangle.Height);
18.               break;
19.           case PipeStyle.Vertical:
20.               g.DrawLine(pen, rectangle.X, rectangle.Y, rectangle.X, rectangle.Y + rectangle.Height);
21.               g.DrawLine(pen, rectangle.X + rectangle.Width - 1, rectangle.Y, rectangle.X + rectangle.Width - 1, rectangle.Height);
22.               break;
23.           default:
24.               break;
25.       }
26.   }

复制代码

• 管道的绘制（渐变色半圆）
  

1. /// <summary>
2. /// 画渐变色半圆的方法
3. /// </summary>
4. /// <param name="g">画布</param>
5. /// <param name="colorBlend"></param>
6. /// <param name="p"></param>
7. /// <param name="rect"></param>
8. /// <param name="startAngle"></param>
9. /// <param name="sweepAngle"></param>
10. private void PaintEllipse(Graphics g, ColorBlend colorBlend, Pen p, Rectangle rect, float startAngle, float sweepAngle)
11. {
12.     //第一步：创建GPI路径
13.     GraphicsPath path = new GraphicsPath();
14.     path.AddEllipse(rect);
16.     //第二步：渐变色填充
17.     PathGradientBrush brush = new PathGradientBrush(path);
18.     brush.CenterPoint = new Point(rect.X + rect.Width / 2, rect.Y + rect.Height / 2);
19.     brush.InterpolationColors = colorBlend;
21.     //第三步：绘制管道
22.     g.FillPie(brush, rect, startAngle, sweepAngle);
24.     //第四步：绘制边线
25.     g.DrawArc(p, rect, startAngle, sweepAngle);
26. }

复制代码

• 流动条的绘制（用笔的虚线）
  

1. //画虚线，关键用笔和路径来画
2. Pen pen = new Pen(this.flowColor, this.flowWidth);
3. pen.DashStyle = DashStyle.Custom;
4. pen.DashPattern = new float[]
5. {
6.     flowLength,flowLengthGap
7. };
8. pen.DashOffset = this.startOffset;
9. g.DrawPath(pen, path);
11. //流动条路径
12. GraphicsPath path = new GraphicsPath();
14. //虚线路径—左边、中间、右边
15. switch (this.pipeTurnLeft)
16. {
17.      case PipeTurn.Up:
18.          path.AddArc(new Rectangle(this.Height / 2, this.Height / 2 * (-1) -1, this.Height, this.Height), 181.0f, -91.0f);
19.          break;
20.      case PipeTurn.Down:
21.          path.AddArc(new Rectangle(this.Height / 2, this.Height / 2, this.Height, this.Height), 180.0f, 90.0f);
22.          break;
23.      default:
24.          path.AddLine(-1, this.Height / 2, this.Height+1, this.Height / 2);
25.          break;
26. }

复制代码

• 关键理解：绘制的椭圆、线（Rectangle）理解了就好画了
  path.AddArc(new Rectangle(this.Height / 2, this.Height / 2, this.Height, this.Height), 180.0f, 90.0f);
  path.AddLine(-1, this.Height / 2, this.Height+1, this.Height / 2);
  
• 可以流动的关键要素
  

1.      //流动条流动速度（刷新速度）
2.      this.myTimer = new Timer();
3.      myTimer.Interval = 50;
4.      this.myTimer.Tick += MyTimer_Tick; ;
6. }
8. #region 定时循环
9. private void MyTimer_Tick(object sender, EventArgs e)
10. {
11.      this.startOffset = this.startOffset - this.moveSpeed;
13.      if (this.startOffset > this.flowLength + this.flowLengthGap || this.startOffset < (this.flowLength + this.flowLengthGap) * (-1))
14.      { this.startOffset = 0; }
15.      this.Invalidate();
16. }
18. #endregion

复制代码

1.定义属性

• 管道的（两端转向、样式、边沿颜色、中间颜色、激活）
  
• 流动条的（速度、长度、宽度、间隙、颜色）
  

1. //属性示例：按照示例添加以上各种属性
2. private float moveSpeed = 0.3f;
3. [Browsable(true)]
4. [Category("布局_G")]
5. [Description("流动条速度，负数为反向")]  //属性说明
6. public float MoveSpeed
7. {
8.     get { return moveSpeed; }
9.     set
10.     {
11.         this.moveSpeed = value;
12.         this.Invalidate();  //重绘
13.     }
14. }

复制代码

2.画布重绘

1. 【管道分为左、中、右三部分。先画管道（矩形）：左、中、右；再画流动条（虚线）：左、中、右】
2. //矩形画刷
3. LinearGradientBrush linearGradientBrush = new LinearGradientBrush(new Point(0, 0), new Point(0, this.Height), pipeColorEdge, pipeColorEdge);
4. linearGradientBrush.InterpolationColors = colorBlend;
6. //绘制左部分
7. switch (this.pipeTurnLeft)
8. {
9.     case PipeTurn.Up:
10.         this.PaintEllipse(g, colorBlend, p, new Rectangle(0, this.Height * (-1)-1, this.Height * 2, this.Height * 2), 90.0f, 90.0f);
11.         break;
12.     case PipeTurn.Down:
13.         this.PaintEllipse(g, colorBlend, p, new Rectangle(0, 0, this.Height * 2, this.Height * 2), 180.0f, 90.0f);
14.         break;
15.     default:
16.         this.PaintRectangle(g, linearGradientBrush, p, new Rectangle(-1, 0, this.Height+1, this.Height));
17.         break;
18. }
20. //绘制右部分
21. switch (this.pipeTurnRight)
22. {
23.     case PipeTurn.Up:
24.         this.PaintEllipse(g, colorBlend, p, new Rectangle(this.Width - this.Height * 2, this.Height * (-1)-1, this.Height * 2, this.Height * 2), 0.0f, 90.0f);
25.         break;
26.     case PipeTurn.Down:
27.         this.PaintEllipse(g, colorBlend, p, new Rectangle(this.Width - this.Height * 2, 0, this.Height * 2, this.Height * 2), 270.0f, 90.0f);
28.         break;
29.     default:
30.         this.PaintRectangle(g, linearGradientBrush, p, new Rectangle(this.Width - this.Height, 0, this.Height, this.Height));
31.         break;
32. }
34. //绘制中间
35. if (this.Width > this.Height * 2)
36. {
37.     this.PaintRectangle(g, linearGradientBrush, p, new Rectangle(this.Height - 1, 0, this.Width - this.Height * 2 + 2, this.Height));
38. }

复制代码

1. //流动条路径
2. GraphicsPath path = new GraphicsPath();
4. //虚线路径—左边
5. switch (this.pipeTurnLeft)
6. {
7.     case PipeTurn.Up:
8.         path.AddArc(new Rectangle(this.Height / 2, this.Height / 2 * (-1) -1, this.Height, this.Height), 181.0f, -91.0f);
9.         break;
10.     case PipeTurn.Down:
11.         path.AddArc(new Rectangle(this.Height / 2, this.Height / 2, this.Height, this.Height), 180.0f, 90.0f);
12.         break;
13.     default:
14.         path.AddLine(-1, this.Height / 2, this.Height+1, this.Height / 2);
15.         break;
16. }
18. //虚线路径—中间
19. if (this.Width > this.Height * 2)
20. {
21.     path.AddLine(this.Height, this.Height / 2, this.Width - this.Height -1, this.Height / 2);
22. }
24. //虚线路径—右边
25. switch (this.pipeTurnRight)
26. {
27.     case PipeTurn.Up:
28.         path.AddArc(new Rectangle(this.Width - 1 - this.Height * 3 / 2, -this.Height / 2-1 , this.Height, this.Height), 88f, -91.0f);
29.         break;
30.     case PipeTurn.Down:
31.         path.AddArc(new Rectangle(this.Width - 1 - this.Height * 3 / 2, this.Height / 2, this.Height, this.Height), 270.0f, 90.0f);
32.         break;
33.     default:
34.         path.AddLine(this.Width - this.Height, this.Height / 2, this.Width , this.Height / 2);
35.         break;
36. }
38. //画虚线，关键用笔和路径来
39. Pen pen = new Pen(this.flowColor, this.flowWidth);
40. pen.DashStyle = DashStyle.Custom;
41. pen.DashPattern = new float[]
42. {
43.     flowLength,flowLengthGap
44. };
45. pen.DashOffset = this.startOffset;
46. g.DrawPath(pen, path);

复制代码

格式都是一样的，掌握关键代码，肝就对了。
End


来源:https://www.cnblogs.com/guoenshuo/p/18391637
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！