C# WPF上位机开发（增强版绘图软件）

前面我们写过一个绘图软件，不过那个比较简单，主要就是用鼠标模拟pen进行绘图。实际应用中，另外一种使用比较多的场景，就是绘制直线、长方形和圆形。不管是流程图，还是传感器仿真，或者是图形数据动态显示等等，绘图部分本身还是有着重要的实际用途。因此，这里有必要告诉大家，实际的canvas绘图是什么样的。

这里的增强版，主要也是指的直线绘图、长方形绘图和圆形绘图。当然如果要做得好的话，一般还需要同步考虑一下keyboard事件，这部分也很重要。

1、软件设计

关于软件设计，目前是这么考虑的。可以创建一个菜单，里面有三个子菜单，这三个子菜单分别是直线、长方形和圆形。我们选择了一种图形，那么其他的图形就自动被放弃。后续在canvas上面绘图的时候，就用对应子菜单的形式进行绘图即可。

2、界面设计

相对代码，界面设计还是比较简单的。整个界面主要就两个部分，一部分是菜单，一部分是canvas。做好了这个，基本的界面就准备好了。

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp"mc:Ignorable="d"Title="Canvas" Height="450" Width="600"><Grid><Menu Name="shapesMenu"><MenuItem Header="Shapes"><MenuItem Name="menuItemLine" Header="Line" IsCheckable="True" IsChecked="false" Checked="MenuItemLine_Checked"/><MenuItem Name="menuItemRectangle" Header="Rectangle" IsCheckable="True" IsChecked="False" Checked="MenuItemRectangle_Checked"/><MenuItem Name="menuItemCircle" Header="Circle" IsCheckable="True" IsChecked="False" Checked="MenuItemCircle_Checked"/></MenuItem></Menu><Canvas Name="drawingCanvas" Background="WhiteSmoke" MouseDown="Canvas_MouseDown" MouseMove="Canvas_MouseMove" MouseUp="Canvas_MouseUp" Margin="0,20,0,10"/></Grid>
</Window>

3、代码设计

由于是绘图，所以整个绘图的操作其实分成了三个阶段，分别是鼠标左键按下、鼠标移动、鼠标松开三个步骤。如果是鼠标按键刚刚按下，一般只需要记录一下当前的坐标即可。接着在鼠标移动的时候，开始绘制图形。等到最终鼠标左键弹起的时候，绘图结束，所有的shape记录到List当中。

当然除了绘图之外，另外一部分比较重要的就是菜单的响应，这里建议不同的菜单设置不同的响应函数。虽然麻烦了一点，但是可以保证不出错。

4、详细的代码内容

最后为了方便学习和交流，这里给出完整的c#代码，中间关于图形绘制的内容多了一点，菜单部分的内容其实还是比较简单的。

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;namespace WpfApp
{public partial class MainWindow : Window{private Point startPoint;private bool isDrawing = false;private Shape currentShape;private List<Shape> shapes = new List<Shape>();// init MainWindowpublic MainWindow(){InitializeComponent();}// mouse down functionprivate void Canvas_MouseDown(object sender, MouseButtonEventArgs e){startPoint = e.GetPosition(drawingCanvas);isDrawing = true;}// mouse move functionprivate void Canvas_MouseMove(object sender, MouseEventArgs e){if (isDrawing){Point endPoint = e.GetPosition(drawingCanvas);if (currentShape == null){// Determine the shape type based on the selected menu itemif (menuItemLine.IsChecked){currentShape = new Line { Stroke = Brushes.Blue, StrokeThickness = 2 };}else if (menuItemRectangle.IsChecked){currentShape = new Rectangle { Stroke = Brushes.Red, StrokeThickness = 2, Fill = Brushes.Transparent };}else if(menuItemCircle.IsChecked){currentShape = new Ellipse { Stroke = Brushes.Green, StrokeThickness = 2, Fill = Brushes.Transparent };}else{currentShape = null;return;}drawingCanvas.Children.Add(currentShape);}// Update the coordinates of the shapeif (currentShape is Line line){line.X1 = startPoint.X;line.Y1 = startPoint.Y;line.X2 = endPoint.X;line.Y2 = endPoint.Y;}else if (currentShape is Rectangle rectangle){double width = endPoint.X - startPoint.X;double height = endPoint.Y - startPoint.Y;rectangle.Width = width > 0 ? width : -width;rectangle.Height = height > 0 ? height : -height;// record first xif(startPoint.X < endPoint.X)Canvas.SetLeft(rectangle, startPoint.X);elseCanvas.SetLeft(rectangle, endPoint.X);// record first yif(startPoint.Y < endPoint.Y)Canvas.SetTop(rectangle, startPoint.Y);elseCanvas.SetTop(rectangle, endPoint.Y);}else if(currentShape is Ellipse ecllipse){double width = endPoint.X - startPoint.X;double height = endPoint.Y - startPoint.Y;ecllipse.Width = width > 0 ? width : -width;ecllipse.Height = height > 0 ? height : -height;// judge ecllipse width and heightif(ecllipse.Width > ecllipse.Height){ecllipse.Height = ecllipse.Width;}else{ecllipse.Width = ecllipse.Height;}// record first xif (startPoint.X < endPoint.X)Canvas.SetLeft(ecllipse, startPoint.X);elseCanvas.SetLeft(ecllipse, endPoint.X);// record first yif (startPoint.Y < endPoint.Y)Canvas.SetTop(ecllipse, startPoint.Y);elseCanvas.SetTop(ecllipse, endPoint.Y);}else{return;}}}// mouse up functionprivate void Canvas_MouseUp(object sender, MouseButtonEventArgs e){isDrawing = false;if (null != currentShape){shapes.Add(currentShape);currentShape = null;}}// sub menu functionprivate void MenuItemLine_Checked(object sender, RoutedEventArgs e){menuItemLine.IsChecked = true;menuItemRectangle.IsChecked = false;menuItemCircle.IsChecked = false;}// sub menu functionprivate void MenuItemRectangle_Checked(object sender, RoutedEventArgs e){menuItemLine.IsChecked = false;menuItemRectangle.IsChecked = true;menuItemCircle.IsChecked = false;}// sub menu functionprivate void MenuItemCircle_Checked(object sender, RoutedEventArgs e){menuItemLine.IsChecked = false;menuItemRectangle.IsChecked = false;menuItemCircle.IsChecked = true;}}
}