WPF基础：在Canvas上绘制图形

Canvas介绍

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

在Canvas上绘制矩形

在xaml定义一个Canvas：

ini 复制代码

 <StackPanel>
    <hc:Row Margin="0,20,0,0">
        <hc:Col Span="8">
            <Label Content="画矩形"></Label>
        </hc:Col>
        <hc:Col Span="8">
            <Button Style="{StaticResource ButtonPrimary}" Content="开始"
     Click="Button_Click_DrawRect"/>
        </hc:Col>
        <hc:Col Span="8">
            <Button Style="{StaticResource ButtonPrimary}" Content="清空"
                    Click="Button_Click_Clear"/>
        </hc:Col>
    </hc:Row>
    <Canvas Background="Azure" x:Name="myCanvas1" Height="400">
       
    </Canvas>
</StackPanel>

效果如下所示：

绘制矩形：

ini 复制代码

 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，它指定形状内部上色的方式。

css 复制代码

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

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

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

ini 复制代码

 myCanvas1.Children.Add(rectangle);

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

实现效果：

也可以直接在xaml中写：

ini 复制代码

 <Canvas Background="Azure" x:Name="myCanvas1" Height="400">
     <Rectangle Width="100" Height="100"  Canvas.Left="50" Canvas.Top="50" Stroke="Blue" StrokeThickness="1"/>
 </Canvas>

效果与上述相同。

在Canvas上绘制圆

xaml写法：

ini 复制代码

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

实现效果：

cs写法：

ini 复制代码

 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写法：

ini 复制代码

<Canvas Background="Azure" x:Name="myCanvas1" Height="400">
    <Polyline Points="10,10 50,50 100,20 150,70" Stroke="Blue" StrokeThickness="2"/>
</Canvas>

实现效果：

cs写法：

ini 复制代码

 // 创建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写法：

ini 复制代码

 <Canvas Background="Azure" x:Name="myCanvas1" Height="400">
    <Polygon Points="350,200 250,100 300,250 " Fill="Red" Stroke="Blue" StrokeThickness="2"/>
</Canvas>

实现效果：

cs写法：

ini 复制代码

 // 创建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写法：

xml 复制代码

<Canvas Background="Azure" x:Name="myCanvas1" Height="400">
    <Path Stroke="Blue" StrokeThickness="2">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10,10">
                    <LineSegment Point="50,50"/>
                    <LineSegment Point="100,20"/>
                    <LineSegment Point="150,70"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

实现效果：

cs写法：

ini 复制代码

// 创建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);

实现效果与上述相同。