# C# WinForm实战：用SkiaSharp打造可拖拽的简易几何画板（附完整源码） 几何画板这类工具，对于教学演示、流程设计乃至简单的原型草图绘制来说，都是不可或缺的。很多.NET开发者，尤其是那些身处教育科技或需要快速构建内部工具场景的朋友，都曾想过自己动手实现一个。市面上虽然有GeoGebra这样的成熟产品，但将其深度集成到自己的WinForm应用中，或者需要定制特定的交互逻辑时，往往不如自己掌控底层来得灵活。 今天，我们就来聊聊如何用C#和SkiaSharp，从零开始搭建一个支持**多种基础几何图形创建、编辑、拖拽，并集成撤销/重做与持久化保存**的简易几何画板。这不仅仅是画一个圆然后拖来拖去那么简单，我们会构建一个**可扩展的图形对象模型**，处理复杂的**点选与拖拽判定逻辑**，并实现一个**轻量但实用的命令历史栈**。最终，你会得到一个结构清晰、可直接用于实际项目的完整解决方案，代码也会在文末提供。 ## 1. 项目基石：环境搭建与SkiaSharp核心概念 在开始敲代码之前，确保你的开发环境已经就绪。我使用的是Visual Studio 2022，当然，VS 2019或者更高版本的Rider也完全没问题。我们创建一个新的Windows窗体应用(.NET Framework或.NET Core/.NET 6+均可，SkiaSharp对两者都有良好支持)，项目类型选择“Windows窗体应用”。 接下来是关键一步：引入SkiaSharp。打开NuGet包管理器，搜索并安装以下两个包： - `SkiaSharp` - `SkiaSharp.Views.Desktop.Common` (或针对WinForms的`SkiaSharp.Views.WindowsForms`) 安装完成后，你会在工具箱里发现新增的`SKControl`控件。把它拖到你的主窗体上，它将作为我们绘制所有图形的画布。与传统的GDI+使用`Graphics`对象在`Paint`事件中绘图不同，SkiaSharp的核心绘制发生在`SKControl`的`PaintSurface`事件里。 这里简单对比一下GDI+与SkiaSharp的一些核心类型，方便有GDI+经验的开发者快速迁移： | GDI+ 类型/概念 | SkiaSharp 对应类型/概念 | 说明 | | :--- | :--- | :--- | | `Graphics` | `SKCanvas` | 绘图操作的主要执行者。 | | `Pen` / `Brush` | `SKPaint` | **`SKPaint`是一个多功能综合体**，通过其`Style`属性(`SKPaintStyle.Stroke`或`SKPaintStyle.Fill`)来决定是绘制轮廓还是填充。 | | `PointF` | `SKPoint` | 表示一个二维坐标点。 | | `RectangleF` | `SKRect` | 表示一个矩形区域。 | | `Color` | `SKColor` | 颜色表示。 | | `Font` | `SKFont` | 字体设置。 | > 提示：`SKPaint`对象包含了颜色、笔触宽度、抗锯齿、样式（描边或填充）、字体等几乎所有绘制属性。创建和配置`SKPaint`是SkiaSharp绘制的第一步，也是性能优化的关键点之一，因为频繁创建和销毁`SKPaint`会影响性能。 我们的绘制入口点，即`SKControl`的`PaintSurface`事件处理函数，结构大致如下： ```csharp private void skControl_PaintSurface(object sender, SKPaintSurfaceEventArgs e) { // 获取绘制画布 SKCanvas canvas = e.Surface.Canvas; // 清空画布，通常用白色填充 canvas.Clear(SKColors.White); // 创建并配置画笔/画刷 using (var paint = new SKPaint { Color = SKColors.Blue, Style = SKPaintStyle.Fill, IsAntialias = true // 开启抗锯齿，让图形边缘更平滑 }) { // 在这里绘制所有图形 // 例如：canvas.DrawCircle(100, 100, 50, paint); } // 遍历我们维护的图形对象列表，让每个图形自己绘制自己 foreach (var shape in _shapes) { shape.Draw(canvas); } } ``` 基础框架搭好了，接下来我们需要思考如何用代码来“描述”那些可以交互的几何图形。 ## 2. 构建图形对象模型：面向抽象与多态 一个健壮的系统始于良好的数据模型。我们不能用一堆散落的坐标和类型变量来管理图形，而是需要建立一个面向对象的层次结构。这里，我们采用经典的抽象基类+具体子类的设计模式。 首先，定义一个抽象的`GeometryShape`基类，它声明了所有图形共有的属性和行为： ```csharp public abstract class GeometryShape { // 每个图形需要一个唯一标识，方便选择和序列化 public Guid Id { get; } = Guid.NewGuid(); // 图形名称，用于UI显示或调试 public string Name { get; set; } // 轮廓画笔样式 public SKPaint StrokePaint { get; set; } // 填充画笔样式 public SKPaint FillPaint { get; set; } // 图形是否被选中（高亮显示） public bool IsSelected { get; set; } // 抽象方法：在指定的画布上绘制自己 public abstract void Draw(SKCanvas canvas); // 抽象方法：判断一个点是否落在图形内部或边缘（用于点选检测） public abstract bool ContainsPoint(SKPoint point); // 抽象方法：将图形移动指定的偏移量（用于拖拽） public abstract void Translate(SKPoint offset); // 抽象方法：返回一个能完全包围图形的矩形（用于批量操作和渲染优化） public abstract SKRect GetBounds(); } ``` 有了这个基类，我们就可以派生出具体的图形类型了。以圆形和矩形为例： **圆形 (`CircleShape`)**： ```csharp public class CircleShape : GeometryShape { public SKPoint Center { get; set; } public float Radius { get; set; } public CircleShape(SKPoint center, float radius) { Center = center; Radius = radius; // 设置默认样式 StrokePaint = new SKPaint { Color = SKColors.Black, Style = SKPaintStyle.Stroke, StrokeWidth = 2, IsAntialias = true }; FillPaint = new SKPaint { Color = SKColors.LightBlue.WithAlpha(0x99), Style = SKPaintStyle.Fill, IsAntialias = true }; Name = $"Circle {Id.ToString().Substring(0, 4)}"; } public override void Draw(SKCanvas canvas) { // 先填充，后描边，确保边框清晰 canvas.DrawCircle(Center, Radius, FillPaint); canvas.DrawCircle(Center, Radius, StrokePaint); // 如果被选中，绘制一个额外的虚线框或控制点以示高亮 if (IsSelected) { using (var highlightPaint = new SKPaint { Color = SKColors.Red, Style = SKPaintStyle.Stroke, StrokeWidth = 1, PathEffect = SKPathEffect.CreateDash(new float[] { 5, 5 }, 0), IsAntialias = true }) { var bounds = GetBounds(); canvas.DrawRect(bounds, highlightPaint); } } } public override bool ContainsPoint(SKPoint point) { // 点到圆心的距离小于等于半径，则认为点在圆内（或边缘） float distance = SKPoint.Distance(Center, point); return distance <= Radius; } public override void Translate(SKPoint offset) { Center += offset; } public override SKRect GetBounds() { // 圆的边界矩形是其外接正方形 return new SKRect(Center.X - Radius, Center.Y - Radius, Center.X + Radius, Center.Y + Radius); } } ``` **矩形 (`RectangleShape`)** 的实现也类似，核心是`SKRect`的表示和`DrawRect`方法。我们还可以继续添加`LineShape`（线段）、`PolygonShape`（多边形）等。关键在于，所有具体的图形类都封装了自己的数据和行为，并通过基类接口与系统的其他部分（如绘制循环、交互逻辑）进行通信。这种设计使得添加新的图形类型变得非常容易，只需继承`GeometryShape`并实现那几个抽象方法即可。 现在，我们在主窗体中维护一个`List<GeometryShape> _shapes`来存储所有图形。在`PaintSurface`事件中，遍历这个列表并调用每个图形的`Draw`方法，世界就呈现在眼前了。但静态的图形没有灵魂，接下来我们要赋予它们生命——交互能力。 ## 3. 实现核心交互：精准点选与流畅拖拽 交互的核心是处理`SKControl`的鼠标事件：`MouseDown`、`MouseMove`和`MouseUp`。我们的目标是：鼠标按下时，判断点中了哪个图形（点选）；如果点中了，在鼠标移动时拖拽该图形；鼠标释放时，结束拖拽。 这里有几个技术细节需要仔细处理： 1. **点选检测 (`ContainsPoint`)**：我们已经为每个图形实现了`ContainsPoint`方法。在`MouseDown`时，我们需要从后向前遍历`_shapes`列表（因为后添加的图形在视觉上层），找到第一个包含鼠标点的图形。这模拟了“点击最上层图形”的直观行为。 2. **坐标转换**：鼠标事件的坐标(`e.Location`)是相对于控件的像素坐标，通常是整数。而SkiaSharp的`SKPoint`是`float`类型，且坐标系是相同的（原点在控件左上角）。所以通常可以直接使用，但如果控件有缩放或平移变换，则需要相应的坐标转换。 3. **拖拽状态管理**：我们需要记录当前被拖拽的图形(`_selectedShape`)，以及在鼠标按下时鼠标点相对于该图形**内部某个参考点**的偏移量(`_dragOffset`)。这是实现“粘着感”拖拽的关键，而不是让图形中心瞬间跳到鼠标位置。 让我们看看具体的实现代码片段： ```csharp private GeometryShape _selectedShape = null; private SKPoint _lastMousePos; private bool _isDragging = false; private void skControl_MouseDown(object sender, MouseEventArgs e) { // 将鼠标位置转换为SKPoint SKPoint mousePos = new SKPoint(e.X, e.Y); _lastMousePos = mousePos; // 从后向前遍历，实现点选最上层图形 for (int i = _shapes.Count - 1; i >= 0; i--) { if (_shapes[i].ContainsPoint(mousePos)) { _selectedShape = _shapes[i]; _isDragging = true; // 计算拖拽偏移量：鼠标点相对于图形中心（或其他锚点）的差值 // 以圆形为例，计算相对于圆心的偏移 if (_selectedShape is CircleShape circle) { _dragOffset = new SKPoint(mousePos.X - circle.Center.X, mousePos.Y - circle.Center.Y); } // 对于矩形，可以计算相对于矩形左上角或中心的偏移，这里以中心为例 else if (_selectedShape is RectangleShape rect) { var center = new SKPoint(rect.Bounds.MidX, rect.Bounds.MidY); _dragOffset = new SKPoint(mousePos.X - center.X, mousePos.Y - center.Y); } // 选中图形，并触发重绘以显示高亮 ClearSelection(); _selectedShape.IsSelected = true; skControl.Invalidate(); return; } } // 如果点击了空白区域，取消当前选择 ClearSelection(); skControl.Invalidate(); } private void skControl_MouseMove(object sender, MouseEventArgs e) { if (!_isDragging || _selectedShape == null) return; SKPoint currentMousePos = new SKPoint(e.X, e.Y); // 计算本次鼠标移动的增量 SKPoint delta = currentMousePos - _lastMousePos; // 应用移动 _selectedShape.Translate(delta); // 更新上一次鼠标位置 _lastMousePos = currentMousePos; // 请求重绘，更新图形位置 skControl.Invalidate(); } private void skControl_MouseUp(object sender, MouseEventArgs e) { if (_isDragging) { // 拖拽结束，可以在这里触发一个“图形移动”命令，用于撤销/重做（下一节会讲） // _commandManager.Execute(new MoveShapeCommand(_selectedShape, _totalDragDelta)); _isDragging = false; _dragOffset = SKPoint.Empty; } } private void ClearSelection() { foreach (var shape in _shapes) { shape.IsSelected = false; } _selectedShape = null; } ``` 至此，一个支持点选和拖拽多种图形的画板已经基本成型。但作为一个实用的工具，我们还需要“后悔药”和保存劳动成果的能力。 ## 4. 增强实用性：集成撤销/重做与图形持久化 **撤销/重做 (Undo/Redo)** 是提升用户体验的关键功能。其核心思想是**命令模式 (Command Pattern)**：将用户的操作（如添加图形、移动图形、删除图形、修改属性）封装成一个个“命令”对象。每个命令都知道如何执行(`Execute`)和如何撤销(`Undo`)。我们用一个栈来记录已执行的命令（历史栈），用另一个栈来记录被撤销的命令（重做栈）。 定义一个简单的命令接口： ```csharp public interface ICommand { void Execute(); void Undo(); } ``` 实现一个具体的“添加图形”命令： ```csharp public class AddShapeCommand : ICommand { private readonly List<GeometryShape> _shapeList; private readonly GeometryShape _shape; public AddShapeCommand(List<GeometryShape> shapeList, GeometryShape shape) { _shapeList = shapeList; _shape = shape; } public void Execute() { _shapeList.Add(_shape); } public void Undo() { _shapeList.Remove(_shape); } } ``` 然后，我们创建一个`CommandManager`来管理这些命令： ```csharp public class CommandManager { private readonly Stack<ICommand> _undoStack = new Stack<ICommand>(); private readonly Stack<ICommand> _redoStack = new Stack<ICommand>(); public void Execute(ICommand command) { command.Execute(); _undoStack.Push(command); _redoStack.Clear(); // 执行新命令后，重做栈清空 } public void Undo() { if (_undoStack.Count > 0) { ICommand command = _undoStack.Pop(); command.Undo(); _redoStack.Push(command); } } public void Redo() { if (_redoStack.Count > 0) { ICommand command = _redoStack.Pop(); command.Execute(); _undoStack.Push(command); } } public bool CanUndo => _undoStack.Count > 0; public bool CanRedo => _redoStack.Count > 0; } ``` 在主窗体中，当用户通过工具栏按钮创建一个新图形时，不再直接添加到`_shapes`列表，而是通过`CommandManager.Execute(new AddShapeCommand(_shapes, newCircle))`来执行。这样，当用户点击“撤销”按钮时，只需调用`_commandManager.Undo()`，最后一个添加的图形就会消失；点击“重做”，它又会回来。移动图形、删除图形等操作也如法炮制。 **图形持久化** 意味着能把画板上的图形保存到文件，下次再打开。最直接的方式是序列化。由于我们的图形继承体系是自定义的，使用`System.Text.Json`或`Newtonsoft.Json`进行序列化需要一些配置。我们可以为每个图形类添加`[JsonConstructor]`和可序列化的属性。更简单的一种方案是，定义一个轻量的数据传输对象(DTO)来表示图形的核心数据，在保存和加载时进行转换。 例如，定义一个`ShapeData`类： ```csharp public class ShapeData { public string Type { get; set; } // "Circle", "Rectangle", etc. public float[] Data { get; set; } // 存储中心点坐标、半径、矩形顶点等 public string StrokeColor { get; set; } public float StrokeWidth { get; set; } public string FillColor { get; set; } // ... 其他样式属性 } ``` 保存时，遍历`_shapes`，将每个图形转换为对应的`ShapeData`，然后将`List<ShapeData>`序列化为JSON文件。加载时，读取JSON文件，根据`Type`和`Data`数组反序列化并重新构建出具体的`GeometryShape`对象，添加到`_shapes`列表中，最后刷新画布。 将撤销/重做和持久化功能集成到UI中，通过菜单栏或工具栏按钮（如“撤销(Ctrl+Z)”、“重做(Ctrl+Y)”、“保存(Ctrl+S)”、“打开(Ctrl+O)”）来触发，一个功能相对完整的几何画板就诞生了。 ## 5. 性能调优与高级特性展望 当图形数量增多时，性能可能会成为问题。这里有几个我实践中觉得有效的优化点： - **脏矩形渲染**：在`MouseMove`拖拽时，不要调用`skControl.Invalidate()`重绘整个画布。可以计算图形新旧边界矩形的并集区域，只重绘这个区域。SkiaSharp的`SKCanvas`本身支持裁剪区域，但需要与控件的局部刷新机制结合。 - **避免频繁创建`SKPaint`**：`SKPaint`的创建和销毁有一定开销。对于常用的、样式固定的画笔（如默认黑色描边笔、红色高亮笔），可以创建为静态成员或复用对象池。但要注意，`SKPaint`不是线程安全的，且在不同绘图上下文中使用需谨慎。 - **空间索引**：当图形数量成百上千时，遍历所有图形进行点选检测(`ContainsPoint`)会变得很慢。可以考虑使用空间数据结构来加速，如**四叉树 (Quadtree)** 或**网格索引 (Grid Index)**。这些数据结构能快速定位某个空间区域内的图形，将检测复杂度从O(n)降低到O(log n)或更低。 在基础功能之上，你可以根据实际需求扩展更多高级特性： - **图形变换**：除了平移，实现旋转和缩放。这需要为每个图形维护一个变换矩阵(`SKMatrix`)，并在`Draw`和`ContainsPoint`方法中应用这个矩阵。 - **吸附功能 (Snapping)**：在拖拽图形时，让其边缘或中心自动对齐到画布网格或其他图形的关键点（如端点、中心）。这能帮助用户精确构图。 - **图层管理**：像Photoshop一样引入图层概念，将图形分组到不同图层，可以单独显示/隐藏、锁定或调整图层顺序。 - **表达式绑定**：像GeoGebra那样，让图形的属性（如圆的半径、线段长度）可以由数学表达式或另一个图形的属性来驱动，实现动态几何。 这个用SkiaSharp构建的几何画板项目，代码结构清晰，从图形对象模型到交互逻辑，再到撤销重做和持久化，形成了一个完整的闭环。它不仅仅是一个教学示例，其架构设计足以作为更复杂图形编辑应用的起点。