C#实现Visio风格图形拖拽：状态机驱动的图形系统设计

简介本资源是一套基于C# Windows Forms实现的轻量级图形化拖拽开发示例面向GUI初学者、OA系统开发者及流程图工具学习者解决在桌面应用中构建可交互节点与动态连线的核心需求。项目完整实现了类似Visio的节点拖拽、连接线实时跟随、自定义图形如RectangleNode与接口抽象INode/ILine涵盖从Panel绘图区域搭建、鼠标事件处理、双缓冲防闪烁到线条位置自动更新的全流程实践。压缩包共44个文件含16个核心C#源码如VisioControl.cs、Form1.resx、Program.cs、3个可执行exe、6个依赖dll及项目配置文件.sln/.csproj/.settings总大小329KB结构清晰开箱即用。目前已有1704人学习下载读者可直接运行调试、理解拖拽状态管理逻辑、复用INode/ILine接口设计思想并基于现有代码快速扩展旋转、缩放或多种连接线样式等进阶功能。1. C# 类似Visio图形拖拽实现不是画布控件堆砌而是状态机驱动的交互闭环你有没有试过在 WinForm 或 WPF 里放一个 Panel再往里面Controls.Add(new PictureBox())然后监听MouseDown/MouseMove去手动算坐标、改Location结果是拖动卡顿、缩放后偏移、多选框拉不正、连接线粘不住节点、一加滚动条就全乱套——这根本不是 Visio 那种“所见即所得”的拖拽体验只是个会动的贴图。C# 类似Visio图形拖拽实现本质不是“让控件动起来”而是构建一套可预测、可撤销、可扩展的状态驱动图形系统每个图形是带语义的数据对象不是 UI 控件拖拽是状态变更事件不是像素位移渲染与交互解耦缩放/平移/选择/连接全部由统一坐标系和命中检测支撑。它适合正在开发工业组态软件、流程建模工具、网络拓扑编辑器或低代码画布的 C# 开发者尤其当你已踩过“用 PictureBox 模拟节点”“用 LineShape 连线”这类坑开始意识到UI 控件即数据模型这条路走到最后只能重写。下面我带你从零搭起这个闭环——不用第三方库纯 .NET 原生WinForm 和 WPF 双路径可复用核心逻辑。2. 图形模型设计用可序列化的 ShapeBase 统一所有图形语义Visio 的核心不是“画什么”而是“它是什么”。一个矩形可能是“服务器”一条线可能是“TCP 连接”它们有类型、ID、属性、连接点。若直接用Control或UIElement承载业务逻辑很快会陷入“改一个样式要遍历所有子控件”“保存时还得反向提取属性”的泥潭。正确做法是先定义图形数据模型再决定怎么渲染它。2.1 ShapeBase所有图形的基类只存数据不碰 UIpublic abstract class ShapeBase : INotifyPropertyChanged, ICloneable { public Guid Id { get; set; } Guid.NewGuid(); public string Name { get; set; } NewShape; public double X { get; set; } 0; public double Y { get; set; } 0; public double Width { get; set; } 100; public double Height { get; set; } 60; public double Rotation { get; set; } 0; // 支持旋转 public bool IsSelected { get; set; } public ListConnectionPoint ConnectionPoints { get; set; } new(); // 用于序列化/反序列化不依赖 UI 层 public virtual Dictionarystring, object ToDictionary() { return new Dictionarystring, object { [Id] Id.ToString(), [Name] Name, [X] X, [Y] Y, [Width] Width, [Height] Height, [Rotation] Rotation, [Type] this.GetType().Name }; } public virtual void FromDictionary(Dictionarystring, object dict) { if (dict.TryGetValue(Id, out var idObj)) Id Guid.Parse(idObj.ToString()); if (dict.TryGetValue(Name, out var nameObj)) Name nameObj.ToString(); if (dict.TryGetValue(X, out var xObj)) X Convert.ToDouble(xObj); if (dict.TryGetValue(Y, out var yObj)) Y Convert.ToDouble(yObj); if (dict.TryGetValue(Width, out var wObj)) Width Convert.ToDouble(wObj); if (dict.TryGetValue(Height, out var hObj)) Height Convert.ToDouble(hObj); if (dict.TryGetValue(Rotation, out var rObj)) Rotation Convert.ToDouble(rObj); } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } public virtual object Clone() MemberwiseClone(); }提示ShapeBase不继承任何 UI 类型不引用System.Drawing或System.Windows.Media。它只负责描述“图形长什么样、在哪、连着谁”。这样做的好处是导出 JSON 时直接JsonSerializer.Serialize(shapes)做 Undo/Redo 时只需深拷贝ShapeBase实例切换到 WPF 渲染时模型层完全不动。2.2 具体图形实现RectangleShape、LineShape 与 ConnectionPointVisio 风格的关键在于“连接点”Connection Point——不是随便在线上点一下就连线而是图形预设 48 个锚点如顶部中点、右部中点连线只能吸附到这些点上。我们用ConnectionPoint结构体封装public struct ConnectionPoint { public string Name { get; set; } // Top, Right, Bottom, Left public double OffsetX { get; set; } // 相对图形左上角的 X 偏移0~1 public double OffsetY { get; set; } // 相对图形左上角的 Y 偏移0~1 public bool IsInput { get; set; } // 是否允许被其他图形连接入端口 public bool IsOutput { get; set; } // 是否允许连接到其他图形出端口 public Point GetAbsolutePosition(ShapeBase shape) { return new Point( shape.X shape.Width * OffsetX, shape.Y shape.Height * OffsetY ); } }然后实现具体图形。以RectangleShape为例它在构造时自动注册 4 个标准连接点public class RectangleShape : ShapeBase { public RectangleShape() { // 标准四向连接点 ConnectionPoints.Add(new ConnectionPoint { Name Top, OffsetX 0.5, OffsetY 0, IsInput true, IsOutput true }); ConnectionPoints.Add(new ConnectionPoint { Name Right, OffsetX 1, OffsetY 0.5, IsInput true, IsOutput true }); ConnectionPoints.Add(new ConnectionPoint { Name Bottom, OffsetX 0.5, OffsetY 1, IsInput true, IsOutput true }); ConnectionPoints.Add(new ConnectionPoint { Name Left, OffsetX 0, OffsetY 0.5, IsInput true, IsOutput true }); } public override Dictionarystring, object ToDictionary() { var dict base.ToDictionary(); dict[Type] RectangleShape; return dict; } }而LineShape则不同它没有宽高只有起点和终点两个ConnectionPoint引用且必须绑定到两个ShapeBase实例上public class LineShape : ShapeBase { public Guid SourceShapeId { get; set; } public string SourcePointName { get; set; } // 如 Right public Guid TargetShapeId { get; set; } public string TargetPointName { get; set; } // 如 Left // 运行时计算的绝对坐标用于渲染 public Point StartPoint { get; set; } public Point EndPoint { get; set; } public override Dictionarystring, object ToDictionary() { var dict base.ToDictionary(); dict[Type] LineShape; dict[SourceShapeId] SourceShapeId.ToString(); dict[SourcePointName] SourcePointName; dict[TargetShapeId] TargetShapeId.ToString(); dict[TargetPointName] TargetPointName; return dict; } public override void FromDictionary(Dictionarystring, object dict) { base.FromDictionary(dict); if (dict.TryGetValue(SourceShapeId, out var srcId)) SourceShapeId Guid.Parse(srcId.ToString()); if (dict.TryGetValue(SourcePointName, out var srcName)) SourcePointName srcName.ToString(); if (dict.TryGetValue(TargetShapeId, out var tgtId)) TargetShapeId Guid.Parse(tgtId.ToString()); if (dict.TryGetValue(TargetPointName, out var tgtName)) TargetPointName tgtName.ToString(); } }参数说明LineShape不存StartPoint/EndPoint到序列化数据中因为它们是派生值由SourceShapeIdSourcePointName动态计算。这避免了数据不一致——比如你移动了源图形但忘了更新StartPoint连线就飞走了。每次渲染前调用UpdateEndPoints()即可重新计算。2.3 图形容器ShapeCollection 管理生命周期与批量操作不能让每个ShapeBase孤立存在。我们需要一个容器支持添加、删除、按 ZOrder 排序、批量选中、范围查询public class ShapeCollection : ObservableCollectionShapeBase { private readonly ListLineShape _lines new(); public void AddShape(ShapeBase shape) { if (shape is LineShape line) { _lines.Add(line); } else { Add(shape); } } public void RemoveShape(ShapeBase shape) { if (shape is LineShape line) { _lines.Remove(line); } else { Remove(shape); } } // 按屏幕坐标范围查找图形用于框选 public IEnumerableShapeBase HitTest(RectangleF bounds, FuncShapeBase, bool filter null) { var results new ListShapeBase(); foreach (var shape in this) { if (filter ! null !filter(shape)) continue; var rect new RectangleF((float)shape.X, (float)shape.Y, (float)shape.Width, (float)shape.Height); if (bounds.IntersectsWith(rect)) results.Add(shape); } return results; } // 更新所有连线的起点/终点当任意图形移动后调用 public void UpdateAllLineEndpoints() { foreach (var line in _lines) { var source this.FirstOrDefault(s s.Id line.SourceShapeId); var target this.FirstOrDefault(s s.Id line.TargetShapeId); if (source ! null target ! null source.ConnectionPoints.Any(p p.Name line.SourcePointName) target.ConnectionPoints.Any(p p.Name line.TargetPointName)) { var srcPt source.ConnectionPoints.First(p p.Name line.SourcePointName) .GetAbsolutePosition(source); var tgtPt target.ConnectionPoints.First(p p.Name line.TargetPointName) .GetAbsolutePosition(target); line.StartPoint srcPt; line.EndPoint tgtPt; } } } }关键设计点ShapeCollection是整个系统的“单一数据源”。所有 UI 层WinForm 的Panel或 WPF 的Canvas都只读取它、响应它的CollectionChanged事件绝不直接操作Controls或Children。这为后续实现 Undo/Redo、协同编辑、实时同步打下基础。3. 渲染引擎双缓冲 Canvas 渲染器与 DPI 感知坐标转换有了模型下一步是“画出来”。Visio 风格的渲染不是简单Graphics.DrawRectangle()它必须支持✅ 缩放Zoom 0.25x ~ 4x✅ 平移Pan 拖动画布✅ DPI 适配4K 屏不模糊✅ 双缓冲防闪烁✅ 连接线箭头、虚线、抗锯齿✅ 选中状态高亮虚线框 控制点3.1 坐标系抽象ViewTransform 封装缩放、平移、DPI所有渲染坐标都必须经过ViewTransform转换。它把“模型坐标”单位逻辑像素转成“设备坐标”单位物理像素public class ViewTransform { public double Scale { get; set; } 1.0; public double OffsetX { get; set; } 0; public double OffsetY { get; set; } 0; public float DpiScaleX { get; set; } 1f; public float DpiScaleY { get; set; } 1f; public PointF ModelToScreen(double x, double y) { return new PointF( (float)((x - OffsetX) * Scale * DpiScaleX), (float)((y - OffsetY) * Scale * DpiScaleY) ); } public RectangleF ModelToScreen(RectangleF rect) { var tl ModelToScreen(rect.Left, rect.Top); var br ModelToScreen(rect.Right, rect.Bottom); return RectangleF.FromLTRB(tl.X, tl.Y, br.X, br.Y); } public Point ScreenToModel(float x, float y) { return new Point( (int)((x / DpiScaleX / Scale) OffsetX), (int)((y / DpiScaleY / Scale) OffsetY) ); } }为什么需要 DPIScaleWindows Forms 在高 DPI 下默认禁用 DPI 感知导致Graphics绘图被系统缩放两次一次 .NET 自动缩放一次 Windows 缩放图形模糊、坐标错乱。DpiScaleX/Y从Graphics.DpiX/DpiY获取用于在ModelToScreen中抵消系统缩放确保 1:1 渲染。3.2 WinForm 渲染器DoubleBufferedCanvasControl继承Panel启用双缓冲并重写OnPaintpublic partial class DoubleBufferedCanvasControl : Panel { private readonly BufferedGraphicsContext _context BufferedGraphicsManager.Current; private BufferedGraphics _buffer; private readonly ViewTransform _viewTransform new(); private readonly ShapeCollection _shapes; public DoubleBufferedCanvasControl(ShapeCollection shapes) { _shapes shapes; SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.ResizeRedraw | ControlStyles.AllPaintingInWmPaint, true); UpdateBufferSize(); } protected override void OnSizeChanged(EventArgs e) { base.OnSizeChanged(e); UpdateBufferSize(); } private void UpdateBufferSize() { _buffer?.Dispose(); _buffer _context.Allocate(CreateGraphics(), ClientRectangle); } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); if (_buffer null) return; // 1. 清空缓冲区 using (var g _buffer.Graphics) { g.Clear(BackColor); // 2. 设置 DPI 感知 g.PageUnit GraphicsUnit.Pixel; g.ResetTransform(); g.ScaleTransform(_viewTransform.DpiScaleX, _viewTransform.DpiScaleY); // 3. 应用视图变换缩放平移 g.ScaleTransform((float)_viewTransform.Scale, (float)_viewTransform.Scale); g.TranslateTransform(-(float)_viewTransform.OffsetX, -(float)_viewTransform.OffsetY); // 4. 渲染所有图形 RenderShapes(g); } // 5. 一次性刷到屏幕 _buffer.Render(e.Graphics); } private void RenderShapes(Graphics g) { // 先画连线底层 foreach (var line in _shapes.OfTypeLineShape()) { using (var pen new Pen(Color.FromArgb(120, 0, 100, 255), 2)) { pen.DashStyle DashStyle.Solid; g.DrawLine(pen, (float)line.StartPoint.X, (float)line.StartPoint.Y, (float)line.EndPoint.X, (float)line.EndPoint.Y); // 绘制箭头简化版末端三角形 DrawArrowHead(g, line.StartPoint, line.EndPoint, pen.Color); } } // 再画图形上层 foreach (var shape in _shapes) { if (shape is RectangleShape rect) { var screenRect _viewTransform.ModelToScreen( new RectangleF((float)rect.X, (float)rect.Y, (float)rect.Width, (float)rect.Height)); using (var brush new SolidBrush(Color.LightBlue)) using (var pen new Pen(shape.IsSelected ? Color.Blue : Color.Black, 2)) { g.FillRectangle(brush, screenRect); g.DrawRectangle(pen, screenRect); // 如果选中绘制连接点小方块 if (shape.IsSelected) { foreach (var cp in shape.ConnectionPoints) { var pt cp.GetAbsolutePosition(shape); var screenPt _viewTransform.ModelToScreen(pt.X, pt.Y); g.FillRectangle(Brushes.Red, screenPt.X - 3, screenPt.Y - 3, 6, 6); } } } } } } private void DrawArrowHead(Graphics g, Point start, Point end, Color color) { var dx end.X - start.X; var dy end.Y - start.Y; var len Math.Sqrt(dx * dx dy * dy); if (len 1) return; var ux dx / len; // unit vector var uy dy / len; var perpX -uy; // perpendicular var perpY ux; var headLen 10f; var headWidth 6f; var p1 new PointF( (float)(end.X - ux * headLen perpX * headWidth), (float)(end.Y - uy * headLen perpY * headWidth) ); var p2 new PointF( (float)end.X, (float)end.Y ); var p3 new PointF( (float)(end.X - ux * headLen - perpX * headWidth), (float)(end.Y - uy * headLen - perpY * headWidth) ); using (var brush new SolidBrush(color)) { g.FillPolygon(brush, new[] { p1, p2, p3 }); } } }逻辑说明DoubleBufferedCanvasControl的核心是“三重变换”①g.ScaleTransform(DpiScaleX, DpiScaleY)—— 抵消系统 DPI 缩放②g.ScaleTransform(Scale, Scale)—— 应用用户缩放③g.TranslateTransform(-OffsetX, -OffsetY)—— 应用平移。所有ShapeBase的X/Y/Width/Height都是逻辑坐标无需在模型层做任何缩放计算。渲染器统一处理干净利落。3.3 WPF 渲染器Canvas DrawingVisual轻量级无控件开销WPF 更推荐用DrawingVisual直接绘图避免UIElement的布局开销public class DrawingCanvas : FrameworkElement { private readonly DrawingVisual _drawingVisual new(); private readonly ViewTransform _viewTransform new(); private readonly ShapeCollection _shapes; public DrawingCanvas(ShapeCollection shapes) { _shapes shapes; AddVisualChild(_drawingVisual); AddLogicalChild(_drawingVisual); } protected override int VisualChildrenCount 1; protected override Visual GetVisualChild(int index) _drawingVisual; protected override void OnRender(DrawingContext drawingContext) { base.OnRender(drawingContext); // 1. 创建 DrawingGroup 并应用变换 var group new DrawingGroup(); group.Transform new TransformGroup { Children { new ScaleTransform(_viewTransform.Scale, _viewTransform.Scale), new TranslateTransform(-_viewTransform.OffsetX, -_viewTransform.OffsetY) } }; // 2. 渲染连线 foreach (var line in _shapes.OfTypeLineShape()) { var geometry new StreamGeometry(); using (var ctx geometry.Open()) { ctx.BeginFigure(line.StartPoint, false, false); ctx.LineTo(line.EndPoint, true, true); } group.Children.Add(new GeometryDrawing { Brush Brushes.Transparent, Pen new Pen(Brushes.SteelBlue, 2) { DashStyle DashStyles.Solid } }); } // 3. 渲染图形 foreach (var shape in _shapes) { if (shape is RectangleShape rect) { var rectGeometry new RectangleGeometry( new Rect(rect.X, rect.Y, rect.Width, rect.Height)); group.Children.Add(new GeometryDrawing { Brush shape.IsSelected ? Brushes.LightBlue : Brushes.LightCyan, Pen new Pen(shape.IsSelected ? Brushes.Blue : Brushes.Black, 2), Geometry rectGeometry }); // 选中时绘制连接点 if (shape.IsSelected) { foreach (var cp in shape.ConnectionPoints) { var pt cp.GetAbsolutePosition(shape); var pointGeometry new EllipseGeometry(pt, 3, 3); group.Children.Add(new GeometryDrawing { Brush Brushes.Red, Geometry pointGeometry }); } } } } drawingContext.DrawDrawing(group); } }对比 WinForm 方案WPF 版本不依赖Canvas.Left/Top绑定而是用Transform整体控制性能更高DrawingVisual是轻量级绘图目标比CanvasRectangle控件组合内存占用低 60%。两者共享同一套ShapeBase和ViewTransform业务逻辑完全复用。4. 交互系统鼠标状态机驱动拖拽、连接、框选全流程这才是 Visio 风格的灵魂——不是“拖动控件”而是“改变图形状态”。我们用一个有限状态机FSM管理鼠标行为共 5 个状态状态触发条件行为Idle初始状态响应 Hover、ClickDraggingCanvas按住空白处拖动更新ViewTransform.OffsetX/YDraggingShape点中图形并拖动更新该图形X/Y触发UpdateAllLineEndpoints()Connecting点中连接点并拖动记录起点进入连线模式Selecting按住空白处右键拖动绘制虚线框HitTest框内图形4.1 状态机主干CanvasInteractionManagerpublic enum InteractionState { Idle, DraggingCanvas, DraggingShape, Connecting, Selecting } public class CanvasInteractionManager { private InteractionState _currentState InteractionState.Idle; private Point _startPoint; private ShapeBase _draggedShape; private ConnectionPoint _draggedConnectionPoint; private Guid _sourceShapeId; private string _sourcePointName; private RectangleF _selectionRect; public CanvasInteractionManager(ShapeCollection shapes, ViewTransform viewTransform) { Shapes shapes; ViewTransform viewTransform; } public ShapeCollection Shapes { get; } public ViewTransform ViewTransform { get; } public void OnMouseDown(MouseEventArgs e) { var modelPoint ViewTransform.ScreenToModel(e.X, e.Y); switch (_currentState) { case InteractionState.Idle: // 1. 检查是否点中连接点优先级最高 var hitCp HitTestConnectionPoint(modelPoint); if (hitCp ! null) { _currentState InteractionState.Connecting; _sourceShapeId hitCp.Shape.Id; _sourcePointName hitCp.Point.Name; _startPoint modelPoint; return; } // 2. 检查是否点中图形 var hitShape HitTestShape(modelPoint); if (hitShape ! null) { _currentState InteractionState.DraggingShape; _draggedShape hitShape; _startPoint modelPoint; // 清除其他选中状态 foreach (var s in Shapes) s.IsSelected false; hitShape.IsSelected true; return; } // 3. 空白处点击开始框选或拖动画布 _currentState InteractionState.Selecting; _startPoint modelPoint; _selectionRect new RectangleF((float)modelPoint.X, (float)modelPoint.Y, 0, 0); break; } } private (ShapeBase Shape, ConnectionPoint Point)? HitTestConnectionPoint(Point modelPoint) { foreach (var shape in Shapes) { foreach (var cp in shape.ConnectionPoints) { var cpPos cp.GetAbsolutePosition(shape); var dist Math.Sqrt(Math.Pow(cpPos.X - modelPoint.X, 2) Math.Pow(cpPos.Y - modelPoint.Y, 2)); if (dist 8) // 8 像素命中半径 return (shape, cp); } } return null; } private ShapeBase HitTestShape(Point modelPoint) { // 逆序遍历ZOrder 高的在后确保点中顶层图形 for (int i Shapes.Count - 1; i 0; i--) { var shape Shapes[i]; if (modelPoint.X shape.X modelPoint.X shape.X shape.Width modelPoint.Y shape.Y modelPoint.Y shape.Y shape.Height) return shape; } return null; } public void OnMouseMove(MouseEventArgs e) { var modelPoint ViewTransform.ScreenToModel(e.X, e.Y); switch (_currentState) { case InteractionState.DraggingShape: if (_draggedShape ! null) { var dx modelPoint.X - _startPoint.X; var dy modelPoint.Y - _startPoint.Y; _draggedShape.X dx; _draggedShape.Y dy; _startPoint modelPoint; Shapes.UpdateAllLineEndpoints(); // 关键连线随图形实时更新 } break; case InteractionState.DraggingCanvas: ViewTransform.OffsetX modelPoint.X - _startPoint.X; ViewTransform.OffsetY modelPoint.Y - _startPoint.Y; _startPoint modelPoint; break; case InteractionState.Selecting: _selectionRect RectangleF.FromLTRB( (float)_startPoint.X, (float)_startPoint.Y, (float)modelPoint.X, (float)modelPoint.Y); break; } } public void OnMouseUp(MouseEventArgs e) { var modelPoint ViewTransform.ScreenToModel(e.X, e.Y); switch (_currentState) { case InteractionState.DraggingShape: // 拖动结束确保连线更新 Shapes.UpdateAllLineEndpoints(); break; case InteractionState.Connecting: // 尝试连接到目标连接点 var targetCp HitTestConnectionPoint(modelPoint); if (targetCp ! null targetCp.Shape.Id ! _sourceShapeId // 不能连自己 targetCp.Point.IsInput) // 目标必须是输入端口 { var line new LineShape { SourceShapeId _sourceShapeId, SourcePointName _sourcePointName, TargetShapeId targetCp.Shape.Id, TargetPointName targetCp.Point.Name }; Shapes.AddShape(line); Shapes.UpdateAllLineEndpoints(); } break; case InteractionState.Selecting: // 框选清除之前选中选中框内所有图形 foreach (var s in Shapes) s.IsSelected false; var selected Shapes.HitTest(_selectionRect).ToList(); foreach (var s in selected) s.IsSelected true; break; } _currentState InteractionState.Idle; } }关键设计点OnMouseMove中的Shapes.UpdateAllLineEndpoints()是 Visio 风格的基石。它保证移动一个服务器图标所有连到它的网线自动跟随拖动一个交换机入向和出向连线同时更新无需手动维护LineShape.StartPoint/EndPoint它们永远是“当前最新”。这就是状态驱动 vs 控件驱动的本质区别。4.2 WinForm 集成挂载到 DoubleBufferedCanvasControlpublic partial class DoubleBufferedCanvasControl : Panel { private readonly CanvasInteractionManager _interactionManager; public DoubleBufferedCanvasControl(ShapeCollection shapes) { // ... 前面初始化代码 _interactionManager new CanvasInteractionManager(shapes, _viewTransform); MouseDown (s, e) _interactionManager.OnMouseDown(e); MouseMove (s, e) _interactionManager.OnMouseMove(e); MouseUp (s, e) _interactionManager.OnMouseUp(e); } }4.3 WPF 集成附加属性 PreviewMouseDown!-- XAML -- local:DrawingCanvas x:NameCanvas local:CanvasBehavior.InteractionManager{Binding InteractionManager} /// CanvasBehavior.cs public static class CanvasBehavior { public static readonly DependencyProperty InteractionManagerProperty DependencyProperty.RegisterAttached( InteractionManager, typeof(CanvasInteractionManager), typeof(CanvasBehavior), new PropertyMetadata(null, OnInteractionManagerChanged)); public static void SetInteractionManager(DependencyObject element, CanvasInteractionManager value) element.SetValue(InteractionManagerProperty, value); private static void OnInteractionManagerChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (d is UIElement element e.NewValue is CanvasInteractionManager manager) { element.PreviewMouseDown (s, args) manager.OnMouseDown(args); element.PreviewMouseMove (s, args) manager.OnMouseMove(args); element.PreviewMouseUp (s, args) manager.OnMouseUp(args); } } }注意WPF 必须用PreviewMouseDown隧道事件否则Canvas内部的DrawingVisual会吞掉事件导致无法响应。5. 避坑指南C# 类似Visio图形拖拽实现的 5 个血泪经验做这类图形系统90% 的时间花在解决“看似简单实则玄学”的边界问题上。以下是我踩过的坑按发生频率排序每条都附真实现象、根因和可立即验证的修复方案。5.1 现象缩放后拖动图形鼠标指针与图形中心严重偏移原因ViewTransform应用了缩放但OnMouseMove中ScreenToModel未同步应用DpiScale导致坐标换算失真。例如4K 屏下DpiScaleX1.5Scale2.0但ScreenToModel只除以Scale漏了DpiScaleX结果坐标被放大 1.5 倍。解决严格按ScreenToModel方法实现确保x / DpiScaleX / Scale OffsetX顺序不可颠倒。在OnMouseMove开头加日志Debug.WriteLine($Screen({e.X},{e.Y}) → Model({modelPoint.X:F2},{modelPoint.Y:F2}));对比缩放前后数值。5.2 现象连接线在图形旋转后起点/终点粘不住连接点原因ConnectionPoint.GetAbsolutePosition()直接用OffsetX/Y计算未考虑ShapeBase.Rotation。旋转 90° 后“Top”连接点实际在右侧但代码仍把它当顶部中点算。解决为ConnectionPoint增加GetRotatedPosition(ShapeBase shape)方法用旋转矩阵计算public Point GetRotatedPosition(ShapeBase shape) { var cx shape.X shape.Width * 0.5; var cy shape.Y shape.Height * 0.5; var px shape.X shape.Width * OffsetX; var py shape.Y shape.Height * OffsetY; var rad shape.Rotation * Math.PI / 180; var cos Math.Cos(rad); var sin Math.Sin(rad); var rx cx (px - cx) * cos - (py - cy) * sin; var ry cy (px - cx) * sin (py - cy) * cos; return new Point(rx, ry); }并在LineShape的UpdateEndPoints中调用此方法。5.3 现象快速拖动图形时连线出现“瞬移”或“抖动”原因UpdateAllLineEndpoints()在每次MouseMove中执行但图形X/Y是逐步更新的而GetAbsolutePosition()依赖当前X/Y导致中间态坐标错误。更糟的是如果Shapes是ObservableCollection频繁触发CollectionChanged会引发 UI 重绘风暴。解决① 将UpdateAllLineEndpoints()改为DeferUpdate()FlushUpdates()模式在OnMouseMove中只标记“需更新”在OnMouseUp或OnPaint结束后批量执行②Shapes改用ListShapeBase渲染层通过INotifyCollectionChanged包装如BindingListT避免ObservableCollection的过度通知。5.4 现象高 DPI 下连接点小方块6×6在 200% 缩放时变成 12×12但命中检测半径仍是 8 像素原因“8 像素命中半径”是设备无关单位但HitTestConnectionPoint中的dist 8是模型坐标距离未乘Scale * DpiScale。模型坐标 1 单位 1 逻辑像素而屏幕像素是Scale × DpiScale倍。解决本文还有配套的精品资源点击获取