WPF基礎：在Canvas上繪製圖形

mingupupup發表於2024-04-16
Canvas

Canvas介紹

Canvas是WPF（Windows Presentation Foundation）中的一種皮膚控制元件，用於在XAML中佈置子元素。它提供了絕對定位的能力，允許元素在自由的二維空間中放置。Canvas上的子元素可以透過指定絕對位置（Left和Top屬性）來放置，也可以使用附加屬性來指定相對於Canvas的位置。Canvas對於需要自由佈局的場景非常有用，例如繪圖應用程式或需要精確放置UI元素的情況。但是，使用Canvas佈局時要注意，它不會自動調整子元素的位置或大小，因此需要手動管理子元素的佈局。

image-20240416085443415

在Canvas上繪製矩形

在xaml定義一個Canvas：

 <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>

效果如下所示：

image-20240416085838561

繪製矩形：

 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）中的一個類，它表示一個矩形圖形。

image-20240416093429075

以下是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的子元素中。

實現效果：

image-20240416094336410

也可以直接在xaml中寫：

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

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

實現效果：

image-20240416094913617

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

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

實現效果：

image-20240416095915008

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

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

實現效果：

image-20240416101250384

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

<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>

實現效果：

image-20240416101923692

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);

實現效果與上述相同。

相關文章