1. Canvas动态图形绘制基础WPF中的Canvas就像一块无限延伸的画布我们可以在这块画布上自由地绘制各种图形元素。与静态绘制不同动态绘制的魅力在于图形能够根据用户操作实时变化。我刚开始接触Canvas时最让我兴奋的就是看到鼠标移动时能实时绘制出轨迹的那种交互感。先来看一个最简单的动态绘制例子。假设我们要实现鼠标移动时实时绘制矩形首先需要在XAML中定义Canvas并添加鼠标事件监听Canvas x:NamedrawingCanvas BackgroundWhite MouseMovedrawingCanvas_MouseMove MouseLeftButtonDowndrawingCanvas_MouseLeftButtonDown MouseLeftButtonUpdrawingCanvas_MouseLeftButtonUp/在后台代码中我们需要处理这些鼠标事件。这里有个小技巧为了优化性能不要在每次鼠标移动时都创建新图形而是应该复用同一个图形对象private Rectangle currentRect; private Point startPoint; private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { startPoint e.GetPosition(drawingCanvas); currentRect new Rectangle { Stroke Brushes.Blue, StrokeThickness 2, Fill Brushes.LightBlue }; Canvas.SetLeft(currentRect, startPoint.X); Canvas.SetTop(currentRect, startPoint.Y); drawingCanvas.Children.Add(currentRect); } private void drawingCanvas_MouseMove(object sender, MouseEventArgs e) { if (currentRect null || e.LeftButton ! MouseButtonState.Pressed) return; var currentPoint e.GetPosition(drawingCanvas); var width currentPoint.X - startPoint.X; var height currentPoint.Y - startPoint.Y; currentRect.Width Math.Abs(width); currentRect.Height Math.Abs(height); Canvas.SetLeft(currentRect, width 0 ? startPoint.X : currentPoint.X); Canvas.SetTop(currentRect, height 0 ? startPoint.Y : currentPoint.Y); }这个例子展示了动态绘制的核心思路捕获用户输入事件根据输入参数实时更新图形属性。在实际项目中我建议创建一个专门的绘图管理器类来封装这些逻辑这样能保持代码整洁且易于维护。2. 实现图形交互功能图形绘制只是第一步真正的挑战在于如何让这些图形变得可交互。在WPF中实现图形交互主要依靠路由事件和命中测试。记得我第一次实现图形拖拽功能时花了整整一天才搞明白命中测试的工作原理。2.1 图形选择和拖拽要实现图形选择和拖拽我们需要处理几个关键事件private UIElement selectedElement; private Point dragStartPoint; private void drawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { // 命中测试 var hit VisualTreeHelper.HitTest(drawingCanvas, e.GetPosition(drawingCanvas)); if (hit?.VisualHit is Shape) { selectedElement (UIElement)hit.VisualHit; dragStartPoint e.GetPosition(drawingCanvas); selectedElement.CaptureMouse(); e.Handled true; } } private void drawingCanvas_MouseMove(object sender, MouseEventArgs e) { if (selectedElement ! null e.LeftButton MouseButtonState.Pressed) { var currentPoint e.GetPosition(drawingCanvas); var offset currentPoint - dragStartPoint; Canvas.SetLeft(selectedElement, Canvas.GetLeft(selectedElement) offset.X); Canvas.SetTop(selectedElement, Canvas.GetTop(selectedElement) offset.Y); dragStartPoint currentPoint; } } private void drawingCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (selectedElement ! null) { selectedElement.ReleaseMouseCapture(); selectedElement null; } }这里有几个容易踩坑的地方命中测试返回的是最底层的视觉元素可能需要向上查找父元素鼠标捕获(MouseCapture)确保在快速移动时不会丢失目标坐标转换要使用Canvas的坐标系而不是屏幕坐标2.2 图形旋转和缩放进阶的交互功能还包括旋转和缩放。实现这些功能需要一些数学计算private void RotateSelectedElement(double angle) { if (selectedElement null) return; var rotateTransform selectedElement.RenderTransform as RotateTransform; if (rotateTransform null) { rotateTransform new RotateTransform(); selectedElement.RenderTransform rotateTransform; selectedElement.RenderTransformOrigin new Point(0.5, 0.5); } rotateTransform.Angle angle; } private void ScaleSelectedElement(double scaleX, double scaleY) { if (selectedElement null) return; var scaleTransform selectedElement.RenderTransform as ScaleTransform; if (scaleTransform null) { scaleTransform new ScaleTransform(1, 1); selectedElement.RenderTransform scaleTransform; } scaleTransform.ScaleX * scaleX; scaleTransform.ScaleY * scaleY; }在实际项目中我通常会创建一个TransformGroup来组合多个变换效果这样用户就可以同时进行旋转和缩放操作。3. 性能优化技巧当Canvas上有大量图形时性能问题就会显现出来。我曾经在一个项目中有过惨痛教训当图形超过500个时界面就开始卡顿。经过多次优化尝试我总结出几个有效的优化策略。3.1 虚拟化绘制虚拟化绘制的核心思想是只绘制视口可见区域的图形。这类似于ListView的虚拟化机制private void UpdateVisibleElements() { var viewportBounds new Rect( scrollViewer.HorizontalOffset, scrollViewer.VerticalOffset, scrollViewer.ViewportWidth, scrollViewer.ViewportHeight); foreach (var child in drawingCanvas.Children) { if (child is FrameworkElement element) { var elementBounds new Rect( Canvas.GetLeft(element), Canvas.GetTop(element), element.ActualWidth, element.ActualHeight); element.Visibility viewportBounds.IntersectsWith(elementBounds) ? Visibility.Visible : Visibility.Collapsed; } } }3.2 使用DrawingVisual优化对于特别复杂的图形可以使用DrawingVisual代替常规的Shape元素public class OptimizedCanvas : FrameworkElement { private readonly VisualCollection _visuals; public OptimizedCanvas() { _visuals new VisualCollection(this); } public void AddVisual(DrawingVisual visual) { _visuals.Add(visual); } protected override int VisualChildrenCount _visuals.Count; protected override Visual GetVisualChild(int index) { return _visuals[index]; } }使用DrawingVisual的绘制性能通常比常规Shape高出5-10倍但代价是失去了自动布局和数据绑定等高级功能。3.3 批量操作优化当需要添加或删除大量图形时应该使用BeginInit/EndInit来批量操作drawingCanvas.BeginInit(); try { for (int i 0; i 1000; i) { var rect new Rectangle { Width 10, Height 10 }; Canvas.SetLeft(rect, i * 15); drawingCanvas.Children.Add(rect); } } finally { drawingCanvas.EndInit(); }这种方法可以显著减少界面重绘次数在我的测试中批量操作比单个添加快20倍以上。4. 高级应用场景掌握了基础绘制和交互后我们可以尝试一些更高级的应用场景。这些场景在实际项目中经常遇到每个都有其独特的挑战。4.1 实现图形序列化和反序列化在绘图应用中保存和加载图形是基本需求。我们可以使用XamlWriter来序列化图形public string SerializeCanvas() { var settings new XmlWriterSettings { Indent true, OmitXmlDeclaration true }; var sb new StringBuilder(); using (var writer XmlWriter.Create(sb, settings)) { XamlWriter.Save(drawingCanvas.Children, writer); } return sb.ToString(); } public void DeserializeCanvas(string xaml) { using (var reader new StringReader(xaml)) using (var xmlReader XmlReader.Create(reader)) { var children (UIElementCollection)XamlReader.Load(xmlReader); drawingCanvas.Children.Clear(); foreach (UIElement child in children) { drawingCanvas.Children.Add(child); } } }需要注意的是XamlWriter有一些限制比如不能序列化绑定表达式。在实际项目中我通常会创建一个专门的DTO(Data Transfer Object)来表示图形数据。4.2 实现撤销/重做功能撤销/重做是专业绘图软件的标配功能。我们可以使用命令模式来实现public interface ICanvasCommand { void Execute(); void Undo(); } public class AddShapeCommand : ICanvasCommand { private readonly Canvas _canvas; private readonly Shape _shape; public AddShapeCommand(Canvas canvas, Shape shape) { _canvas canvas; _shape shape; } public void Execute() { _canvas.Children.Add(_shape); } public void Undo() { _canvas.Children.Remove(_shape); } } public class CommandManager { private readonly StackICanvasCommand _undoStack new StackICanvasCommand(); private readonly StackICanvasCommand _redoStack new StackICanvasCommand(); public void ExecuteCommand(ICanvasCommand command) { command.Execute(); _undoStack.Push(command); _redoStack.Clear(); } public void Undo() { if (_undoStack.Count 0) { var command _undoStack.Pop(); command.Undo(); _redoStack.Push(command); } } public void Redo() { if (_redoStack.Count 0) { var command _redoStack.Pop(); command.Execute(); _undoStack.Push(command); } } }在我的项目中这个模式工作得很好但需要注意内存管理对于大型绘图可能需要限制撤销栈的大小。4.3 实现图形对齐和吸附功能专业绘图工具通常提供对齐和吸附功能。实现吸附功能的关键是在鼠标移动时检测附近的参考点private const double SnapDistance 10; private Point SnapToGrid(Point point) { var gridSize 20; var snappedX Math.Round(point.X / gridSize) * gridSize; var snappedY Math.Round(point.Y / gridSize) * gridSize; if (Math.Abs(snappedX - point.X) SnapDistance Math.Abs(snappedY - point.Y) SnapDistance) { return new Point(snappedX, snappedY); } return point; } private Point SnapToOtherShapes(Point point) { foreach (var child in drawingCanvas.Children) { if (child is FrameworkElement element element ! selectedElement) { var left Canvas.GetLeft(element); var top Canvas.GetTop(element); var right left element.ActualWidth; var bottom top element.ActualHeight; if (Math.Abs(left - point.X) SnapDistance) point.X left; if (Math.Abs(top - point.Y) SnapDistance) point.Y top; if (Math.Abs(right - point.X) SnapDistance) point.X right; if (Math.Abs(bottom - point.Y) SnapDistance) point.Y bottom; } } return point; }在实际应用中我通常会将这些吸附功能做成可配置的让用户可以选择是否启用网格吸附或形状吸附。