WPF基础：在Canvas上绘制图形

合集 - C#(29)

1.使用C#将几个Excel文件合并去重分类2023-11-152.C#使用SqlSugar操作MySQL数据库实现简单的增删改查2023-11-163.C#中的类和继承2023-11-174.C#中的virtual和override关键字2023-11-175.C#中的属性2023-11-206.C#winform中使用SQLite数据库2023-11-237.C#简化工作之实现网页爬虫获取数据2023-11-278.C#中的委托（一）2023-11-299.C#中的ref关键字2023-11-2910.C#中out关键字2023-11-2911.C#中内置的泛型委托Func与Action2023-12-0412.在winform blazor hybrid中绘图2023-12-1313.使用C#如何监控选定文件夹中文件的变动情况？2023-12-2814.C#设计模式之策略模式01-0215.由浅入深理解C#中的事件01-0416.C#设计模式之观察者模式01-0417.C#设计模式之单例模式01-0818.C#基于ScottPlot进行可视化01-1319.C#使用MiniExcel导入导出数据到Excel/CSV文件02-1020.winform实现最小化至系统托盘02-1921.C#使用Bogus生成测试数据02-2722.SemanticKernel如何基于自有数据聊天03-0523.在winform中如何嵌入第三方软件窗体✨03-0724.在winform中如何实现双向数据绑定？03-1825.自己动手做一个批量doc转换为docx文件的小工具03-2026.WPF中动画教程（DoubleAnimation的基本使用）04-0127.WPF动画教程（PointAnimationUsingPath的使用）04-0328.C#使用PaddleOCR进行图片文字识别✨04-09

29.WPF基础：在Canvas上绘制图形04-16

收起

Canvas介绍

Canvas是WPF（Windows Presentation Foundation）中的一种面板控件，用于在XAML中布置子元素。它提供了绝对定位的能力，允许元素在自由的二维空间中放置。Canvas上的子元素可以通过指定绝对位置（Left和Top属性）来放置，也可以使用附加属性来指定相对于Canvas的位置。Canvas对于需要自由布局的场景非常有用，例如绘图应用程序或需要精确放置UI元素的情况。但是，使用Canvas布局时要注意，它不会自动调整子元素的位置或大小，因此需要手动管理子元素的布局。

在Canvas上绘制矩形

在xaml定义一个Canvas：

效果如下所示：

绘制矩形：

 System.Windows.Shapes.Rectangle rectangle = new System.Windows.Shapes.Rectangle
 {
     Width = 100,
     Height = 100,
     Stroke = System.Windows.Media.Brushes.Blue,
     StrokeThickness = 1,                                      
 };

 Canvas.SetLeft(rectangle, 50);
 Canvas.SetTop(rectangle, 50);

 myCanvas1.Children.Add(rectangle);

System.Windows.Shapes.Rectangle

System.Windows.Shapes.Rectangle是WPF（Windows Presentation Foundation）中的一个类，它表示一个矩形图形。

以下是Rectangle类的一些主要属性：

属性名	类型	描述
Width	Double	获取或设置元素的宽度。
Height	Double	获取或设置元素的建议高度。
Stroke	Brush	获取或设置 Brush，用于指定 Shape 边框绘制的方式。
StrokeThickness	Double	获取或设置 Shape边框的宽度。
Fill	Brush	获取或设置 Brush，它指定形状内部上色的方式。

 Canvas.SetLeft(rectangle, 50);
 Canvas.SetTop(rectangle, 50);

这两行代码是在设置Rectangle对象在Canvas中的位置。

1. Canvas.SetLeft(rectangle, 50);：这行代码设置了rectangle对象在Canvas中的左边距。SetLeft是一个静态方法，它接受两个参数：第一个参数是要设置位置的对象，第二个参数是左边距的值。在这个例子中，rectangle对象的左边距被设置为50像素。
2. Canvas.SetTop(rectangle, 50);：这行代码设置了rectangle对象在Canvas中的上边距。SetTop也是一个静态方法，它的工作方式与SetLeft相同，只是它设置的是上边距而不是左边距。在这个例子中，rectangle对象的上边距被设置为50像素。

 myCanvas1.Children.Add(rectangle);

这行代码将矩形添加到Canvas中。myCanvas1是Canvas的名称，Children.Add方法将矩形添加到Canvas的子元素中。

实现效果：

也可以直接在xaml中写：

效果与上述相同。

在Canvas上绘制圆

xaml写法：

 "Azure" x:Name="myCanvas1" Height="400">
     "100" Height="100" Fill="Blue" Canvas.Left="50" Canvas.Top="50"/>
 

实现效果：

cs写法：

 System.Windows.Shapes.Ellipse ellipse = new System.Windows.Shapes.Ellipse
 {
     Width = 100,
     Height = 100,                
     Fill = System.Windows.Media.Brushes.Blue
 };

 Canvas.SetLeft(ellipse, 50);
 Canvas.SetTop(ellipse, 50);

 myCanvas1.Children.Add(ellipse);

实现效果与上述相同。

在Canvas上绘制折线

xaml写法：

实现效果：

cs写法：

 // 创建Polyline对象
 Polyline polyline = new Polyline();
 polyline.Points = new PointCollection()
 {
     new System.Windows.Point(10, 10),
     new System.Windows.Point(50, 50),
     new System.Windows.Point(100, 20),
     new System.Windows.Point(150, 70)
 };
 polyline.Stroke = System.Windows.Media.Brushes.Blue;
 polyline.StrokeThickness = 2;

 myCanvas1.Children.Add(polyline);

实现效果与上述相同。

在Canvas上绘制多边形

xaml写法：

实现效果：

cs写法：

 // 创建Polygon对象
 Polygon polygon = new Polygon();
 polygon.Points = new PointCollection()
 {
     new System.Windows.Point(350, 200),
     new System.Windows.Point(250, 100),
     new System.Windows.Point(300, 250)
 };
 polygon.Fill = System.Windows.Media.Brushes.Red;
 polygon.Stroke = System.Windows.Media.Brushes.Blue;
 polygon.StrokeThickness = 2;

 myCanvas1.Children.Add(polygon);

实现效果与上述相同。

在Canvas上绘制自定义路径

xaml写法：

实现效果：

cs写法：

// 创建Path对象
Path path = new Path();
path.Stroke = System.Windows.Media.Brushes.Blue;
path.StrokeThickness = 2;

// 创建PathGeometry对象
PathGeometry pathGeometry = new PathGeometry();

// 创建PathFigure对象
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new System.Windows.Point(10, 10);

// 创建LineSegment对象并添加到PathFigure
pathFigure.Segments.Add(new LineSegment(new System.Windows.Point(50, 50), true));
pathFigure.Segments.Add(new LineSegment(new System.Windows.Point(100, 20), true));
pathFigure.Segments.Add(new LineSegment(new System.Windows.Point(150, 70), true));

// 将PathFigure添加到PathGeometry
pathGeometry.Figures.Add(pathFigure);

// 设置Path的Data属性为PathGeometry对象
path.Data = pathGeometry;

// 将path添加到myCanvas1中
myCanvas1.Children.Add(path);

实现效果与上述相同。