【流程图】在 .NET (WPF 或 WinForms) 中实现流程图中的连线算法

在 .NET (WPF 或 WinForms) 中实现流程图中的连线算法,通常涉及 图形绘制路径计算 。常见的连线方式包括 直线折线贝塞尔曲线。以下是几种方法的介绍和示例代码。


1. 直线连接(最简单)

适用场景

  • 两个节点之间没有障碍物时,最简单的方式。

计算方式

  • 直接用起点 (x1, y1) 和终点 (x2, y2) 画一条直线。

WPF 示例代码

xml 复制代码
<Canvas x:Name="canvas" Background="White">
    <Line X1="100" Y1="100" X2="300" Y2="200"
          Stroke="Black" StrokeThickness="2"/>
</Canvas>

2. 折线连接(适用于流程图)

适用场景

  • 流程图、状态机 这类需要避开障碍的情况。

计算方式

  • 如果两个点在水平方向或垂直方向对齐,直接连线。
  • 否则,使用水平-垂直垂直-水平折线路径。

算法步骤

  1. 确定起点 (x1, y1) 和终点 (x2, y2)
  2. 选择折线拐点:
    • 中间点1 = (x1, y1 + Δy)
    • 中间点2 = (x2, y1 + Δy)

WPF 示例代码

xml 复制代码
<Canvas x:Name="canvas" Background="White">
    <Polyline Stroke="Black" StrokeThickness="2"
              Points="100,100 100,200 300,200"/>
</Canvas>

C# 代码动态生成折线

csharp 复制代码
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;

public void DrawPolyline(Canvas canvas, Point start, Point end)
{
    Polyline polyline = new Polyline
    {
        Stroke = Brushes.Black,
        StrokeThickness = 2
    };

    // 计算拐点
    Point mid1 = new Point(start.X, (start.Y + end.Y) / 2);
    Point mid2 = new Point(end.X, (start.Y + end.Y) / 2);

    polyline.Points.Add(start);
    polyline.Points.Add(mid1);
    polyline.Points.Add(mid2);
    polyline.Points.Add(end);

    canvas.Children.Add(polyline);
}

3. 贝塞尔曲线连接(更平滑)

适用场景

  • 逻辑图、网络关系图、UML 图 ,需要平滑曲线的情况。

计算方式

  • 使用 三次贝塞尔曲线 (Cubic Bezier Curve)
    • 起点 (x1, y1)
    • 终点 (x2, y2)
    • 两个控制点 (cx1, cy1)(cx2, cy2)

算法步骤

  1. 计算控制点:
    • cx1 = x1 + Δx / 2
    • cy1 = y1
    • cx2 = x2 - Δx / 2
    • cy2 = y2
  2. 使用 Path + BezierSegment 进行绘制。

WPF 示例代码

xml 复制代码
<Path Stroke="Black" StrokeThickness="2">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="100,100">
                <BezierSegment Point1="150,100" Point2="250,200" Point3="300,200"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

C# 代码动态生成

csharp 复制代码
using System.Windows;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Media;

public void DrawBezier(Canvas canvas, Point start, Point end)
{
    Path path = new Path
    {
        Stroke = Brushes.Black,
        StrokeThickness = 2
    };

    PathGeometry geometry = new PathGeometry();
    PathFigure figure = new PathFigure { StartPoint = start };
    
    BezierSegment bezier = new BezierSegment
    {
        Point1 = new Point(start.X + (end.X - start.X) / 2, start.Y),
        Point2 = new Point(end.X - (end.X - start.X) / 2, end.Y),
        Point3 = end
    };

    figure.Segments.Add(bezier);
    geometry.Figures.Add(figure);
    path.Data = geometry;

    canvas.Children.Add(path);
}

4. 避障碍物的连线(A*路径算法)

适用场景

  • 复杂流程图、管道布线、自动路径计算
  • 遇到障碍物时,需要智能避开

算法思路

  1. 建模:将整个画布视为网格(如 10×10 的小方块)。
  2. 路径计算
    • 使用 A 搜索算法 * 找到起点到终点的最短路径
    • 允许横向、纵向移动,但不能穿过障碍物
  3. 连线方式
    • 根据 A* 计算出的路径,在网格点之间绘制折线。

C# 实现思路

csharp 复制代码
public List<Point> AStarFindPath(Point start, Point end, List<Rect> obstacles)
{
    // 使用 A* 寻路算法,返回经过的路径点
    // 省略 A* 具体实现,可使用 AStarSharp 库
    return new List<Point> { start, new Point(200, 150), end };
}

public void DrawPath(Canvas canvas, Point start, Point end, List<Rect> obstacles)
{
    List<Point> path = AStarFindPath(start, end, obstacles);

    Polyline polyline = new Polyline
    {
        Stroke = Brushes.Black,
        StrokeThickness = 2
    };
    foreach (var point in path)
        polyline.Points.Add(point);

    canvas.Children.Add(polyline);
}

总结

方法 适用场景 优点 缺点
直线连接 简单流程图 计算简单,性能高 不能避开障碍物
折线连接 业务流程图、状态图 适应复杂布局,易控制 可能需要手动计算拐点
贝塞尔曲线 关系图、UML 平滑美观,减少交叉 控制点计算较复杂
A 避障路径* 复杂流程、自动布线 自动选择最优路径 计算复杂,性能开销大

如果你的流程图 节点不会重叠 ,可以用 折线贝塞尔曲线

如果有 障碍物 ,建议使用 A 算法* 计算路径。

你打算在哪种场景下使用?

相关推荐
时光追逐者14 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
huizhixue-IT14 小时前
华为存储考试内容&HCIP-Storage
wpf
三天不学习16 小时前
Lucene.Net FSDirectory 和 RAMDirectory 的区别和用法 【搜索引擎系列教程】
搜索引擎·.net·lucene
爱吃奶酪的松鼠丶1 天前
.net GRPC服务搭建,跨进程调用。C#应用和Python应用之间的通信。
python·c#·.net
S3下载站1 天前
Microsoft .NET Framework 4.8 离线安装包 下载
microsoft·.net
桂月二二1 天前
实时事件流处理架构的容错设计
架构·wpf
AI.NET 极客圈1 天前
AI与.NET技术实操系列(四):使用 Semantic Kernel 和 DeepSeek 构建AI应用
人工智能·.net
源之缘-OFD先行者1 天前
GMap.NET + WPF:构建高性能 ADS-B 航空器追踪平台
.net·wpf·ads-b
Marzlam1 天前
WPF学习路线
wpf