首页 > 其他分享 >WPF基础:在Canvas上绘制图形

WPF基础:在Canvas上绘制图形

时间:2024-04-16 11:11:07浏览次数:26  
标签:Canvas Windows System 50 new WPF 绘制 rectangle

Canvas介绍

CanvasWPF(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.RectangleWPF(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);

实现效果与上述相同。

标签:Canvas,Windows,System,50,new,WPF,绘制,rectangle
From: https://www.cnblogs.com/mingupupu/p/18137691

相关文章

  • 美化一下WPF自带得ToolTip
    对照一下原版和美化以后得版本原版: ---------- 新版: 新增了圆角和阴影效果;第一步:新建项,最下面有一个自定义控件,取名为CornerToolTip。第二步:系统会创建一个CornerToolTip得类,默认继承自Control,我们把Control改成ToolTip:第三步:系统生成CornerToolTip类得同时,还会......
  • wpf datagrid,menuitem, style, export ,show in a another window,mvvm
    //xaml<Windowx:Class="WpfApp58.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mic......
  • WPF 在后台代码中选中DataGrid的多行
    1///<summary>2///设置datagrid选中多行3///</summary>4///<paramname="listIndex"></param>5privatevoidSetSelectMessageIndex(List<int>listIndex)6{7......
  • Canvas图形编辑器-数据结构与History(undo/redo)
    Canvas图形编辑器-数据结构与History(undo/redo)这是作为社区老给我推Canvas,于是我也学习Canvas做了个简历编辑器的后续内容,主要是介绍了对数据结构的设计以及History能力的实现。在线编辑:https://windrunnermax.github.io/CanvasEditor开源地址:https://github.com/Wind......
  • WPF ContextMenu MenuItem style based on
    <Windowx:Class="WpfApp58.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.......
  • WPF开发时候遇到的问题
    1.DataGrid下的DataGridTemplateColumn的ComboBox绑定问题最开始的形式<DataGridTemplateColumnHeader="截面名称"><DataGridTemplateColumn.CellTemplate><DataTemplate><ComboBoxHorizontalAlignment=&q......
  • 基于Canvas实现的简历编辑器
    基于Canvas实现的简历编辑器大概一个月前,我发现社区老是给我推荐Canvas相关的内容,比如很多小游戏、流程图编辑器、图片编辑器等等各种各样的项目,不知道是不是因为我某一天点击了相关内容触发了推荐机制,还是因为现在Canvas比较火大家都在卷,本着我可以用不上但是不能不会的原则,我......
  • WPF,Frame控件的一个BUG
    我使用WPF默认的frame<FrameStyle="{DynamicResourceFrameStyle1}"x:Name="frame"Height="80"NavigationUIVisibility="Visible"/>然后添加几次导航Task.Run(async()=>{this.Dispatcher.BeginInvoke(()=>this.frame.N......
  • C# 面试 wpf .net 面试准备
    杂项介绍下自己时间一分半以内提炼自身优点,优势、亮点、基本情况言简意赅、语言精炼,控制时间和应聘岗位相关的经历(和招聘要求相关)为什么能够胜任岗位为什么要应聘该岗位~求职动机不能只介绍学校和专业,注意:重点介绍满足岗位要求的三个优势和亮点。表现出对岗位的理解和......
  • WPF新建viewModel实例化成员的注意事项
    不要用表达式体去初始化一个用做数据源(比如ItemSource)的引用类型成员。比如这种publicList<MainWindowItem>Items=>newList<MainWindowItem>(){newMainWindowItem{title="项目管理",icon="\ue613",type=typeof(项目管理Control),group="内部管理"},new......